Repository files navigation

A minimal Universal React redux JS stack usingFlow, 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 atelsewhen, 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 :).

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)

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 folderreact-redux-saucepan

cd react-redux-saucepan

• Install the dependencies

npm i

• Start developing, or...

npm run start:dev

Openhttp://localhost:3000 to view it in the browser.

• 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 indist 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)

npmtest

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

Work in progress...

Work in progress...

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 usingwebpack-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 runindex.dev.js we usebabel-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__ totrue 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

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 usingbrowserslist for your target browsers and done bybabel-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 totrue and__DEVELOPMENT__ tofalse.

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

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

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

npmtest

We try to follow ourJavascript 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.

This project usesAirbnb's javascript style guide for Javascript syntax andflowtype/recommended for Flow syntax usingeslint-plugin-flowtype.

For styles we usestylelint-config-standard which is checked byStylelint. This checks your style-components code usingstylelint-processor-styled-components.

You can check your code style by simply running:

npm run lint

React Redux Saucepan usesGithub rest api to represent some sample data. You can find the requests done byaxios 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).

React Redux Saucepan is open source softwarelicensed as MIT.