Skip to main content

Initialize Local Frontend Empty Project

tip

This document is for local frontend development starting from scratch, completely decoupled from the platform. For projects exported from the platform for secondary development, please refer to Export Code to Local for Frontend Development.

Configure Local Frontend Development Environment​

Configure your local frontend development environment according to the document Configure Local Frontend Development Environment.

Initialize Project using the Scaffolding Tool​

Run the following command in the directory where you want to place your project code. new-website will be your project name.

npx --registry [https://nexus.dev.bizops.com.cn/repository/npm-group/](https://nexus.dev.bizops.com.cn/repository/npm-group/) create-icp-app@latest new-website

Project Structure​

After successfully creating the project using the scaffolding tool, the following project file structure will be generated inside the new-website folder:

frontend
├── appConfig
│   └── app.config.json
├── mockServer
│   ├── server.js
│   └── ...
├── public
│   ├── index.html
│   └── ...
├── src
│   ├── pbc
│   ├── pbcCode
│   ├── App.js
│   └── ...
├── .eslintrc.js
├── package.json
├── README.md
├── webpack.config.js
└── yarn.lock
└── ...

Run Development Mode​

yarn start

By default, the browser will open a new window at http://localhost:9092. Seeing the interface means the installation process was successful.

You can now develop new features in the project. The browser window will automatically refresh when you modify the project code.

Build​

Once development is complete, you need to build the project's static resources for deployment to the server.

yarn build

All built frontend static code will be placed in the /build directory. For deployment, please copy all files in this project to the deployment server folder.