All Projects → michaelBenin → react-ssr-spa

michaelBenin / react-ssr-spa

Licence: MIT license
Server side rendered single page app using reactjs official libraries.

Programming Languages

javascript
184084 projects - #8 most used programming language
CSS
56736 projects

Projects that are alternatives of or similar to react-ssr-spa

React Redux Universal Boilerplate
An Universal ReactJS/Redux Boilerplate
Stars: ✭ 165 (+450%)
Mutual labels:  mocha, react-router, eslint, karma, hot-reload
Pwa
An opinionated progressive web app boilerplate
Stars: ✭ 353 (+1076.67%)
Mutual labels:  react-router, eslint, universal, pm2
react16-seed-with-apollo-graphql-scss-router4-ssr-tests-eslint-prettier-docker-webpack3-hot
Seed to create your own project using React with Apollo GraphQL client
Stars: ✭ 19 (-36.67%)
Mutual labels:  mocha, react-router, eslint, hot-reload
Arc
React starter kit based on Atomic Design
Stars: ✭ 2,780 (+9166.67%)
Mutual labels:  isomorphic, react-router, universal
Project Webcube
Continuously updated JS infrastructure for modern web dev
Stars: ✭ 141 (+370%)
Mutual labels:  isomorphic, react-router, eslint
Isomorphic Lab
Isomorphic React experimentation
Stars: ✭ 144 (+380%)
Mutual labels:  isomorphic, react-router, universal
React Cnodejs.org
Material UI version of cnodejs.org, the biggest Node.js Chinese community.
Stars: ✭ 242 (+706.67%)
Mutual labels:  react-router, eslint, pm2
React Base
atSistemas React/Redux Isomorphic Platform
Stars: ✭ 82 (+173.33%)
Mutual labels:  mocha, isomorphic, universal
generator-speedseed
Oriented to components, allow create/choice template, multiple configuration with easy maintenance
Stars: ✭ 13 (-56.67%)
Mutual labels:  gulp, mocha, karma
isomorphic-react-redux-saga-ssr
Isomorphic, React, Redux, Saga, Server Side rendering, Hot Module Reloading, Ducks, Code Splitting
Stars: ✭ 19 (-36.67%)
Mutual labels:  isomorphic, eslint, react-router-redux
Nodebestpractices
✅ The Node.js best practices list (December 2021)
Stars: ✭ 72,734 (+242346.67%)
Mutual labels:  mocha, eslint, expressjs
angular-material-boilerplate
A straightforward and well structured boilerplate based on Google's Angular Material project.
Stars: ✭ 28 (-6.67%)
Mutual labels:  gulp, eslint, karma
Universal React Tutorial
📓 How to build universal web apps with React.
Stars: ✭ 136 (+353.33%)
Mutual labels:  isomorphic, react-router, universal
Isomorphic React
A simple but powerful React application built on a standards-compliant back-end
Stars: ✭ 318 (+960%)
Mutual labels:  isomorphic, react-router, universal
React Redux Styled Hot Universal
react boilerplate used best practices and focus on performance
Stars: ✭ 147 (+390%)
Mutual labels:  isomorphic, react-router, universal
FlipED
A LMS built specifically for Thailand's Education 4.0 system.
Stars: ✭ 24 (-20%)
Mutual labels:  isomorphic, react-router, universal
Generator Fountain Webapp
Yeoman 'fountain' generator to start a webapp
Stars: ✭ 985 (+3183.33%)
Mutual labels:  gulp, eslint, karma
Js Stack Boilerplate
Final boilerplate code of the JavaScript Stack from Scratch tutorial –
Stars: ✭ 145 (+383.33%)
Mutual labels:  react-router, eslint, pm2
Express React Boilerplate
Express, MySQL, React/Redux, NodeJs Application Boilerplate
Stars: ✭ 179 (+496.67%)
Mutual labels:  react-router, eslint, expressjs
Express Mongoose Es6 Rest Api
💥 A boilerplate application for building RESTful APIs Microservice in Node.js using express and mongoose in ES6 with code coverage and JsonWebToken Authentication
Stars: ✭ 2,811 (+9270%)
Mutual labels:  mocha, eslint, bluebird

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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].