michaelbenin / react-ssr-spa Goto Github PK

View Code? Open in Web Editor NEW

30.0 4.0 2.0 1.54 MB

Server side rendered single page app using reactjs official libraries.

License: MIT License

JavaScript 85.30% CSS 14.70%

react ansistrano pm2 ansible universal isomorphic react-router redux react-router-redux express

react-ssr-spa's Introduction

Server Coverage:

Client Coverage:

Acceptance Tests:

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

react-ssr-spa's People

Contributors

Stargazers

Watchers

Forkers

joaocarvalhowd manishnakar

react-ssr-spa's Issues

Upgrade libs

https://medium.com/@aickin/whats-new-with-server-side-rendering-in-react-16-9b0d78585d67

Error Log generating client side code coverage report (report is still accurate)

Fixed here: gotwarlost/istanbul#816

Needs contributing.md

Provide how we contribute to the project.

Update to lates LTS version of node and babel preset

https://www.npmjs.com/package/babel-preset-node6

Support # links for analytics

example http://url#something causes invariant error when parsing

Add eslint-config-prettier

https://github.com/prettier/eslint-config-prettier

Add a check in status reducer to set the status to 200 on loading after server render

if (/PAGE_LOADING/.test(action.type) && canUseDOM) {
    return extend({}, state, {
      code: 200
    });
  }

Example setting host in supertest

// https://github.com/visionmedia/supertest/pull/297#issuecomment-275826472
function createVhostTester(app, vhost) {
  const real = supertest(app);
  const proxy = {};

  Object.keys(real).forEach(methodName => {
    proxy[methodName] = function() {
      return real[methodName]
        .apply(real, arguments)
        .set('host', vhost);
    }
  });

  return proxy;
}

var api = createVhostTester(appInstance, 'api.example.com');
var appTest = createVhostTester(appInstance, 'app.example.com');

Add build for travis ci

Also enable chrome headless: https://swizec.com/blog/how-to-run-javascript-tests-in-chrome-on-travis/swizec/6647

Don't rerender bootstrap config on client

After initial page load client can return null. Only needed to bootstrap data.

Also add a check for support in legacy browsers, if not load in the polyill

Author acceptance tests in babel

Try adding babel-register to mocha opts in config.

Live reload sass breaks sourcemaps

https://github.com/michaelBenin/react-ssr-spa/blob/master/gulpfile.babel.js/tasks/gulp_sass_dev.js#L20

Fix:

change to:

.pipe(livereload({ file: '/css/main.css' }));;

Add react redbox integration with react hot loader

https://github.com/commissure/redbox-react

Example with react-hot-loader:

https://github.com/commissure/redbox-react/blob/master/examples/react-hot-loader/index.js

Add scroll position reducer so when user returns to route, scroll them to where they left

Add example animating routes

From the comment from UXLayout here: remix-run/react-router#3936 doesn't look like there's a "happy path" for this yet.

Add example AB testing

Bootstrapped config randomized properties.

Add documentation on importance of character set

In server rendering, it's important to use utf-8 in browser for the bootstrapping of data.

Add more documentation comments to project

Pass dispatch and state individually instead of store

We pass store around a lot, it makes more sense to use dispatch and state, also we plan on moving the data fetching to be called on the component from the client instead of in the browserHistory listener.

Add Google AMP Support

https://www.npmjs.com/package/react-amphtml

Update Nodemon config for full path in watch and ignore

Issue here: remy/nodemon#1003

Bug in react-router-redux causing invariant errors

reactjs/react-router-redux#481

Revert to previous release.

Query params break route matching, switch to using path instead

remix-run/react-router#5132

Add code coverage for karma tests

https://github.com/codecov/example-node

Get Client Side and Server Side Coverage up to 70%

Right now it's at 51% for server and 13% for client.

Add example of components only meant to be rendered client side

Sometimes we have components which only work in the client and we don't want to render them on the server. What we can do here is check for the initial page load in the state, if it is don't render the component until after that render. Essentially, render first without client side component by doing a check if it's initial page load, after that, an event is dispatched, the component then rerenders with the client side component. This solves issues with invariants with components from react-d3 and many others.

import gulp from 'gulp';
import { log } from 'gulp-util';
import changed from 'gulp-changed';
import babel from 'gulp-babel';
import config from './../configs/config';

gulp.task('babel-server', function babelServer() {
  const babelStream = babel({
    sourceMaps: 'inline',
    presets: [
      'react',
      [
        'env',
        {
          targets: {
            node: 'current'
          }
        }
      ]
    ]
  });

  babelStream.on('error', function handleError(err) {
    log(`Error transpiling babel in gulp_babel_server task.`);
    log(err);
    babelStream.end();
  });

  return gulp
    .src(config.server.src)
    .pipe(changed(config.dest))
    .pipe(babelStream)
    .pipe(gulp.dest(config.dest));
});

Source: gulpjs/gulp#71

if (process.env.NODE_ENV === 'production') {
    require('react/dist/react.min.js');
    require.cache[require.resolve('react')] = require.cache[require.resolve('react/dist/react.min.js')];

    require('react-dom/dist/react-dom-server.min.js');
    require.cache[require.resolve('react-dom/server')] = require.cache[require.resolve('react-dom/dist/react-dom-server.min.js')];
}