- ES2015+ (Babel)
- React
- SASS
- Hot Module Replacement (for SASS and components)
- Install dependency by
yarn
- Now you can run
yarn start
to start development server (webpack-dev-server) on your machine. By default server start on port3000
.
- The file
app.config.js
should defined in root directory. - See
app.config.js.dist
to see how it should look like
Just run yarn start --port 8080
.
If you want start server on some free port, you can run yarn run start:fp
By default dev server is visible on LAN, so you can:
- check your IP (On Ubuntu
ip route get 8.8.8.8 | awk '{print $NF; exit}'
`), - run
yarn start
- send someone in your LAN, url to
YOUR_IP:3000
Just run yarn start --open
You can easily develop and browser your UI components by Storybook ([https://github.com/storybooks/storybook]).
Just run yarn run storybook
All stories should be in /stories
You can use auto generated unique CSS class name by CSS Modules.
All you should do:
- Create file with
.module.scss
on end, f.etest.module.scss
- Write normal styles like:
.button { color: red }
.text { color: blue }
- Use this styles in component file
import styles from './test.module.scss';
(...)
<button className={styles.button}>
<span className={styles.text}>Example</span>
</button>
This should render:
<button class="_1Bi2m4Xx6gfieBFTwE8yeb">
<span class="VlcDgw6EmyoYMzC9b0xxv">Example</span>
</button>
To build production version just run yarn run build
, after that,
in /dist
directory you have prod version.
Watch out!
App main config file (/app.config.js
) does not exist in directory /dist
.
Providing this file is job for you CI
- Vendors script is bundled to own hashed bundle, so if you don't change vendors in next deploy, users have this file in cache
- App configuration file is not bundled -
/app.config.js
, so you can build once and move this build on next deploy stage ((1) test > (2) staging > (3) prod) and create different/app.config.js
for each instance.
But Watch out!
You can still use variables defined by webpack.DefinePlugin
(for example process.env.NODE_ENV
which can be "development" - yarn start
and "production" - yarn run build
)
in your code. But, you must remember that process.env.NODE_ENV === "production"
will be also on
(1) test, (2) staging and (3) prod deploy stage.
If you want run some code only in (3) prod deploy stage, just create flag in your /app.config.js
.
Normaly, delelopment version of build (run by yarn start
) is served from memory (by webpack-dev-server),
sometime you might want to see how this served files looked. For this job you can run yarn run build:dev
, after that
in /dist
you can see all files served by yarn start
script
Just run yarn run lint
. Before each git commit
all files in git staged will be linted.
If there are any of error, commit will not execute.