add react-express-mysql application sample

Signed-off-by: Anca Iordache <anca.iordache@docker.com>
master
Anca Iordache 5 years ago
parent 0d06c37791
commit 43f21f2d8d

@ -0,0 +1,36 @@
# if you're doing anything beyond your local machine, please pin this to a specific version at https://hub.docker.com/_/node/
FROM node:10
RUN mkdir -p /opt/app
# set our node environment, either development or production
# defaults to production, compose overrides this to development on build and run
ARG NODE_ENV=production
ENV NODE_ENV $NODE_ENV
# default to port 80 for node, and 9229 and 9230 (tests) for debug
ARG PORT=80
ENV PORT $PORT
EXPOSE $PORT 9229 9230
# you'll likely want the latest npm, reguardless of node version, for speed and fixes
RUN npm i npm@latest -g
# install dependencies first, in a different location for easier app bind mounting for local development
WORKDIR /opt
COPY package.json package-lock.json* ./
RUN npm install && npm cache clean --force
ENV PATH /opt/node_modules/.bin:$PATH
# check every 30s to ensure this service returns HTTP 200
HEALTHCHECK --interval=30s CMD node healthcheck.js
# copy in our source code last, as it changes the most
WORKDIR /opt/app
COPY . /opt/app
# if you want to use npm start instead, then use `docker run --init in production`
# so that signals are passed properly. Note the code in index.js is needed to catch Docker signals
# using node here is still more graceful stopping then npm with --init afaik
# I still can't come up with a good production way to run with npm and graceful shutdown
CMD [ "node", "index.js" ]

@ -0,0 +1,21 @@
MIT License
Copyright (c) 2015-2017 Bret Fisher
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

@ -0,0 +1,86 @@
## Node + Docker Hello World, for Showing Good Defaults for Using Node.js in Docker
> This tries to be a "good defaults" example of using Node.js in Docker for local development and shipping to production with all the bells, whistles, and best practices. Issues/PR welcome.
### Local Development Features
- **Dev as close to prod as you can**. docker-compose builds a local development image that is just like production image except for the below dev-only features needed in image. Goal is to have dev env be as close to test and prod as possible while still giving all the nice tools to make you a happy dev.
- **Prevent needing node/npm on host**. Installs `node_modules` outside app root in container so local development won't run into a problem of bind-mounting over it with local source code. This means it will run `npm install` once on container build and you don't need to run npm on host or on each docker run. It will re-run on build if you change `package.json`.
- **One line startup**. Uses `docker-compose up` for single-line build and run of local development server.
- **Edit locally while code runs in container**. docker-compose uses proper bind-mounts of host source code into container so you can edit locally while running code in Linux container.
- **Use nodemon in container**. docker-compose uses nodemon for development for auto-restarting node in container when you change files on host.
- **Enable debug from host to container**. opens the inspect port 9229 for using host-based debugging like chrome tools or VS Code. Nodemon enables `--inspect` by default in docker-compose.
- **Provides VSCode debug configs and tasks for tests**. for Visual Studio Code fans, `.vscode` directory has the goods, thanks to @JPLemelin.
- **Small image and quick re-builds**. `COPY` in `package.json` and run `npm install` **before** `COPY` in your source code. This saves big on build time and keep container lean.
- **Bind-mount package.json**. This allows adding packages in realtime without rebuilding images. e.g. `dce node npm install --save <package name>`
### Production-minded Features
- **Use Docker build-in healthchecks**. uses Dockerfile `HEALTHCHECK` with `/healthz` route to help Docker know if your container is running properly (example always returns 200, but you get the idea).
- **Proper NODE_ENV use**. Defaults to `NODE_ENV=production` in Dockerfile and overrides to `development` in docker-compose for local dev.
- **Don't add dev dependencies into production image**. Proper `NODE_ENV` use means dev dependencies won't be installed in container by default. Using docker-compose will build with them by default.
- **Enables proper SIGTERM/SIGINT for graceful exit**. Defaults to `node index.js` rather then npm for allowing graceful shutdown of node. npm doesn't pass SIGTERM/SIGINT properly (you can't ctrl-c when running `docker run` in foreground). To get `node index.js` to graceful exit, extra signal-catching code is needed. The `Dockerfile` and `index.js` document the options and links to known issues.
- **Use docker-stack.yml example for Docker Swarm deployments**.
### Assumptions
- You have Docker and Docker-Compose installed (Docker for Mac, Docker for Windows, get.docker.com and manual Compose installed for Linux).
- You want to use Docker for local development (i.e. never need to install node/npm on host) and have dev and prod Docker images be as close as possible.
- You don't want to loose fidelity in your dev workflow. You want a easy environment setup, using local editors, node debug/inspect, local code repo, while node server runs in a container.
- You use `docker-compose` for local development only (docker-compose was never intended to be a production deployment tool anyway).
- The `docker-compose.yml` is not meant for `docker stack deploy` in Docker Swarm, it's meant for happy local development. Use `docker-stack.yml` for Swarm.
### Getting Started
If this was your Node.js app, to start local development you would:
- Running `docker-compose up` is all you need. It will:
- Build custom local image enabled for development (nodemon, `NODE_ENV=development`).
- Start container from that image with ports 80 and 9229 open (on localhost).
- Starts with `nodemon` to restart node on file change in host pwd.
- Mounts the pwd to the app dir in container.
- If you need other services like databases, just add to compose file and they'll be added to the custom Docker network for this app on `up`.
- Compose should detect if you need to rebuild due to changed package.json or Dockerfile, but `docker-compose build` works for manually building.
- Be sure to use `docker-compose down` to cleanup after your done dev'ing.
If you wanted to add a package while docker-compose was running your app:
- `docker-compose exec node npm install --save <package name>`
- This installs it inside the running container.
- Nodemon will detect the change and restart.
- `--save` will add it to the package.json for next `docker-compose build`
To execute the unit-tests, you would:
- Execute `docker-compose exec node npm test`, It will:
- Run a process `npm test` in the container node.
- You can use the *vscode* to debug unit-tests with config `Docker Test (Attach 9230 --inspect)`, It will:
- Start a debugging process in the container and wait-for-debugger, this is done by *vscode tasks*
- It will also kill previous debugging process if existing.
### Other Resources
- https://blog.hasura.io/an-exhaustive-guide-to-writing-dockerfiles-for-node-js-web-apps-bbee6bd2f3c4
MIT License,
Copyright (c) 2015-2018 Bret Fisher
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

@ -0,0 +1,21 @@
var http = require("http");
var options = {
timeout: 2000,
host: 'localhost',
port: process.env.PORT || 8080,
path: '/healthz' // must be the same as HEALTHCHECK in Dockerfile
};
var request = http.request(options, (res) => {
console.info('STATUS: ' + res.statusCode);
process.exitCode = (res.statusCode === 200) ? 0 : 1;
process.exit();
});
request.on('error', function(err) {
console.error('ERROR', err);
process.exit(1);
});
request.end();

@ -0,0 +1,78 @@
// simple node web server that displays hello world
// optimized for Docker image
var express = require('express');
// this example uses express web framework so we know what longer build times
// do and how Dockerfile layer ordering matters. If you mess up Dockerfile ordering
// you'll see long build times on every code change + build. If done correctly,
// code changes should be only a few seconds to build locally due to build cache.
var morgan = require('morgan');
// morgan provides easy logging for express, and by default it logs to stdout
// which is a best practice in Docker. Friends don't let friends code their apps to
// do app logging to files in containers.
// Constants
const PORT = process.env.PORT || 8080;
// if you're not using docker-compose for local development, this will default to 8080
// to prevent non-root permission problems with 80. Dockerfile is set to make this 80
// because containers don't have that issue :)
// Appi
var app = express();
app.use(morgan('common'));
app.get('/', function (req, res) {
res.send('Hello Docker World\n');
});
app.get('/healthz', function (req, res) {
// do app logic here to determine if app is truly healthy
// you should return 200 if healthy, and anything else will fail
// if you want, you should be able to restrict this to localhost (include ipv4 and ipv6)
res.send('I am happy and healthy\n');
});
var server = app.listen(PORT, function () {
console.log('Webserver is ready');
});
//
// need this in docker container to properly exit since node doesn't handle SIGINT/SIGTERM
// this also won't work on using npm start since:
// https://github.com/npm/npm/issues/4603
// https://github.com/npm/npm/pull/10868
// https://github.com/RisingStack/kubernetes-graceful-shutdown-example/blob/master/src/index.js
// if you want to use npm then start with `docker run --init` to help, but I still don't think it's
// a graceful shutdown of node process
//
// quit on ctrl-c when running docker in terminal
process.on('SIGINT', function onSigint () {
console.info('Got SIGINT (aka ctrl-c in docker). Graceful shutdown ', new Date().toISOString());
shutdown();
});
// quit properly on docker stop
process.on('SIGTERM', function onSigterm () {
console.info('Got SIGTERM (docker container stop). Graceful shutdown ', new Date().toISOString());
shutdown();
})
// shut down server
function shutdown() {
server.close(function onServerClosed (err) {
if (err) {
console.error(err);
process.exitCode = 1;
}
process.exit();
})
}
//
// need above in docker container to properly exit
//
module.exports = app;

File diff suppressed because it is too large Load Diff

@ -0,0 +1,29 @@
{
"name": "node-docker-good-defaults",
"private": true,
"version": "2.0.0",
"description": "Node.js Hello world app using docker features for easy docker-compose local dev and solid production defaults",
"author": "Bret Fisher <bret@bretfisher.com>",
"main": "index.js",
"scripts": {
"start": "node index.js",
"dev-docker": "../node_modules/nodemon/bin/nodemon.js --debug=5858",
"dev-host": "nodemon --debug=5858",
"start-watch": "nodemon index.js --inspect=0.0.0.0:9229",
"start-wait-debuger": "nodemon index.js --inspect-brk=0.0.0.0:9229",
"test": "cross-env NODE_ENV=test PORT=8081 mocha --timeout 10000 --exit --inspect=0.0.0.0:9230",
"test-watch": "nodemon --exec \"npm test\"",
"test-wait-debuger": "cross-env NODE_ENV=test PORT=8081 mocha --no-timeouts --exit --inspect-brk=0.0.0.0:9230"
},
"dependencies": {
"express": "^4.16.3",
"morgan": "^1.8.1"
},
"devDependencies": {
"chai": "^4.1.2",
"chai-http": "^4.0.0",
"cross-env": "^5.1.4",
"mocha": "^5.0.5",
"nodemon": "^1.17.5"
}
}

@ -0,0 +1,32 @@
const app = require('../index');
const chai = require('chai');
const chaiHttp = require('chai-http');
chai.use(chaiHttp);
chai.should();
describe('API /healthz', () => {
it('it should return 200', (done) => {
chai.request(app)
.get('/healthz')
.end((err, res) => {
res.should.have.status(200);
done();
});
});
});
describe('API /', () => {
it('it should return Welcome message', (done) => {
chai.request(app)
.get('/')
.end((err, res) => {
res.should.have.status(200);
res.should.to.be.html;
res.text.should.be.equal("Hello Docker World\n");
done();
});
});
});

@ -0,0 +1,46 @@
version: "3.7"
services:
backend:
build:
args:
- NODE_ENV=development
context: backend
command: ../node_modules/.bin/nodemon --inspect=0.0.0.0:9229
environment:
- NODE_ENV=development
ports:
- 8080:80
- 9229:9229
- 9230:9230
volumes:
- ./backend:/opt/app:delegated
- ./backend/package.json:/opt/package.json
- ./backend/package-lock.json:/opt/package-lock.json
- back-notused:/opt/app/node_modules
depends_on:
- db
db:
environment:
MYSQL_DATABASE: example
MYSQL_ROOT_PASSWORD_FILE: /run/secrets/db-password
image: mysql:5.7
restart: always
secrets:
- db-password
volumes:
- db-data:/var/lib/mysql
frontend:
build: frontend
ports:
- 80:9000
volumes:
- ./frontend:/project
- /project/node_modules
depends_on:
- backend
volumes:
back-notused: {}
db-data: {}
secrets:
db-password:
file: db/password.txt

@ -0,0 +1,23 @@
{
"presets": [
[
"env",
{
"loose": true,
"modules": false
}
],
"react"
],
"plugins": [
"react-hot-loader/babel",
"transform-runtime",
"transform-object-rest-spread",
"lodash"
],
"env": {
"test": {
"plugins": ["transform-es2015-modules-commonjs"]
}
}
}

@ -0,0 +1,5 @@
> 1%
last 3 versions
Firefox ESR
Opera 12.1
IE >= 10

@ -0,0 +1,36 @@
{
"extends": [
"standard",
"standard-react",
"plugin:jsx-a11y/recommended"
],
"env": {
"es6" : true,
"browser" : true,
"node" : true,
"jest" : true
},
"plugins": [
"react",
"import"
],
"parser": "babel-eslint",
"parserOptions": {
"sourceType": "module"
},
"rules" : {
"no-eq-null" : 0,
"quotes": 0,
"eol-last": 0,
"semi": [2, "always"],
"key-spacing": [1, {"beforeColon": true, "afterColon": true, "mode": "minimum", "align": "colon"}],
"padded-blocks": [1, { "switches": "never", "classes" : "always"}],
"space-before-function-paren": ["error", "never"],
"indent": [1, 4]
},
"globals" : {
"__DEV__" : false,
"__filename" : false,
"__dirname" : false
}
}

@ -0,0 +1,4 @@
node_modules
.happypack
build/*
dist/*

@ -0,0 +1,9 @@
FROM node:10
RUN mkdir /project
WORKDIR /project
COPY . .
RUN yarn install
CMD ["yarn", "run", "start"]

@ -0,0 +1,12 @@
FROM node:10 as build
RUN mkdir /project
WORKDIR /project
COPY . .
RUN yarn install
RUN yarn run package
FROM nginx:1.13-alpine
COPY config/nginx.conf /etc/nginx/conf.d/default.conf
COPY --from=build /project/dist /usr/share/nginx/html

@ -0,0 +1,9 @@
server {
listen 9000;
server_name localhost;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
}
}

@ -0,0 +1,15 @@
module.exports = {
"moduleFileExtensions": [
"js",
"jsx",
"json"
],
"moduleDirectories": [
"node_modules",
"src"
],
"moduleNameMapper": {
"^.+\\.(css|scss)$": "<rootDir>/test/mocks/styleMock.js",
"^.+\\.(jpg|jpeg|gif|png|svg|eot|ttf|woff|woff2|)$": "<rootDir>/test/mocks/imageMock.js"
}
};

@ -0,0 +1,72 @@
{
"name": "react-app",
"version": "0.1.0",
"private": true,
"scripts": {
"clean": "rimraf ./dist/* && rimraf ./build/*",
"start": "cross-env NODE_ENV=development node webpack/dev-server.js",
"build": "cross-env NODE_ENV=development webpack --config webpack.config.js",
"package": "cross-env NODE_ENV=production webpack --config webpack.config.js",
"test": "cross-env NODE_ENV=test jest",
"lint:js": "eslint ./src"
},
"dependencies": {
"express": "4.16.3",
"axios": "0.18.0",
"classnames": "2.2.5",
"lodash": "4.17.5",
"moment": "2.20.0",
"history": "4.7.2",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-redux": "^5.1.1",
"react-router-dom": "^4.3.1",
"react-router-redux": "5.0.0-alpha.8",
"redux": "^3.7.2",
"redux-actions": "^2.6.5",
"redux-saga": "0.16.0",
"reselect": "3.0.1",
"query-string": "6.0.0"
},
"devDependencies": {
"rimraf": "2.6.1",
"cross-env": "5.1.4",
"webpack": "4.5.0",
"webpack-cli": "3.3.1",
"webpack-dev-server": "3.1.3",
"html-webpack-plugin": "3.2.0",
"mini-css-extract-plugin": "0.4.0",
"react-hot-loader": "3.1.3",
"node-sass": "^4.11.0",
"babel-core": "6.26.0",
"babel-runtime": "6.26.0",
"babel-loader": "7.1.4",
"babel-preset-env": "^1.7.0",
"babel-eslint": "8.2.2",
"babel-preset-react": "6.24.1",
"babel-plugin-transform-runtime": "6.23.0",
"babel-plugin-transform-object-rest-spread": "6.26.0",
"babel-plugin-lodash": "3.3.2",
"css-loader": "^2.1.1",
"sass-loader": "6.0.7",
"style-loader": "0.20.3",
"file-loader": "1.1.11",
"postcss-loader": "2.1.3",
"autoprefixer": "8.2.0",
"cssnano": "4.1.10",
"identity-obj-proxy": "3.0.0",
"jest": "^20.0.4",
"jest-cli": "^20.0.4",
"babel-jest": "20.0.3",
"eslint": "4.19.1",
"eslint-config-standard": "^10.2.1",
"eslint-config-standard-react": "^5.0.0",
"eslint-loader": "^1.9.0",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-node": "^5.1.1",
"eslint-plugin-promise": "^3.3.0",
"eslint-plugin-react": "7.1.0",
"eslint-plugin-jsx-a11y": "6.0.2",
"eslint-plugin-standard": "3.0.1"
}
}

@ -0,0 +1,22 @@
import * as React from "react"
import { Switch } from "react-router-dom"
import { renderRoutes } from "./routes"
import { ApplicationContainer } from "app/components/layout"
require("./core/styles/reset.css");
require("./core/styles/normalize.scss");
//require("./core/styles/main.scss");
export class App extends React.Component {
render() {
return (
<ApplicationContainer>
<Switch>
{renderRoutes()}
</Switch>
</ApplicationContainer>
)
}
}

@ -0,0 +1,15 @@
import * as React from "react";
export default class ApplicationContainer extends React.Component {
render() {
return (
<div className="main-container">
<div className="main-content">
{this.props.children}
</div>
</div>
);
}
}

@ -0,0 +1,5 @@
import ApplicationContainer from "./ApplicationContainer";
export {
ApplicationContainer,
}

@ -0,0 +1,396 @@
/*! normalize.css v2.1.0 | MIT License | git.io/normalize */
// ==========================================================================
// HTML5 display definitions
// ==========================================================================
//
// Correct `block` display not defined in IE 8/9.
//
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
display: block;
}
//
// Correct `inline-block` display not defined in IE 8/9.
//
audio,
canvas,
video {
display: inline-block;
}
//
// Prevent modern browsers from displaying `audio` without controls.
// Remove excess height in iOS 5 devices.
//
audio:not([controls]) {
display: none;
height: 0;
}
//
// Address styling not present in IE 8/9.
//
[hidden] {
display: none;
}
// ==========================================================================
// Base
// ==========================================================================
//
// 1. Set default font family to sans-serif.
// 2. Prevent iOS text size adjust after orientation change, without disabling
// user zoom.
//
html {
font-family: sans-serif; // 1
-webkit-text-size-adjust: 100%; // 2
-ms-text-size-adjust: 100%; // 2
}
//
// Remove default margin.
//
body {
margin: 0;
}
// ==========================================================================
// Links
// ==========================================================================
//
// Address `outline` inconsistency between Chrome and other browsers.
//
a:focus {
outline: thin dotted;
}
//
// Improve readability when focused and also mouse hovered in all browsers.
//
a:active,
a:hover {
outline: 0;
}
// ==========================================================================
// Typography
// ==========================================================================
//
// Address variable `h1` font-size and margin within `section` and `article`
// contexts in Firefox 4+, Safari 5, and Chrome.
//
h1 {
font-size: 2em;
margin: 0.67em 0;
}
//
// Address styling not present in IE 8/9, Safari 5, and Chrome.
//
abbr[title] {
border-bottom: 1px dotted;
}
//
// Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
//
b,
strong {
font-weight: bold;
}
//
// Address styling not present in Safari 5 and Chrome.
//
dfn {
font-style: italic;
}
//
// Address differences between Firefox and other browsers.
//
hr {
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 0;
}
//
// Address styling not present in IE 8/9.
//
mark {
background: #ff0;
color: #000;
}
//
// Correct font family set oddly in Safari 5 and Chrome.
//
code,
kbd,
pre,
samp {
font-family: monospace, serif;
font-size: 1em;
}
//
// Improve readability of pre-formatted text in all browsers.
//
pre {
white-space: pre-wrap;
}
//
// Set consistent quote types.
//
q {
quotes: "\201C" "\201D" "\2018" "\2019";
}
//
// Address inconsistent and variable font size in all browsers.
//
small {
font-size: 80%;
}
//
// Prevent `sub` and `sup` affecting `line-height` in all browsers.
//
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
// ==========================================================================
// Embedded content
// ==========================================================================
//
// Remove border when inside `a` element in IE 8/9.
//
img {
border: 0;
}
//
// Correct overflow displayed oddly in IE 9.
//
svg:not(:root) {
overflow: hidden;
}
// ==========================================================================
// Figures
// ==========================================================================
//
// Address margin not present in IE 8/9 and Safari 5.
//
figure {
margin: 0;
}
// ==========================================================================
// Forms
// ==========================================================================
//
// Define consistent border, margin, and padding.
//
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
//
// 1. Correct `color` not being inherited in IE 8/9.
// 2. Remove padding so people aren't caught out if they zero out fieldsets.
//
legend {
border: 0; // 1
padding: 0; // 2
}
//
// 1. Correct font family not being inherited in all browsers.
// 2. Correct font size not being inherited in all browsers.
// 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
//
button,
input,
select,
textarea {
font-family: inherit; // 1
font-size: 100%; // 2
margin: 0; // 3
}
//
// Address Firefox 4+ setting `line-height` on `input` using `!important` in
// the UA stylesheet.
//
button,
input {
line-height: normal;
}
//
// Address inconsistent `text-transform` inheritance for `button` and `select`.
// All other form control elements do not inherit `text-transform` values.
// Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
// Correct `select` style inheritance in Firefox 4+ and Opera.
//
button,
select {
text-transform: none;
}
//
// 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
// and `video` controls.
// 2. Correct inability to style clickable `input` types in iOS.
// 3. Improve usability and consistency of cursor style between image-type
// `input` and others.
//
button,
html input[type="button"], // 1
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button; // 2
cursor: pointer; // 3
}
//
// Re-set default cursor for disabled elements.
//
button[disabled],
html input[disabled] {
cursor: default;
}
//
// 1. Address box sizing set to `content-box` in IE 8/9.
// 2. Remove excess padding in IE 8/9.
//
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box; // 1
padding: 0; // 2
}
//
// 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
// 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
// (include `-moz` to future-proof).
//
input[type="search"] {
-webkit-appearance: textfield; // 1
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box; // 2
box-sizing: content-box;
}
//
// Remove inner padding and search cancel button in Safari 5 and Chrome
// on OS X.
//
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
//
// Remove inner padding and border in Firefox 4+.
//
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
//
// 1. Remove default vertical scrollbar in IE 8/9.
// 2. Improve readability and alignment in all browsers.
//
textarea {
overflow: auto; // 1
vertical-align: top; // 2
}
// ==========================================================================
// Tables
// ==========================================================================
//
// Remove most spacing between table cells.
//
table {
border-collapse: collapse;
border-spacing: 0;
}

@ -0,0 +1,48 @@
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

@ -0,0 +1,39 @@
import * as React from "react";
import { render, unmountComponentAtNode } from "react-dom"
import { AppContainer } from "react-hot-loader"
import { Provider } from 'react-redux';
import { ConnectedRouter } from "react-router-redux"
import { createBrowserHistory } from "history"
import { configureStore, sagaMiddleware } from "./store"
import { runApplicationSagas } from "./sagas"
const history = createBrowserHistory();
const store = configureStore(history);
const getAppContainer = () => document.getElementById('app-container');
const renderApp = () => {
const App = require('./app').App;
render(
<AppContainer>
<Provider store={store}>
<ConnectedRouter history={history}>
<App/>
</ConnectedRouter>
</Provider>
</AppContainer>
, getAppContainer());
};
if (__DEV__ && module.hot) {
const hotReloadApp = () => renderApp();
module.hot.accept('./app', () => {
// Preventing the hot reloading error from react-router
unmountComponentAtNode(getAppContainer());
hotReloadApp();
})
}
// runApplicationSagas(sagaMiddleware);
renderApp();

@ -0,0 +1,26 @@
import * as React from "react";
import { connect } from "react-redux";
require("./home.scss");
const mapStateToProps = (state, props) => {
return {};
};
const mapDispatchToProps = (dispatch) => {
return {};
};
class HomePage extends React.Component {
render() {
return (
<div className="home-page page">
<h1>My New React App</h1>
</div>
)
}
}
export default connect(mapStateToProps, mapDispatchToProps)(HomePage)

@ -0,0 +1,6 @@
.home-page {
background-color: blue;
color: red;
}

@ -0,0 +1,7 @@
import * as React from "react";
import { Route } from "react-router-dom";
import HomePage from './HomePage';
const route = <Route path="/" exact key="home" component={HomePage}/>;
export default route;

@ -0,0 +1,10 @@
import { combineReducers } from 'redux';
import { routerReducer } from 'react-router-redux';
import whalesReducer from 'app/redux/whales';
export const rootReducer = combineReducers({
router: routerReducer,
whales: whalesReducer,
});

@ -0,0 +1,4 @@
import { createAction } from 'redux-actions';
import * as ActionTypes from "./action-types";
export const fetchWhales = createAction(ActionTypes.FETCH_WHALES);

@ -0,0 +1,4 @@
const prefix = 'WHALES';
export const FETCH_WHALES = `${prefix}/FETCH`;

@ -0,0 +1,3 @@
import Reducer from './reducer';
export default Reducer;

@ -0,0 +1,16 @@
import * as ActionTypes from "./action-types";
import { handleActions } from "redux-actions";
const defaultState = {
list: [],
};
const handleFetchWhales = (state, {payload}) => {
return state;
};
const reducer = handleActions({
[ActionTypes.FETCH_WHALES] : handleFetchWhales
}, defaultState);
export default reducer;

@ -0,0 +1,10 @@
import * as React from "react";
import Home from "./pages/home"
const routes = [
Home,
];
export const renderRoutes = () => {
return routes;
};

@ -0,0 +1,9 @@
//import { templatesSaga } from "./data/templates/sagas";
//import { appWizardSaga } from "./data/app-wizard/sagas";
const startupSagas = [
];
export const runApplicationSagas = (sagaMiddleware) => {
startupSagas.forEach(sagaMiddleware.run);
};

@ -0,0 +1,37 @@
import { routerMiddleware } from 'react-router-redux';
import { createStore, applyMiddleware, compose } from 'redux';
import createSagaMiddleware from "redux-saga";
import { rootReducer } from "./reducers";
export const sagaMiddleware = createSagaMiddleware();
export const configureStore = (history, initialState = {}) => {
const middlewares = [
routerMiddleware(history),
sagaMiddleware
];
const enhancers = [
applyMiddleware(...middlewares),
];
if(__DEV__) {
const devToolEnhancer = () => {
return typeof window === 'object' && typeof window.devToolsExtension !== 'undefined'
? window.devToolsExtension() : f => f;
};
enhancers.push(devToolEnhancer())
}
const store = createStore(rootReducer, initialState, compose(...enhancers));
if(__DEV__ && module.hot) {
module.hot.accept('./reducers', () => {
const nextReducer = require('./reducers').default;
store.replaceReducer(nextReducer);
})
}
return store;
};

@ -0,0 +1,10 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sample application</title>
</head>
<body>
<div id="app-container"></div>
</body>
</html>

@ -0,0 +1,3 @@
// Return an empty string or other mock path to emulate the url that
// Webpack provides via the file-loader
module.exports = 'mocked-image.jpg';

@ -0,0 +1,2 @@
// Return a Proxy to emulate css modules (if you are using them)
module.exports = require('identity-obj-proxy');

@ -0,0 +1 @@
module.exports = require("./webpack/config-builder")(process.env.NODE_ENV || 'production');

@ -0,0 +1,231 @@
'use strict';
const path = require('path'),
webpack = require('webpack'),
HtmlWebpackPlugin = require('html-webpack-plugin'),
MiniCssExtractPlugin = require("mini-css-extract-plugin");
const PROJECT_ROOT = path.resolve(__dirname, "..");
module.exports = (env) => {
const isDev = env === 'development';
const isTest = env === 'test';
const isProd = !isDev && !isTest;
const getAppEntry = () => {
const appEntry = path.resolve(PROJECT_ROOT, "src/app/entry.jsx");
if(isDev) {
return [
'react-hot-loader/patch',
'webpack-dev-server/client?http://localhost:9000',
'webpack/hot/only-dev-server',
appEntry
]
} else {
return [appEntry]
}
};
const getPlugins = () => {
// common plugins
let plugins = [
// Global variables
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(env),
'__DEV__': isDev,
'__PROD__': isProd,
'__TEST__': isTest,
}),
// ignore moment locale files
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
// extract styles to css file
new MiniCssExtractPlugin({
filename: "[name].[contenthash].css",
chunkFilename: "[id].css",
disable: isDev,
}),
// makes index.html
new HtmlWebpackPlugin({
template: path.resolve(PROJECT_ROOT, 'src/index.ejs'),
})
];
// development plugins
if(isDev) {
plugins.push(
// Hot Reload (HMR)
new webpack.HotModuleReplacementPlugin(),
// Named Modules
new webpack.NamedModulesPlugin()
);
}
// production plugins
if(isProd) {
plugins.push(
new webpack.optimize.ModuleConcatenationPlugin()
);
}
return plugins;
};
return {
target: 'web',
mode: isProd ? "production" : "development",
context: PROJECT_ROOT,
entry: {
app: getAppEntry()
},
output: {
path: path.resolve(PROJECT_ROOT, isProd ? 'dist' : 'build'),
filename: isProd ? '[name].[chunkhash:8].js' : '[name].js',
publicPath: '/',
sourceMapFilename: '[file].map',
chunkFilename: isProd ? '[name].[chunkhash:8].js' : '[name].js',
pathinfo: isDev
},
devtool: isProd ? "hidden-sourcemap" : 'eval',
resolve: {
extensions: ['.js', '.jsx', '.ts', '.tsx'],
modules: ["node_modules", "src"],
alias: {}
},
module: {
rules: [
// JS / JSX files
{
test: /\.(js|jsx)$/,
exclude: /(node_modules)/,
use: [
{
loader: 'babel-loader',
options: {
cacheDirectory: true
}
}
]
},
// SASS files
{
test: /\.scss$/,
exclude: /(node_modules|bower_components)/,
use: [
isDev ? "style-loader" : MiniCssExtractPlugin.loader,
{
loader: "css-loader",
options: {
importLoaders: 2,
url: true,
import: false,
sourceMap: isDev
}
},
{
loader: "postcss-loader",
options: {
sourceMap: isDev,
plugins: isDev ? [] : [
require("autoprefixer"),
require("cssnano")({
safe: true,
zindex: false,
discardComments: {
removeAll: true
}
})
]
}
},
{
loader: "sass-loader",
options: {
sourceMap: isDev,
includePaths: [".", path.join(process.cwd(), "src/app/core/styles")]
}
}
]
},
// Plain CSS files
{
test: /\.css$/,
use: [
isDev ? "style-loader" : MiniCssExtractPlugin.loader,
{
loader: "css-loader",
options: {
importLoaders: 1,
url: true,
import: false,
sourceMap: isDev
}
},
{
loader: "postcss-loader",
options: {
sourceMap: isDev,
plugins: isDev ? [] : [
require("autoprefixer"),
require("cssnano")({
safe: true,
zindex: false,
discardComments: {
removeAll: true
}
})
]
}
}
]
},
// images loader
{
test: /\.(png|jpe?g|gif|svg|ico)(\?.*)?$/,
use: [
{
loader: 'file-loader',
options: {
name: "[name].[ext]",
outputPath: isProd ? "../images/" : "images/"
}
}
]
},
// font loader
{
test: /\.(woff|woff2|ttf|eot)(\?.*)?$/,
use: [
{
loader: 'file-loader',
options: {
name: "[name].[ext]",
publicPath: isProd ? "" : "/webpack/",
useRelativePath: isProd,
outputPath: isProd ? "../fonts/" : "fonts/"
}
}
]
}
]
},
plugins: getPlugins(),
node: {
__filename: true,
__dirname: true,
fs: 'empty',
vm: 'empty',
net: 'empty',
tls: 'empty',
}
};
};

@ -0,0 +1,38 @@
'use strict';
const webpack = require('webpack'),
WebpackDevServer = require('webpack-dev-server'),
makeConfig = require("./config-builder");
const startWebpackServer = () => {
const config = makeConfig('development');
const SERVER_PORT = 9000;
new WebpackDevServer(webpack(config), {
publicPath : config.output.publicPath,
hot : true,
historyApiFallback : true,
contentBase : "./build/",
watchOptions: { // no file events on D4W
aggregateTimeout: 300,
poll: 1000
},
proxy : {
"/api/*" : "http://127.0.0.1:8080" // proxy to backend
},
before : function(app) {
// manually configure app `app.use(...)`
}
}).listen(SERVER_PORT, '0.0.0.0', function (err, result) {
if (err) {
console.log(err);
}
console.log('Webpack dev server listening at localhost:' + SERVER_PORT);
});
};
startWebpackServer();
Loading…
Cancel
Save