From b202f52eb28e6d2b24c337abcea96ce18a9d2bbc Mon Sep 17 00:00:00 2001 From: Tudor Stanciu Date: Sun, 3 May 2020 01:32:15 +0300 Subject: [PATCH] app publicPath --- src/index.js | 2 +- tools/apiServer.js | 4 +- ...apiServerWithGlobalPrefixAndApiVersions.js | 86 +++++++++++++++++++ webpack.config.dev.js | 6 +- webpack.config.prod.js | 6 +- 5 files changed, 98 insertions(+), 6 deletions(-) create mode 100644 tools/apiServerWithGlobalPrefixAndApiVersions.js diff --git a/src/index.js b/src/index.js index 0e5ab40..b18d099 100644 --- a/src/index.js +++ b/src/index.js @@ -11,7 +11,7 @@ const store = configureStore(); render( - + , diff --git a/tools/apiServer.js b/tools/apiServer.js index 38fe371..ad45c66 100644 --- a/tools/apiServer.js +++ b/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; diff --git a/tools/apiServerWithGlobalPrefixAndApiVersions.js b/tools/apiServerWithGlobalPrefixAndApiVersions.js new file mode 100644 index 0000000..ca33e09 --- /dev/null +++ b/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 ""; +} diff --git a/webpack.config.dev.js b/webpack.config.dev.js index 092e8df..7671e67 100644 --- a/webpack.config.dev.js +++ b/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", diff --git a/webpack.config.prod.js b/webpack.config.prod.js index 6cf4613..df87705 100644 --- a/webpack.config.prod.js +++ b/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",