Extremely simple boilerplate, easiest you can find, for React application including all the necessary tools: Flow | React 16 | redux | babel 6 | webpack 3 | css-modules | jest | enzyme | express + optional: sass/scss
Extremely simple boilerplate, easiest you can find, for React application including all the necessary tools: Flow | React 16 | redux | babel 6 | webpack 3 | css-modules | jest | enzyme | express + optional: sass/scss
werein/react
React
Extremely simple boilerplate, easiest you can find, for React application including all the necessary tool
And optional (just install missing dependencies):
npm i node-sass sass-loader --save
npm i surge -g
Also take a look here for also extremely simple React Native boilerplate
Flow
There is a version with
flow
enabled, since everyone is using it these days and quite a lot of libraries has direct support, I've also created a branch whereflow
is supported. This setup allows you for example to see an action and theirs data in correctly in reducers switch statement, doesn't let you to dispatch and undefined action or to see state in amapStateToProp
. Please thumbs up or don't in a PR for merge: #52Installation
All you need to do is clone this repository
Keep it up to date
Track this repo
Get the latest version and apply onto your stack
Running
Application has very few dependencies, so it’s most probably very easy to understand when you scan through the code, but there is at least few steps you should know
Start front-end React application
Application is divided into two parts. One is pure React front-end, powered by
webpack-dev-server
in development mode.To start this application run command below and open your app on
http://localhost:8080
To test your application, run
npm run test
- single run - good for CI or precooknpm run test:watch
- watches for changes, good for developmentIf you don’t plan to connect to your own backend, you should be just fine
Start Express back-end
Second part of this application is back end written in Express. This is a place, where you provide API for front-end or/and server yours production application.
To start backend server, run npm command bellow and open
http://localhost:8181
This is also watching for changes, so when you update some code on backend, you don’t have to restart the server, it does that automatically
Every call which goes to
/api
is proxied to this backend so for example when you make a request to/api/locales
on front-end, it will go to this express backend server using the same pathProduction
Running
npm run build
will create production ready application into yourdist
folder. All you need to do is make thisdist
folder publicly available. You can usesurge.sh
as described bellow to do so.Included Express server is preconfigured to serve
/dist
folder. All you need to do is runnpm run server
on your production server. The same is happening automatically, when you deploy to Heroku (It executes this command fromProcfile
This is also good to run on your local computer to ensure, that your application is running as it should.
Current production size is 205kb and 56.8kb gziped
Deployment
Surge.sh
Simple, single-command web publishing. Publish HTML, CSS, and JS for free, without leaving the command line.
npm i surge -g
npm run surge
Heroku
Heroku works out of the box, just use "deploy to heroku" button
Tools
This project works with ReduxDevtool extension for chrome. Read more
License
MIT