app publicPath

src/index.js

@@ -11,7 +11,7 @@ const store = configureStore();
 
 render(
   <ReduxProvider store={store}>
-    <Router>
+    <Router basename={process.env.PUBLIC_URL}>
       <App />
     </Router>
   </ReduxProvider>,

tools/apiServer.js

@@ -54,8 +54,10 @@ server.post("/courses/", function (req, res, next) {
   }
 });
 
+const routesPrefix = "/rxc-api";
+
 // Use default router
-server.use(router);
+server.use(routesPrefix, router);
 
 // Start server
 const port = 3001;

tools/apiServerWithGlobalPrefixAndApiVersions.js

@@ -0,0 +1,86 @@
+/*
+This uses json-server, but with the module approach: https://github.com/typicode/json-server#module
+Downside: You can't pass the json-server command line options.
+Instead, can override some defaults by passing a config object to jsonServer.defaults();
+You have to check the source code to set some items.
+Examples:
+Validation/Customization: https://github.com/typicode/json-server/issues/266
+Delay: https://github.com/typicode/json-server/issues/534
+ID: https://github.com/typicode/json-server/issues/613#issuecomment-325393041
+Relevant source code: https://github.com/typicode/json-server/blob/master/src/cli/run.js
+*/
+
+/* eslint-disable no-console */
+const express = require("express");
+const jsonServer = require("json-server");
+
+const router = express.Router();
+const server = jsonServer.create();
+
+const path = require("path");
+const v1Router = jsonServer.router(path.join(__dirname, "db.json"));
+router.use("/v1", v1Router);
+
+// Can pass a limited number of options to this to override (some) defaults. See https://github.com/typicode/json-server#api
+const middlewares = jsonServer.defaults({
+  // Display json-server's built in homepage when json-server starts.
+  static: "node_modules/json-server/dist"
+});
+
+// Set default middlewares (logger, static, cors and no-cache)
+server.use(middlewares);
+
+// To handle POST, PUT and PATCH you need to use a body-parser. Using JSON Server's bodyParser
+server.use(jsonServer.bodyParser);
+
+// Simulate delay on all requests
+server.use(function (req, res, next) {
+  setTimeout(next, 0);
+});
+
+// Declaring custom routes below. Add custom routes before JSON Server router
+
+// Add createdAt to all POSTS
+server.use((req, res, next) => {
+  if (req.method === "POST") {
+    req.body.createdAt = Date.now();
+  }
+  // Continue to JSON Server router
+  next();
+});
+
+server.post("/courses/", function (req, res, next) {
+  const error = validateCourse(req.body);
+  if (error) {
+    res.status(400).send(error);
+  } else {
+    req.body.slug = createSlug(req.body.title); // Generate a slug for new courses.
+    next();
+  }
+});
+
+// Use default router
+server.use("/api", router);
+
+// Start server
+const port = 3001;
+server.listen(port, () => {
+  console.log(`JSON Server is running on port ${port}`);
+});
+
+// Centralized logic
+
+// Returns a URL friendly slug
+function createSlug(value) {
+  return value
+    .replace(/[^a-z0-9_]+/gi, "-")
+    .replace(/^-|-$/g, "")
+    .toLowerCase();
+}
+
+function validateCourse(course) {
+  if (!course.title) return "Title is required.";
+  if (!course.authorId) return "Author is required.";
+  if (!course.category) return "Category is required.";
+  return "";
+}

webpack.config.dev.js

@@ -3,6 +3,7 @@ const path = require("path");
 const HtmlWebpackPlugin = require("html-webpack-plugin");
 
 process.env.NODE_ENV = "development";
+process.env.PUBLIC_URL = "/rxc-app";
 
 module.exports = {
   mode: "development",
@@ -11,7 +12,7 @@ module.exports = {
   entry: "./src/index",
   output: {
     path: path.resolve(__dirname, "build"),
-    publicPath: "/",
+    publicPath: process.env.PUBLIC_URL,
     filename: "bundle.js"
   },
   devServer: {
@@ -24,7 +25,8 @@ module.exports = {
   },
   plugins: [
     new webpack.DefinePlugin({
-      "process.env.API_URL": JSON.stringify("http://localhost:3001")
+      "process.env.API_URL": JSON.stringify("http://localhost:3001/rxc-api"),
+      "process.env.PUBLIC_URL": JSON.stringify(process.env.PUBLIC_URL)
     }),
     new HtmlWebpackPlugin({
       template: "src/index.html",

webpack.config.prod.js

@@ -5,6 +5,7 @@ const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 const webpackBundleAnalyzer = require("webpack-bundle-analyzer");
 
 process.env.NODE_ENV = "production";
+process.env.PUBLIC_URL = "/rxc-app";
 
 module.exports = {
   mode: "production",
@@ -13,7 +14,7 @@ module.exports = {
   entry: "./src/index",
   output: {
     path: path.resolve(__dirname, "build"),
-    publicPath: "/",
+    publicPath: process.env.PUBLIC_URL,
     filename: "bundle.js"
   },
   plugins: [
@@ -27,7 +28,8 @@ module.exports = {
     new webpack.DefinePlugin({
       // This global makes sure React is built in prod mode.
       "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV),
-      "process.env.API_URL": JSON.stringify("http://127.0.0.1:3001")
+      "process.env.PUBLIC_URL": JSON.stringify(process.env.PUBLIC_URL),
+      "process.env.API_URL": JSON.stringify("http://toodle.ddns.net/rxc-api")
     }),
     new HtmlWebpackPlugin({
       template: "src/index.html",