DEV Community

Cover image for Hot reloaded Apollo server: Introduction

Posted on

Hot reloaded Apollo server: Introduction

Photo by Dan Wayman on Unsplash

This is my first post on For some time I wanted to build Apollo server with hot reload. Many attempts failed, but I recently found webpack plugin that helped me. In this short series, I will demonstrate that.

Init and clear package.json

npm init

After that, I cleaned up package.json and added .gitignore.

Install dependencies and create demo app

npm i apollo-server graphql


export default {
  Query: {
    testMessage() {
      return "Hello World!";


import { gql } from "apollo-server";

export default gql`
  type Query {
    testMessage: String!


import { ApolloServer } from "apollo-server";

import resolvers from "./resolvers";
import typeDefs from "./typeDefs";

const server = new ApolloServer({ resolvers, typeDefs });

server.listen(process.env.GRAPHQL_PORT || 8080).then(({ url }) => {
  console.log(`Server ready at ${url}`);

if ( {; => {
    console.log("Module disposed");

Production webpack config

Install dev dependencies:
npm i -D npm i -D webpack webpack-cli clean-webpack-plugin webpack-merge webpack-node-externals


const path = require("path");

module.exports = {
  output: {
    filename: "server.js",
    path: path.resolve(__dirname, "dist")
  resolve: {
    extensions: [".js"]
  target: "node"


const path = require("path");

const cleanWebpackPlugin = require("clean-webpack-plugin");
const merge = require("webpack-merge");
const nodeExternals = require("webpack-node-externals");

const common = require("./webpack.common");

module.exports =, {
  devtool: "source-map",
  entry: [path.join(__dirname, "src/index.js")],
  externals: [nodeExternals({})],
  mode: "production",
  plugins: [new cleanWebpackPlugin.CleanWebpackPlugin()]

And finally add this script to package.json

"build": "webpack --config webpack.production.js",
"start": "node dist/server.js"

Test run

Next step is build app:
npm run build
and test run:
npm start

After that, you can open your browser at http://localhost:8080/ and try out this query:

query {

Next part

In the next part, I will dockerize app.


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

Top comments (3)

peppermint_juli profile image
Juliana Jaime 🎃

Exactly what I was looking for, thanks for the guide!

adriandarian profile image
Adrian Darian

A simple change that will decrease the amount of scripts to run post setup, would be to change the build script to a prestart which will execute when you run the start script and build your app for production. Thoughts?

vojtechp profile image

The build is supposed to be used during a docker image building. So it must be separated.