Mocking up web app with Reactive
linguijs have issue with
t
macro, use<Trans>
micro as much as possible instead, until issue solverd
-
๐จ UnoCSS - the instant on-demand atomic CSS engine
-
๐ค Remote fonts (for self hosted fonts use
FontSource
install) -
๐ I18n ready
-
๐ฅ APIs auto importing
-
๐ Markdown Support
-
๐ท๏ธ Manage meta tsgs
-
๐ฆพ TypeScript, of course
-
๐ถ Git hooks with husky
-
โ๏ธ Deploy on Netlify, zero-config
-
๐ Top Level Await out of box
-
๐ Inspect code with - Vite Inspect, and UnoCSS, visit them at
/__inspect
and__unocss
. also open compnents in editor with Alt + Right-Click -
๐ Mocking Server API with json-server
for component preview add Preview.js to vscode
Reactive requires Node >=14.18
Create a repo from this template on GitHub.
If you prefer to do it manually with the cleaner git history
npx degit wusaby-rush/reactive my-reactive-app
cd my-reactive-app
pnpm i # If you don't have pnpm installed, run: npm install -g pnpm
When you use this template, try follow the checklist to update your info properly
- Remove the
.github
folder - Clean up the READMEs and remove routes
- Remove tests and write your own
And, enjoy :)
Just run and visit http://localhost:5173
pnpm dev
To build the App, run
pnpm build
And you will see the generated file in dist
that ready to be served.
Go to Netlify and select your clone, OK
along the way, and your App will be live in a minute.
First, build the vitesse image by opening the terminal in the project's root directory.
docker buildx build . -t reactive:latest
Run the image and specify port mapping with the -p
flag.
docker run --rm -it -p 8080:80 reactive:latest
Configure apps is a headeach, I loved vitesse template for vue, so I decided do one for react.
If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
- Configure the top-level
parserOptions
property like this:
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
project: ['./tsconfig.json', './tsconfig.node.json'],
tsconfigRootDir: __dirname,
},
- Replace
plugin:@typescript-eslint/recommended
toplugin:@typescript-eslint/recommended-type-checked
orplugin:@typescript-eslint/strict-type-checked
- Optionally add
plugin:@typescript-eslint/stylistic-type-checked
- Install eslint-plugin-react and add
plugin:react/recommended
&plugin:react/jsx-runtime
to theextends
list