chore: fix webpack dev server (#1169)

Author: acao

examples/graphiql-webpack/package.json

@@ -9,8 +9,6 @@
     "start": "webpack serve"
   },
   "dependencies": {
-    "express": "^4.17.1",
-    "express-graphql": "^0.9.0",
     "graphiql": "file:../../packages/graphiql",
     "graphql": "14.5.8",
     "react": "16.12.0"
@@ -19,14 +17,14 @@
     "@babel/plugin-proposal-class-properties": "7.7.4",
     "@babel/plugin-syntax-dynamic-import": "7.7.4",
     "@babel/preset-env": "7.7.7",
-    "@babel/preset-react": "7.7.0",
+    "@babel/preset-react": "7.7.4",
     "babel-loader": "^8.0.6",
     "css-loader": "3.4.0",
     "html-webpack-plugin": "^3.2.0",
-    "react-dom": "^16.11.0",
-    "style-loader": "^1.0.0",
-    "webpack": "^4.41.0",
-    "webpack-cli": "^3.3.9",
-    "webpack-dev-server": "^3.9.0"
+    "react-dom": "^16.12.0",
+    "style-loader": "^1.1.2",
+    "webpack": "4.41.4",
+    "webpack-cli": "^3.3.10",
+    "webpack-dev-server": "^3.10.1"
   }
 }

packages/graphiql/package.json

@@ -35,7 +35,7 @@
     "build-flow": "node ../../resources/buildFlow.js",
     "build-demo": "build-storybook -o ./storybook",
     "check": "flow check",
-    "dev": "cross-env NODE_ENV=development node test/dev-server.js",
+    "dev": "cross-env NODE_ENV=development webpack-dev-server --config resources/webpack.config.js",
     "cypress-open": "yarn e2e-server 'cypress open'",
     "e2e": "yarn e2e-server 'cypress run'",
     "e2e-server": "start-server-and-test 'cross-env PORT=8080 node test/e2e-server' 'http-get://localhost:8080/graphql?query={test { id }}'",
@@ -66,7 +66,7 @@
     "cssnano": "^4.1.10",
     "enzyme": "^3.10.0",
     "enzyme-adapter-react-16": "^1.15.1",
-    "express": "5.0.0-alpha.5",
+    "express": "4.17.1",
     "express-graphql": "0.9.0",
     "graphql": "14.5.8",
     "html-webpack-plugin": "^3.2.0",
@@ -86,7 +86,9 @@
     "serve": "^11.2.0",
     "start-server-and-test": "^1.10.6",
     "style-loader": "^1.0.0",
+    "webpack": "4.41.4",
     "webpack-bundle-analyzer": "^3.6.0",
-    "webpack-cli": "^3.3.10"
+    "webpack-cli": "^3.3.10",
+    "webpack-dev-server": "^3.10.1"
   }
 }

packages/graphiql/resources/webpack.config.js

@@ -34,6 +34,7 @@ const resultConfig = {
     // bypass simple localhost CORS restrictions by setting
     // these to 127.0.0.1 in /etc/hosts
     allowedHosts: ['local.example.com', 'graphiql.com'],
+    before: require('../test/beforeDevServer'),
   },
   node: {
     fs: 'empty',

packages/graphiql/test/beforeDevServer.js

@@ -0,0 +1,30 @@
+/**
+ *  Copyright (c) 2019 GraphQL Contributors.
+ *
+ *  This source code is licensed under the MIT license found in the
+ *  LICENSE file in the root directory of this source tree.
+ */
+
+const express = require('express');
+const path = require('path');
+const graphqlHTTP = require('express-graphql');
+const schema = require('./schema');
+
+module.exports = function beforeDevServer(app, _server, _compiler) {
+  // GraphQL Server
+  app.post('/graphql', graphqlHTTP({ schema }));
+
+  app.get(
+    '/graphql',
+    graphqlHTTP({
+      schema,
+    }),
+  );
+
+  app.use('/images', express.static(path.join(__dirname, 'images')));
+
+  app.use(
+    '/renderExample.js',
+    express.static(path.join(__dirname, '../resources/renderExample.js')),
+  );
+};