git clonenpm ci
-
create
src/index.js.import { createRoot } from 'react-dom/client'; function App() { return "Hello WORLD"; } createRoot(document.getElementById("root")).render(<App />);
-
create
public/index.html<!DOCTYPE html> <html lang="en"> <head> <title>Document</title> </head> <body> <div id="root"></div> </body> </html>
Example branch: react-min-src. This repo also has all the optional features enabled.
| Commands | Inf |
|---|---|
| start | dev mode. |
| build | generate build files. |
| wm | run wm-script.js script with arguments. |
| speed-measure-dev | measure speed in dev mode. |
| commit | run commitizen. creates standard commit. |
| release | run standard-version. creates standard release. |
| prettier | format files in src and public |
Enable/Disable optional features in the project. The feature setup is already added in the project but to enable/disable them you have to run commands. The commands actually install packages and set private variables in wm-config.js to keep track of features.
- enable:
Replace
npm run wm -- enable-feat-typescriptindex.jswithindex.tsx(filename's are defined inwm-config.js). - disable:
Replace
npm run wm -- disable-feat-typescriptindex.tsxwithindex.js(filename's are defined inwm-config.js).
Adds sass
- enable:
npm run wm -- enable-feat-sass - disable:
npm run wm -- disable-feat-sass
npm run wm -- enable-feat-typescript enable-feat-sass
npm run wm -- disable-feat-typescript disable-feat-sass
This command update every feature dependencies.
npm run wm -- update-feat-all
You should generally update the setup after every release.
If you have made changes to any root files like wm-config.js, webpack.dev.js etc. that is you made custom changes. Then run the following command to review changes before overwriting your changes:
git fetch && git merge origin/master --no-ff --no-commit
Otherwise if you have not changed any of root files:
git pull origin master
Install the dependencies:
npm i
If you have installed any optional features then run update command as well.
Also you should avoid pulling
package-lock.jsonif your dependencies inpackage.jsonare not exact as of react-min/master. Instead maintain your ownpackage-lock.json. Packages differ when you enable optional features that may install its own packages or user might install its own custom packages.
To removepackage-lock.jsonfrom merge conflict use:git checkout head -- package-lock.json
-
add env variables (in use in app only). Example:
- add
HELLO = WORLDin file say.env - Then in
wm-config.js. Add"HELLO"for it to be available in your App.In your Appconst wmConfig = { ... environmentVariablesInApp: ["HELLO"] },
console.log(process.env.HELLO);
env variables starting with
REACT_MIN_are automatically added.
- add
-
add svg as component: Append
?reactafter file path in import statement in order for this to work.import MySvg from "@assets/react.svg?react"; import mySvg from "@assets/react.svg"; function App() { return ( <> <MySvg width="200" height="200" viewBox="0 0 3500 3500" /> <img src={mySvg} width="200" height="200" /> </> ); }
Second svg is not imported as component but will be resolved as string by webpack.
-
import other files:
import sampleImg from "@assets/sample.jpeg"; import sampleJson from "@assets/sample.json"; // { "hello" : "world" } import helloTxt from "@assets/hello.txt"; console.log(sampleJson.hello); function App() { return ( <> <pre>{helloTxt}</pre> <img src={sampleImg} width="200" height="200" /> </> ); }
-
Directly edit webpack config as you like (
wm-*.js,webpack.*.jsfiles) -
edit standard commit types in
.czrcfile. This file is used by commitizen. -
edit
.versionrc.jsfile used by standard-version. -
edit babel setup in
wm-config.js(browserslist,wmConfig.babel) -
edit eslint (
.eslintrc.js) -
edit prettier (
.prettierrc.json) -
update typescript (
tsconfig.json). add custom modules types inindex.d.tsfile. -
publicPathcan be changed inwm-config.js.publicPathis similar to homepage field in CRA. -
publicPathcan be included in index.html and in code. See.// index.html <link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> // code process.env.PUBLIC_URL -
typescript is enabled in IDE's and reports type errors when a file is opened. But one can also enable build tools like webpack to report typescript errors. Configeration is in
wm-config.js:{ ..., typescriptErrorCheckInDev: false, typescriptErrorCheckInProd: true, }
This repo use commitizen & standard-version for generating releases, tags & changelogs.
- ✨ Features (minor)(public): when you add functionality in a backwards compatible manner
- ⚡️ Performance (patch)(public): internal performance improvements
- 🛠️ Bug Fixes (patch)(public): when you make backwards compatible bug fixes like internal dependency updates "fix(deps)", important document corrections "fix(docs)" etc
- 📝 Docs (public): project documentation updates. Use "docs(X.X.X)" for doc update related to a version.
- 📝 Important Docs change (patch)(public): same as
Docsbut will also increment the patch. - ⛏️ Chore (private): Code Styling, Refactor, changes that are categorised as other and does not bring any version update.
- ☑️ Tests (private): add code to test your code
- Webpack generating duplicate code to save number of requests
- https://blog.logrocket.com/why-you-should-use-package-lock-json/
- Guide
process.envis initialized with custom environment variables only in filewm-config.jssince it importsdotenv-flowwhich loads variables in.env.*files and also add some special variables toprocess.env.
- Babel
- Eslint
- Other Packages
- Webpack
- webpack
- webpack-cli
- webpack-dev-server
- webpack-merge
- Plugins
- Loaders
- @types
- @types/react
- @types/react-dom
- typescript
- Babel
- Eslint
- sass
- Webpack
- Loaders