Yei! React Router and Apollo running with SSR! 🎁 Webpack using vendors 🎀

.babelrc

@@ -1,3 +1,4 @@
 {
-  "presets": ["@babel/preset-env", "@babel/preset-stage-3", "@babel/preset-react"]
+  "presets": ["@babel/preset-env", "@babel/preset-stage-3", "@babel/preset-react"],
+  "plugins": ["react-hot-loader/babel"]
 }

.eslintignore

@@ -0,0 +1 @@
+dist

.eslintrc

@@ -14,6 +14,14 @@
         "printWidth": 100,
         "trailingComma": "all"
       }
+    ],
+    "no-use-before-define": [
+      "error",
+      {
+        "classes": false,
+        "functions": false,
+        "variables": false
+      }
     ]
   }
 }

README.md

@@ -1,2 +1,52 @@
 # RAF
+
 An Apollo GraphQL example using React and FakerQl.
+
+## Motivation
+
+[FakerQL](https://fakerql.com) is a hosted **GraphQL** endpoint that allows you to send queries, mutations and subscriptions for totally fake data. In this case I'll use it for testing **Apollo client** along with **React.js**. The login and register mutations return a **JWT** which is great for applications that require authentication.
+
+## What’s Included?
+
+The project is created to build a modern React application:
+
+* React 16.3
+* Webpack and React Router 4
+* Apollo client 2.2
+* Server Side Rendering
+* Code Spliting (by Vendor and Routes) (working in)
+* Hot Reload (working in)
+* Bundle Analizer (comming soon)
+* Linter with prettier and eslint (airbnb's config)
+
+## Getting started
+
+Run the following script:
+
+```bash
+npm run dev
+```
+
+Or if you prefer Yarn
+
+```bash
+yarn dev
+```
+
+## Tests
+
+```bash
+yarn lint
+```
+
+```bash
+yarn lint:fix
+```
+
+## Building RAF
+
+Just make sure your lints are okay :D
+
+## Contributors
+
+* Juan David Castro ([@juandc](https://github.com/juandc)) <[[email protected]](mailto:[email protected])>

config/defaultConfig.js

@@ -0,0 +1,19 @@
+const { context, mode, devtool } = require("./utils");
+
+module.exports = {
+  context,
+  devtool,
+  mode,
+  module: {
+    rules: [
+      {
+        exclude: /node_modules/,
+        test: /\.(js)$/,
+        use: ["babel-loader"]
+      }
+    ]
+  },
+  resolve: {
+    extensions: [".js"]
+  }
+};

config/index.js

@@ -0,0 +1,23 @@
+const { resolve } = require("path");
+const defaultConfig = require("./defaultConfig");
+const { vendor } = require("./utils");
+
+function webpackConfig({
+  name,
+  config: { outputPath, withVendor, isStatic, ...config }
+}) {
+  return {
+    ...defaultConfig,
+    ...config,
+    entry: {
+      [name]: `./${name}.js`,
+      ...(() => withVendor && { vendor })()
+    },
+    output: {
+      path: resolve(__dirname, `../dist${isStatic ? "/static" : ""}`),
+      filename: `[name].js`
+    }
+  };
+}
+
+module.exports = webpackConfig;

config/utils.js

@@ -1,11 +1,15 @@
 const { resolve } = require("path");
 
-const { NODE_ENV: mode = "production", PORT: port = 3000 } = process.env;
+const { NODE_ENV: mode = "development", PORT: port = 3000 } = process.env;
+
+const context = resolve(__dirname, "../src/");
+const devtool = "cheap-module-source-map";
+const vendor = ["react", "react-dom", "react-router"];
 
 module.exports = {
-  htmlTemplate: resolve(__dirname, "../public"),
-  context: resolve(__dirname, "../src/"),
-  dev: mode !== "production",
+  context,
+  devtool,
+  vendor,
   mode,
   port
 };

config/webpack.config.client.js

@@ -0,0 +1,23 @@
+const webpackConfig = require("./");
+
+module.exports = webpackConfig({
+  name: "client",
+  config: {
+    // externals,
+    isStatic: true,
+    target: "web",
+    withVendor: true,
+    optimization: {
+      splitChunks: {
+        cacheGroups: {
+          default: false,
+          commons: {
+            test: /[\\/]node_modules[\\/]/,
+            name: "vendor",
+            chunks: "all"
+          }
+        }
+      }
+    }
+  }
+});

config/webpack.config.server.js

@@ -0,0 +1,10 @@
+const nodeExternals = require("webpack-node-externals");
+const webpackConfig = require("./");
+
+module.exports = webpackConfig({
+  name: "server",
+  config: {
+    target: "node",
+    externals: [nodeExternals()]
+  }
+});