DEV Community

Cover image for Hot reloaded Apollo server: Dockerization
VojtechP
VojtechP

Posted on

Hot reloaded Apollo server: Dockerization

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.

apollo-server-hot-reload-example

Example repo for hot reaload Apollo server in docker container used for dev.to posts part1 and part 2

Top comments (1)

Collapse
 
peppermint_juli profile image
Juliana Jaime 🎃

Works great, thanks for sharing!