The project is build with React + webpack4 + babel7 from 0 to 1
The Heroku Demo is here
github commit (master) => travis => mocha => build docker images => deploy to docker hub => deploy images to heroku(Registry container)
| Name | Version | Description |
|---|---|---|
| Travis | 1.8.10 | Continuous Integration(CI) tool |
| Docker | 19.03.5 | Computer program that performs operating-system-level virtualization, also known as "containerization". |
| Node.js | 10.15.3 | Server environment runs on various platforms (Windows, Linux, Unix, Mac OS X, etc.) |
| Heroku | 10.15.3 | Cloud platform that lets companies build, deliver, monitor and scale apps |
| Server-side-render | no version | (SSR) is a popular technique for rendering a normally client-side only single page app (SPA) on the server and then sending a fully rendered page to the client |
| Name | Version | Description |
|---|---|---|
| React | 16.12.0 | JavaScript library for building user interfaces |
| Mocha | 6.2.2 | JavaScript test framework running on Node. js and in the browser |
| Webpack | 4.41.2 | Static module bundler for modern JavaScript applications |
| Express | 4.17.1 | Node.js Web Framework |
| Styled-Component | 4.4.1 | pattern with Css In Js, to enhance CSS for styling React component systems |
Note
Webpack4 features: tree shaking(default), code splitting(--mode prod is default), dynamic import, router, dead code elimination, minify
Test code with mocha
npm run testWatch && build ./dist/server.js with dev env
npm run watch
build ./dist/server.js with prod env
npm run build
Run bundled server
npm run start
Git add && commit + (commit name)
npm run git --\"first commit\"
Git push to origin master
npm run postgit
Git pull
npm run pull
Build Docker images
npm run dockerBuild
Run docker images server (need build image first)
npm run dockerServer
Show All Images Id
npm run findImagesId
Delete 1 image + (image.id)
npm run deleteImages+id
Stop all Docker containers
npm run stopAllContainer
Delete all Docker containers
npm run deleteAllContainer
Listening ./dist/server.js modify
npm run production
(削除) React (削除ここまで)(later translate to Redux or Hook) // done
(削除) Webpack4 (削除ここまで)
(削除) Webpack Plugin (e.g. HMR) (削除ここまで)
(削除) Mocha (削除ここまで)
(削除) Travis (削除ここまで)
(削除) Docker (削除ここまで)
(削除) Docker hub (削除ここまで)
(削除) Heroku (削除ここまで)
(削除) Server side rendering (削除ここまで)
router update architecture(Flux or Redux)
use redux middleware(thunk or saga or observable)
html schema graphql webpack split prod dev env (webpack4 no need)
Docker+Travis+Heroku(Registry container) MarkDown grammar Webpack code splitting Webpack 2 env Node.js webserver Docker deploy Heroku DevOps-Docker-CircleCI-AWS Travis-after-success Mocha test with dockerfile Docker container run test-1 Docker container run test-2 Docker to Heroku(Registry container)
webpack4 react babel7 sample 0 to 1
[!TIP]
Dependencies on Heroku need update webpack && express npm run dockerize need open docker first git pull --rebase need storaged
[!CAUTION]
Entry can't use react e.g. class App extends component , can't read it.(resolved, use babel to transform es5) Update Heroku question: Filename need lowercase. (maybe resolve, test no yet)
redux observable bot webhook fiber typescript