Awesome Open Source
Awesome Open Source

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

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,541,393
Reactjs (70,913
Redux (13,040
Webpack (9,666
Boilerplate (5,604
Es6 (5,422
Eslint (3,581
Jest (3,452
Pwa (3,293
React Redux (2,219
Webpack2 (838
Decorators (777
Es7 (292
Flowtype (281
Related Projects