Skip to content

Server side rendered single page app using reactjs official libraries.

License

Notifications You must be signed in to change notification settings

michaelBenin/react-ssr-spa

Folders and files

NameName
Last commit message
Last commit date

Latest commit

9c36bc6 · Feb 21, 2018
Dec 7, 2017
Jan 9, 2018
Nov 2, 2016
May 3, 2017
Jan 9, 2018
Dec 19, 2017
Dec 19, 2017
Nov 2, 2016
Dec 13, 2017
Dec 9, 2016
Nov 2, 2016
Feb 21, 2018
Dec 19, 2017
Jul 7, 2017
Nov 2, 2016
Dec 19, 2017
Nov 17, 2016
Apr 29, 2017
Feb 21, 2018
Feb 21, 2018

Repository files navigation

Build Status dependencies Status devDependencies Status NSP Status styled with prettier

Server Coverage: Coverage Status

Client Coverage: codecov

Acceptance Tests: Sauce Test Status

Sauce Test Status

react-ssr-spa

About:

react-ssr-spa is a react app that is server side rendered and is a single page app.

Should you use this as a starting point for your application? A good way to know is if you answered yes to any of the following questions.

Do we need SEO?

Do we need fast page loads without a loading spinner?

Do we need a fast app like website?

Quickstart:

Requirements:

node.js v8.9.1 npm v5.5.1

git clone [email protected]:michaelBenin/react-ssr-spa.git
cd react-ssr-spa
npm i
npm start
Open browser http://localhost:8001/

Configuration:

(Optional) Create an .env file at the root of the directory. See .env.example in root.

Commands:

Run in dev mode:

npm start

Optimized for use with:

React Developer Tools

Redux DevTools

Node Inspector Manager

React Performance Devtool

React-Sight

Server Side Unit Tests:

npm run server-unit-test

Server Side Integration Tests:

npm run server-integration-test

Client Side Unit Tests:

npm run client-unit-test
npm run client-unit-test-watch

Client Side Integration Tests:

npm run client-integration-test
npm run client-integration-test-watch

Functional / Acceptance Tests (WIP):

npm run acceptance-test

JS Lint (uses eslint):

npm run js-lint
npm run js-lint-fix

Style Lint (uses styleint):

npm run style-lint
npm run style-lint-fix

Fix JS/SCSS Lint:

npm run fix-all

Generate JS Documentation:

npm run js-doc

Generate Style Documentation:

npm run style-doc

Generate All Documentation:

npm run docs

Generate Complexity Report:

npm run complexity-report    

Build production assets:

npm run build-prod

Emulate Production Locally:

npm run build-prod
NODE_ENV=test node dist/server

Analyize bundle size

npm run build-prod

Update package.json with the appropriate js and map files.

npm run analyzie-bundle

Run production server (requires PM2 installed globally)

If PM2 is not installed:

npm i pm2 -g

To run server in production mode:

npm run prod-server

Upload Artifact to S3

npm run create-upload-artifact

Upload Static Files to S3

npm run upload-static-files

Configure Server

ansible-playbook -u ubuntu ./ansible/deploy/deploy.yml

Deployment (ansible & ansistrano)

ansible-playbook -u ubuntu ./ansible/deploy/deploy.yml

Rollback (ansible & ansistrano)

ansible-playbook -u ubuntu ./ansible/rollback/rollback.yml

Core Libraries:

https://github.com/facebook/react

https://github.com/reactjs/react-router

https://github.com/reactjs/redux

https://github.com/reactjs/react-redux

https://github.com/reactjs/react-router-redux

https://github.com/gaearon/redux-thunk

https://github.com/nfl/react-helmet

https://github.com/expressjs/express

Inspiration:

https://github.com/rendrjs/rendr

https://github.com/michaelBenin/node-startup

https://github.com/ember-fastboot/ember-cli-fastboot