workflow-reactjs
workflow-reactjs copied to clipboard
My workflow with ReactJS + Webpack 3+
Workflow ReactJS
:warning: Disclaimer
Instead of using this project, prefer Create React App
What's inside it?
- Webpack 3+
- Babel
- React hot loader
- HTML and CSS generated automatically by webpack
- Jest for tests and Chai for assertions
- Storybook to create isolatelly components' stories
- Async/await
- Dynamic
import()
function - Webpack tree shaking!
- Preact for production build (optional)
Dependencies:
- Node.js
>=
v6;
Up and running
- Clone this repository:
git clone [email protected]:fdaciuk/workflow-reactjs.git
; - Remove
.git
directory; - Install dependencies:
yarn
(ornpm i
); - Run
yarn dev
(ornpm start
) to develop onhttp://localhost:3000
- Run
yarn build
(ornpm run build
) for production build (files will be generated ondist
directory)
Troubleshooting
If you are on Windows, and try to run yarn lint
, you'll get an error
because spawn
module does not work very well on Windows.
You should install cross-spawn
, and edit gulpfile.js
, removing line 4
and
uncomment line 7
.
A big thanks to @hgtpcastro for this tip.
Scripts
-
yarn dev (or npm run dev)
: Starts the application on development mode -
yarn test (or npm test)
: Run tests once -
yarn test:watch (or npm run test:watch)
: Run tests in watch mode -
yarn build (or npm run build)
: Build project to production -
yarn build:analyzer (or npm run build:analyzer)
: Build project to production and open bundle analyzer on8888
port -
yarn storybook (or npm run storybook)
: Run Storybook on6006
port -
yarn storybook:build
: Build Storybook to static files -
yarn update-packages
: Update all packages to the latest version -
yarn start (or npm start)
: Special script reserved to run production code. Change as you wish. For now, it is the same asyarn dev
.
License
MIT © Fernando Daciuk