Photo by Dimitry Kooijmans on Unsplash
This is my second post and the second part of a hot reload demonstration.
Production docker image
dockerfile
FROM node:12-alpine
WORKDIR /app
RUN npm install -g webpack webpack-cli
COPY ./package*.json ./
RUN npm install
COPY ./src ./src
COPY ./webpack.*.js ./
RUN npm run build
EXPOSE 8080
CMD [ "npm", "start" ]
Build image:docker build . -t apollo-server-hot-reload-example
and run container: docker run -p 8080:8080 apollo-server-hot-reload-example
Development webpack config
For running a server I will need a webpack plugin start-server-webpack-plugin. But because there is a bug in the latest version I will use version 3.0.0-rc3.
Restart on every rebuild
#30
Not so sure if anyone else has experienced this, BUT!... I've noticed that the server is only being restarted on every second rebuild.
Rebuilds are successful every time, however in order for me to get the server restarted I have to make a second change.
npm i -D start-server-webpack-plugin@3.0.0-rc3
webpack.development.js
const path = require("path");
const cleanWebpackPlugin = require("clean-webpack-plugin");
const merge = require("webpack-merge");
const nodeExternals = require("webpack-node-externals");
const StartServerPlugin = require("start-server-webpack-plugin");
const webpack = require("webpack");
const common = require("./webpack.common");
module.exports = merge.smart(common, {
devtool: "inline-source-map",
entry: ["webpack/hot/poll?1000", path.join(__dirname, "src/index.js")],
externals: [
nodeExternals({
whitelist: ["webpack/hot/poll?1000"]
})
],
mode: "development",
plugins: [
new StartServerPlugin({
name: "server.js",
nodeArgs: ["--inspect"],
signal: true
}),
new cleanWebpackPlugin.CleanWebpackPlugin(),
new webpack.HotModuleReplacementPlugin()
],
watch: true
});
Next, I will add a script to build dev version: "build:dev": "webpack --config webpack.development.js"
Development docker image
The difference between production and development docker image is in command. The development image needs volume to share the source with host machine.
dev/dockerfile
FROM apollo-server-hot-reload-example
# dev volume
VOLUME /app
CMD [ "npm", "run", "build:dev" ]
Because there are changes that influence production image I must rebuild it again.
docker build . -t apollo-server-hot-reload-example
And finally, I can build development image.
docker build dev -t apollo-server-hot-reload-example-dev
Run development docker container
After I run this command:
docker run -p 8080:8080 -v *absolute_path_to_project*:/app apollo-server-hot-reload-example-dev
where *absolute_path_to_project* is the absolute path to project request return same string like in production mode. After code change, webpack rebuilds code and restarts server.
Top comments (1)
Works great, thanks for sharing!