DEV Community

loading...
Cover image for Hot reloaded Apollo server: Introduction

Hot reloaded Apollo server: Introduction

vojtechp profile image VojtechP ・2 min read

Photo by Dan Wayman on Unsplash

This is my first post on dev.to. 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

src/resolvers/index.js

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

src/typeDefs/index.js

import { gql } from "apollo-server";

export default gql`
  type Query {
    testMessage: String!
  }
`;

src/index.js

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 (module.hot) {
  module.hot.accept();
  module.hot.dispose(() => {
    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

webpack.common.js

const path = require("path");

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

webpack.production.js

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 = merge.smart(common, {
  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 {
  testMessage
}

Next part

In the next part, I will dockerize app.

apollo-server-hot-reload-example

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

Discussion (2)

pic
Editor guide
Collapse
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?

Collapse
vojtechp profile image
VojtechP Author

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