EQuimper / Thinkful Workshop React Redux Node Mongodb Webpack2

Stack

• React
• Redux
• MongoDB
• Node.JS
• Webpack2
• FlowTypes
• Styled-Component
• Service-Worker
• App Caching

PWA TEST

The test link https://googlechrome.github.io/lighthouse/viewer/?gist=66a00c9974e7b3bb4ba1fed1cf0c07cf

Theme Color on Chrome for Android

Code splitting with React-Router

const componentRoutes = {
  component: App,
  path: '/',
  childRoutes: [
    {
      path: '/posts',
      async getComponent(location: string, cb: Function) {
        try {
          const module = await import('./modules/posts/Posts');
          cb(null, module.default);
        } catch (e) {
          errorLoading(e);
        }
      }
    },
    {
      path: '/posts/:id',
      async getComponent(location: string, cb: Function) {
        try {
          const module = await import('./modules/posts/SinglePost');
          cb(null, module.default);
        } catch (e) {
          errorLoading(e);
        }
      }
    }
  ]
};

Service Worker

if (process.env.NODE_ENV === 'production') {
  (() => {
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('/service-worker.js');
    }
  })();
  require('offline-plugin/runtime').install();
}

Styled-Component

import styled from 'styled-components';

const Card = styled.div`
  height: 400px;
  width: 300px;
  background-color: #fff;
  cursor: pointer;
`;

export default Card;

FlowTypes

/** @flow */
import type { Post } from './Data';

// POSTS
type FetchPostAction = {
  type: 'FETCH_SINGLE_POST',
  post: Post
}

type FetchAllPostsAction = {
  type: 'FETCH_ALL_POSTS',
  posts: Array<Post>
}

type FetchSinglePostErrorAction = {
  type: 'FETCH_SINGLE_POST_ERROR'
}

type SelectPostAction = {
  type: 'SELECTED_POST',
  id: string
}

export type Action =
  | FetchPostAction
  | FetchAllPostsAction
  | FetchSinglePostErrorAction
  | SelectPostAction

https://thinkful-workshop-webpack2-node-react.now.sh/

Want to play with ?

1. Clone the repos
2. npm i or yarn
3. npm run dev:s or yarn dev:s for start the server
4. npm run dev:c or yarn dev:c for start the client
5. localhost:9000 gonna open in your browser by webpack

FlowTypes

When install new packages just run flow-typed install

Deploy

For deploy I'm using Now from Zeit Who provided free hosting with HTTP2. I'm using a variables for the mongodb hosting. For set yours just

now secret add mongodb <urlinkhere>

Inside the packages.json I have alias this is for change the name from now.

Just run yarn deploy or npm run deploy

TODO

• [x] Change webpack code splitting System.import for import()
• [x] Add service worker
• [x] Add offline caching
• [ ] Get smaller bundle