app publicPath

master
Tudor Stanciu 2020-05-03 01:32:15 +03:00
parent 76b6081a35
commit b202f52eb2
5 changed files with 98 additions and 6 deletions

View File

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

View File

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

View File

@ -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 "";
}

View File

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

View File

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