react-ssr-starter

All have been introduced React environment.

Features

• react
• react-router
• react-helmet-async
• react-hot-loader
• redux
• styled-components
• loadable-components
• express
• workbox
• eslint
• stylelint
• prettier
• jest
• enzyme
• storybook
• webpack
• babel

Install

$ git clone https://github.com/osamu38/react-ssr-starter.git
$ cd react-ssr-starter
$ npm i

Run

$ npm run dev

Go to http://localhost:2525/.

Build

$ npm run build
$ npm run build:client (Only build client)
$ npm run build:server (Only build server)

Build and analyze

$ npm run build:analyze
$ npm run build:client:analyze
$ npm run build:server:analyze

Run for production

npm start

Go to http://localhost:2525/.

Adding pages

Basically page component is implemented using Functional Component.

pages/home/index.js

import React from 'react';
import { Helmet } from 'react-helmet-async';
import Title from 'components/Title';
import SubTitle from 'components/SubTitle';
import UserList from 'components/UserList';
import { fetchUsers } from 'actions/user';

const HomePage = (props) => {
  const {
    state: {
      user: { userList },
    },
  } = props;

  return (
    <>
      <Helmet title="Home" />
      <Title>Home Page</Title>
      <SubTitle>User List</SubTitle>
      <UserList userList={userList} />
    </>
  );
};

HomePage.loadData = async (ctx) => {
  const {
    dispatch,
    state: {
      user: { userList },
    },
  } = ctx;

  if (!userList.length) {
    return dispatch(fetchUsers());
  }
  return Promise.resolve();
};

export default HomePage;