React Redux Saucepan

A minimal Universal React redux JS stack using Flow, with hot reloading, linting and server-side rendering.

This is a universal react project. It provides server-side rendering and uses Flow syntax. We put together React Redux Saucepan here at elsewhen, and included the things you most likely need and take out the things you may not want. We also do our best to keep this maintained and updated. Posting any issues, questions, suggestions and PRs are more than welcome :).

What's inside

react 16

react-router 4

react-redux 4

redux 4

webpack 4

express 4

react-hot-loader 4

flow

prettier

styled-components

eslint

stylelint

babel(env)

Quick start

First make sure you have at least node 8, and we recommend using npm 6

• Clone the repo,

git clone  https://github.com/elsewhencode/react-redux-saucepan

• Then enter the folder react-redux-saucepan

cd react-redux-saucepan

• Install the dependencies

npm i

• Start developing, or...

npm run start:dev

Open http://localhost:3000 to view it in the browser.

Commands

• To build for production and start the server (includes Flow and Lint check in webpack build):

npm start

• To only build in production (it dumps the files in dist folder):

npm run build

• To start in develop with hot reloading (includes babel-watch for server-side code changes):

npm run start:dev

• To run a type check and a flow coverage report:

npm run flow

• To check code style (for both stylelint and eslint):

npm run lint

• Runs the tests (if there is any)

npm test

Project Structure

.
├── dist
|   
├── docs
|
├── flow-typed
|
├── scripts
|   ├── webpack.client.js
|   ├── webpack.dev.js
|   └── webpack.server.js
|
├── src
|   ├── client
|   |   └── ...
|   |
|   ├── server
|   |   └── ...
|   |
|   ├── shared
|   |   ├── api
|   |   |   └── ...
|   |   |
|   |   ├── components
|   |   |   └── ...
|   |   |    
|   |   └── pages
|   |       └── ...
|   |
|   └── util
|
└──  static

So, what is client,server and shared folders?

Work in progress...

Why reducers and containers are in pages?

Work in progress...

Developing

When running in development mode, there will be an express file: ./src/server/index.dev.js that serves you. It will consume your dev webpack config in ./scripts/webpack.dev.js using webpack-dev-middleware. It will throw an empty html file (./src/server/html.js) which initiates the react app on browser (there is no server-side rendering in dev mode). This is the same html file that gets used in production, so you an have the same meta, favicon etc.. . Instead of using node to run index.dev.js we use babel-watch. This enables you to use latest JS syntax on the server and watch for any changes and reload it if necessary.

There is hot reloading available to make development easier for you. Eslint, flow and stylelint are also checked on the fly as you add new code to the project. ./scripts/webpack.dev.js sets the global __DEVELOPMENT__ to true which you can use in your code.

To run the app in development mode, simply run: You can build the app by running:

npm run build

Building for production

Build is done by webpack for both server-side and client-side. The output is set to ./dist folder which is Webpack's default output directory. The process includes Flow type checking, linting, and transpiling for both client and server. You can find webpack configs in ./scripts folder.

Transpiling is set in .browserslistrc using browserslist for your target browsers and done by babel-env.

There are global variables set to help you check whether you're on client or server in the runtime: __CLIENT__ and __SERVER__. Also both client and server webpack configs will set __PRODUCTION__ global to true and __DEVELOPMENT__ to false.

You can build the app by running:

npm run build

the you can run the app by running:

node dist/index.js 

build script is also set as a prestart for starting the app in production mode. So you can run above steps at once:

npm start

Configuration

Values that can set by developer are PORT, and HOST that can be set in a .env file which is read by ./config.js and then used across the app.

Tests

We havn't written any test yet and it's in our todo list is in our to do list. 🙈

npm test

Project guidelines

We try to follow our Javascript project guidelines as much as we can, but we also like to keep this app quite minimal. You will find most of the Elsewhen's project guidelines in the tools we use and the way folders are structures, as well as naming, linting and chosen dependencies.

Code style and linting

This project uses Airbnb's javascript style guide for Javascript syntax and flowtype/recommended for Flow syntax using eslint-plugin-flowtype.

For styles we use stylelint-config-standard which is checked by Stylelint. This checks your style-components code using stylelint-processor-styled-components.

You can check your code style by simply running:

npm run lint

Api

React Redux Saucepan uses Github rest api to represent some sample data. You can find the requests done by axios in ./src/shared/api/index.js. Api calls are made in both client and server side (to include the data in server-side rendered markup).

License

React Redux Saucepan is open source software licensed as MIT.