Introduction

🚀 Start UI [web] is an opinionated frontend starter created & maintained by the BearStudio (opens in a new tab) Team and other contributors. Start UI [web] (opens in a new tab) will help you generate React web app for SEO, PWA, SPA, SSR. Built on top of NextJS and Chakra UI, it represents our team's up-to-date stack that we use when creating web apps for our clients.

This documentation has been written to help developer using Start UI and getting to know the technologies used, the list of features available and how to use them thanks to the guides.

Getting Started

npx create-start-ui@latest --web myApp

That will scaffold a new folder with the latest version of 🚀 Start UI [web] 🎉

Then just go to the created folder:

cd myApp

# Duplicate the .env.example file to a new .env file (update variables)
cp .env.example .env
 
# Init the local mocks database and seed users
yarn db:push && yarn db:seed
 
# Run the development server
yarn dev

Installation

1. Duplicate the .env.example file to a new .env file, and update the environment variables

cp .env.example .env

2. Install dependencies

yarn install

3. Init the local mocks database and seed users

yarn db:push && yarn db:seed

Development

# Run the development server
yarn dev

Storybook

yarn storybook

NodeJS (recommended)

yarn install
yarn storybook:build # Optional: Will expose the Storybook at `/storybook`
yarn build
yarn start

Docker

1. Build the Docker image (replace start-ui-web with your project name)

docker build -t start-ui-web .

2. Run the Docker image (replace start-ui-web with your project name)

docker run -p 80:3000 start-ui-web

Application will be exposed on port 80 (http://localhost)

Static files

Update the next.config.js file with output: 'export' (and remove redirects and rewrites)

{
  output: 'export',
}

yarn storybook:build # Optional: Will expose the Storybook at `/storybook/`
yarn build

Then expose the /out folder.

You can use yarn build && npx serve out -c ../static.serve.json to build and run the static build locally.

💡 You will need to setup your server to rewrite all /app/* urls to serve the app.html file.

Using Apache as your web server

If you are using apache (opens in a new tab) to statically deploy your app, you can use the following configuration for public/.htaccess :

# public/.htaccess
Options -MultiViews
RewriteEngine On
 
# Rewrite /app/* to app.html
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule "^app/" "app.html" [QSA,L]