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.
Top comments (3)
Exactly what I was looking for, thanks for the guide!
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?
The build is supposed to be used during a docker image building. So it must be separated.