Signed-off-by: Anca Iordache <anca.iordache@docker.com>pull/2/head
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 @@ |
||||
db-btf5q |
@ -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,2 @@ |
||||
node_modules |
||||
.happypack |
@ -0,0 +1 @@ |
||||
webpack/* |
@ -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 @@ |
||||
# Sample App |
@ -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…
Reference in new issue