Development inside Docker

README.md

@@ -33,6 +33,10 @@ demo-app
 ├── .eslintignore
 ├── .prettierrc
 ├── .prettierignore
+├── docker
+│   ├── dev.js
+│   ├── docker-compose.yml
+│   └── Dockerfile.dev
 ├── public
 │   ├── favicon.ico
 │   ├── index.html
@@ -64,6 +68,10 @@ demo-app
 ├── .eslintignore
 ├── .prettierrc
 ├── .prettierignore
+├── docker
+│   ├── dev.js
+│   ├── docker-compose.yml
+│   └── Dockerfile.dev
 ├── public
 │   ├── favicon.ico
 │   ├── index.html
@@ -100,6 +108,12 @@ before running this first run `npm run build`.
 Start the development server on default port `8080`.<br>
 Starts server in hot mode but doesn't preserve state of component if any while reloading.
 
+### `npm run docker:dev`
+
+Start the development server inside the docker container.<br>
+Maps machines port `8080` to `docker` container port `8080`.<br>
+Helpful in case you want to do development inside container keeping the environment same for everyone, removes the need for changing node version for different applications.
+
 ### `npm run dev:hot`
 
 Start the development server on default port `8080`.<br>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-react-webpack",
-  "version": "0.0.9",
+  "version": "0.1.0",
   "description": "create-react-webpack ",
   "main": "scripts/create.js",
   "bin": {

template/README.md

@@ -28,6 +28,12 @@ Starts server in hot mode but doesn't preserve state of component if any while r
 Start the development server on default port `8080`.<br>
 Starts server in hot mode preserves state of component also if any while applying hot load patch.
 
+### `npm run docker:dev`
+
+Start the development server inside the docker container.<br>
+Maps machines port `8080` to `docker` container port `8080`.<br>
+Helpful in case you want to do development inside container keeping the environment same for everyone, removes the need for changing node version for different applications.
+
 ### `npm test`
 
 Launches Test Runner in the intreactive manner.

template/docker/Dockerfile.dev

@@ -0,0 +1,16 @@
+#base image
+FROM node:alpine
+
+#working directory
+WORKDIR /app
+
+#copy package
+COPY package.json .
+
+#install dependencies
+RUN npm install
+
+#copy rest of source
+COPY . .
+
+CMD ["npm","run","dev:hot"]

template/docker/dev.js

@@ -0,0 +1,10 @@
+const Child_Process = require("child_process");
+
+var args = process.argv.splice(2);
+
+Child_Process.execSync(
+  `docker-compose --file docker/docker-compose.yml up  ${args}`,
+  {
+    stdio: "inherit"
+  }
+);

template/docker/docker-compose.yml

@@ -0,0 +1,11 @@
+version: "3"
+services:
+  web:
+    build:
+      context: ../
+      dockerfile: ./docker/Dockerfile.dev
+    ports:
+      - "8080:8080"
+    volumes:
+      - /app/node_modules
+      - ../:/app

template/package.json

@@ -7,6 +7,7 @@
     "build": "webpack --config webpack.config.prod.js",
     "dev": "webpack-dev-server --config webpack.config.dev.js",
     "dev:hot": "npm run dev -- --hot",
+    "docker:dev": "node docker/dev.js",
     "test": "jest",
     "format": "pretty-quick",
     "lint": "eslint ./"

template/webpack.config.dev.js

@@ -8,6 +8,7 @@ module.exports = merge(baseConfig, {
   devServer: {
     contentBase: path.join(__dirname, "public"),
     compress: true,
+    host: "0.0.0.0",
     open: true,
     port: process.env.PORT,
     publicPath: "/"