https://github.com/equimper/thinkful-workshop-react-redux-node-mongodb-webpack2
https://github.com/equimper/thinkful-workshop-react-redux-node-mongodb-webpack2
boilerplate decorators es6 es7 eslint flowtype javascript jest pwa react react-redux redux splitting thinkful webpack webpack2
Last synced: 6 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/equimper/thinkful-workshop-react-redux-node-mongodb-webpack2
- Owner: EQuimper
- Created: 2017-01-21T13:39:38.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-09-15T16:12:02.000Z (about 8 years ago)
- Last Synced: 2025-04-19T10:48:16.518Z (6 months ago)
- Topics: boilerplate, decorators, es6, es7, eslint, flowtype, javascript, jest, pwa, react, react-redux, redux, splitting, thinkful, webpack, webpack2
- Language: JavaScript
- Homepage: https://thinkful-workshop-webpack2-node-react.now.sh/
- Size: 3.55 MB
- Stars: 12
- Watchers: 3
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## 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
```js
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
```js
if (process.env.NODE_ENV === 'production') {
(() => {
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js');
}
})();
require('offline-plugin/runtime').install();
}
```
## Styled-Component
```js
import styled from 'styled-components';
const Card = styled.div`
height: 400px;
width: 300px;
background-color: #fff;
cursor: pointer;
`;
export default Card;
```
## FlowTypes
```js
/** @flow */
import type { Post } from './Data';
// POSTS
type FetchPostAction = {
type: 'FETCH_SINGLE_POST',
post: Post
}
type FetchAllPostsAction = {
type: 'FETCH_ALL_POSTS',
posts: Array
}
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](https://zeit.co/now) Who provided free hosting with HTTP2. I'm using a variables for the mongodb hosting. For set yours just
```
now secret add mongodb
```
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