Quick Start#

The goal of this chapter is to help you quickly familiarize yourself with and get started with the basic development and usage of the wis project in the shortest possible time.

Environment Requirements#

• Node.js >= v20 or higher version, LTS version recommended
• Supports MacOS, Windows, Linux

---

Project Initialization#

We provide a command-line tool to help you quickly create applications. This documentation will use the community solution Rsbuild as an example.

Create Project#

$ npx @wisdesign/cli@latest create

Follow these steps to create a brand new project:

✔ What's name of your project? my_app
✔ What cli do you want to use? rsbuild
✔ Could you want to use lint(default: Yes)? Yes
 
◆  Create Rsbuild Project
│
◇  Next steps ─────────────╮
│                          │
│  1. cd my_app            │
│  2. git init (optional)  │
│  3. npm install          │
│  4. npm run dev          │
│                          │
├──────────────────────────╯
│
└  All set, happy coding!

Install Dependencies#

You can use any package manager to manage your project, such as npm, pnpm, yarn, etc. Here we'll use npm as an example.

$ cd my_app
$ npm install

Start Project#

Run the development server, which by default listens on port 3000. If you need to modify the port, refer to

$ npm run dev

The scaffold will automatically open your browser and visit the project's homepage.

Create Pages#

To add a new Demo page, we need to create the following directory structure:

Open the src/pages/demo/Demo.page.tsx file and add the following code:

export default function Demo() {
  return <div>Welcome to Demo Page</div>
}

At this point, the demo directory will be automatically mapped to a route address. We can open the browser and visit http://localhost:3000#/demo to see the newly added Demo page. For more detailed information, check out Pages and Layouts

Create Layouts#

Layouts are UI interface elements shared by all pages. To add a new Index layout, we need to create the following directory structure:

Open the src/layouts/index/Index.layout.tsx file and add the following code:

import type { ReactNode } from 'react'
 
export default function IndexLayout({ children }: { children: ReactNode }) {
  return (
    <div>
      <h1>Index Layout</h1>
      {children}
    <div>
  )
}

At this point, the index directory will be mapped as a layout address. To access the previously added demo page through the index layout, simply open your browser and visit http://localhost:3000/#/index/demo. You'll notice that the interface now displays both the previously created page content and the layout content.

You can freely create different layouts in your project and use them in different scenarios. For more detailed information, check out Pages and Layouts

Conclusion#

By now, you have learned the basic usage of the wis project. For other engineering capabilities, such as styles, images, etc., these are not maintained by us but are provided by the scaffold you use, such as Rsbuild. You can refer to their documentation for more information.

Based on the purpose of this documentation, we haven't elaborated much on wis's core feature Cross-platform Applications, and our cross-platform component library under construction wis. You can check the corresponding sections according to your needs.