removed old json api server
parent
28ab66ac09
commit
b0f67eaa70
73
README.md
73
README.md
|
|
@ -1,72 +1 @@
|
||||||
TO UPDATE
|
TO DO
|
||||||
|
|
||||||
# Starter Kit for [Building Applications in React and Redux](http://www.pluralsight.com/author/cory-house) on Pluralsight
|
|
||||||
|
|
||||||
## Get Started
|
|
||||||
|
|
||||||
1. **Install [Node 8](https://nodejs.org)** or newer. Need to run multiple versions of Node? Use [nvm](https://github.com/creationix/nvm) or [nvm-windows](https://github.com/coreybutler/nvm-windows)(https://github.com/coryhouse/pluralsight-redux-starter/archive/master.zip)
|
|
||||||
2. **Navigate to this project's root directory on the command line.**
|
|
||||||
3. **Install Node Packages.** - `npm install`
|
|
||||||
4. **Install [React developer tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) and [Redux Dev Tools](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=en)** in Chrome.
|
|
||||||
5. Having issues? See below.
|
|
||||||
|
|
||||||
## Having Issues? Try these things first:
|
|
||||||
|
|
||||||
1. Run `npm install` - If you forget to do this, you'll get an error when you try to start the app later.
|
|
||||||
2. Don't run the project from a symbolic link. It will cause issues with file watches.
|
|
||||||
3. Delete any .eslintrc in your user directory and disable any ESLint plugin / custom rules within your editor since these will conflict with the ESLint rules defined in the course.
|
|
||||||
4. On Windows? Open your console as an administrator. This will assure the console has the necessary rights to perform installs.
|
|
||||||
5. Ensure you do not have NODE_ENV=production in your env variables as it will not install the devDependencies. To check run this on the command line: `set NODE_ENV`. If it comes back as production, you need to clear this env variable.
|
|
||||||
6. Nothing above work? Delete your node_modules folder and re-run npm install.
|
|
||||||
|
|
||||||
### Production Dependencies
|
|
||||||
|
|
||||||
| **Dependency** | **Use** |
|
|
||||||
| ---------------- | ---------------------------------------------------- |
|
|
||||||
| bootstrap | CSS Framework |
|
|
||||||
| immer | Helper for working with immutable data |
|
|
||||||
| prop-types | Declare types for props passed into React components |
|
|
||||||
| react | React library |
|
|
||||||
| react-dom | React library for DOM rendering |
|
|
||||||
| react-redux | Connects React components to Redux |
|
|
||||||
| react-router-dom | React library for routing |
|
|
||||||
| react-toastify | Display messages to the user |
|
|
||||||
| redux | Library for unidirectional data flows |
|
|
||||||
| redux-thunk | Async redux library |
|
|
||||||
| reselect | Memoize selectors for performance |
|
|
||||||
|
|
||||||
### Development Dependencies
|
|
||||||
|
|
||||||
| **Dependency** | **Use** |
|
|
||||||
| ------------------------------- | ---------------------------------------------------------------- |
|
|
||||||
| @babel/core | Transpiles modern JavaScript so it runs cross-browser |
|
|
||||||
| babel-eslint | Lint modern JavaScript via ESLint |
|
|
||||||
| babel-loader | Add Babel support to Webpack |
|
|
||||||
| babel-preset-react-app | Babel preset for working in React. Used by create-react-app too. |
|
|
||||||
| css-loader | Read CSS files via Webpack |
|
|
||||||
| cssnano | Minify CSS |
|
|
||||||
| enzyme | Simplified JavaScript Testing utilities for React |
|
|
||||||
| enzyme-adapter-react-16 | Configure Enzyme to work with React 16 |
|
|
||||||
| eslint | Lints JavaScript |
|
|
||||||
| eslint-loader | Run ESLint via Webpack |
|
|
||||||
| eslint-plugin-import | Advanced linting of ES6 imports |
|
|
||||||
| eslint-plugin-react | Adds additional React-related rules to ESLint |
|
|
||||||
| fetch-mock | Mock fetch calls |
|
|
||||||
| html-webpack-plugin | Generate HTML file via webpack |
|
|
||||||
| http-server | Lightweight HTTP server to serve the production build locally |
|
|
||||||
| jest | Automated testing framework |
|
|
||||||
| json-server | Quickly create mock API that simulates create, update, delete |
|
|
||||||
| mini-css-extract-plugin | Extract imported CSS to a separate file via Webpack |
|
|
||||||
| node-fetch | Make HTTP calls via fetch using Node - Used by fetch-mock |
|
|
||||||
| npm-run-all | Display results of multiple commands on single command line |
|
|
||||||
| postcss-loader | Post-process CSS via Webpack |
|
|
||||||
| react-test-renderer | Render React components for testing |
|
|
||||||
| react-testing-library | Test React components |
|
|
||||||
| redux-immutable-state-invariant | Warn when Redux state is mutated |
|
|
||||||
| redux-mock-store | Mock Redux store for testing |
|
|
||||||
| rimraf | Delete files and folders |
|
|
||||||
| style-loader | Insert imported CSS into app via Webpack |
|
|
||||||
| webpack | Bundler with plugin ecosystem and integrated dev server |
|
|
||||||
| webpack-bundle-analyzer | Generate report of what's in the app's production bundle |
|
|
||||||
| webpack-cli | Run Webpack via the command line |
|
|
||||||
| webpack-dev-server | Serve app via Webpack |
|
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load Diff
10
package.json
10
package.json
|
|
@ -4,15 +4,11 @@
|
||||||
"private": true,
|
"private": true,
|
||||||
"description": "Reverse proxy frontend application",
|
"description": "Reverse proxy frontend application",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"start": "run-p start:dev start:api",
|
"start": "run-p start:dev",
|
||||||
"start:dev": "webpack-dev-server --config webpack.config.dev.js --port 3000",
|
"start:dev": "webpack-dev-server --config webpack.config.dev.js --port 3000",
|
||||||
"prestart:api": "node tools/createMockDb.js",
|
|
||||||
"start:api": "node tools/apiServer.js",
|
|
||||||
"clean:build": "rimraf ./build && mkdir build",
|
"clean:build": "rimraf ./build && mkdir build",
|
||||||
"prebuild": "run-p clean:build",
|
"prebuild": "run-p clean:build",
|
||||||
"build": "webpack --config webpack.config.prod.js",
|
"build": "webpack --config webpack.config.prod.js"
|
||||||
"postbuild": "run-p start:api serve:build",
|
|
||||||
"serve:build": "http-server ./build"
|
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@material-ui/core": "^4.9.13",
|
"@material-ui/core": "^4.9.13",
|
||||||
|
|
@ -43,8 +39,6 @@
|
||||||
"eslint-plugin-react": "7.12.4",
|
"eslint-plugin-react": "7.12.4",
|
||||||
"fetch-mock": "7.3.1",
|
"fetch-mock": "7.3.1",
|
||||||
"html-webpack-plugin": "3.2.0",
|
"html-webpack-plugin": "3.2.0",
|
||||||
"http-server": "0.9.0",
|
|
||||||
"json-server": "0.14.2",
|
|
||||||
"mini-css-extract-plugin": "0.5.0",
|
"mini-css-extract-plugin": "0.5.0",
|
||||||
"node-fetch": "^2.3.0",
|
"node-fetch": "^2.3.0",
|
||||||
"npm-run-all": "4.1.5",
|
"npm-run-all": "4.1.5",
|
||||||
|
|
|
||||||
|
|
@ -1,81 +0,0 @@
|
||||||
/*
|
|
||||||
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 jsonServer = require("json-server");
|
|
||||||
const server = jsonServer.create();
|
|
||||||
const path = require("path");
|
|
||||||
const router = jsonServer.router(path.join(__dirname, "db.json"));
|
|
||||||
|
|
||||||
// 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(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 "";
|
|
||||||
}
|
|
||||||
|
|
@ -1,12 +0,0 @@
|
||||||
/* eslint-disable no-console */
|
|
||||||
const fs = require("fs");
|
|
||||||
const path = require("path");
|
|
||||||
const mockData = require("./mockData");
|
|
||||||
|
|
||||||
const { courses, authors } = mockData;
|
|
||||||
const data = JSON.stringify({ courses, authors });
|
|
||||||
const filepath = path.join(__dirname, "db.json");
|
|
||||||
|
|
||||||
fs.writeFile(filepath, data, function (err) {
|
|
||||||
err ? console.log(err) : console.log("Mock DB created.");
|
|
||||||
});
|
|
||||||
|
|
@ -1,92 +0,0 @@
|
||||||
const courses = [
|
|
||||||
{
|
|
||||||
id: 1,
|
|
||||||
title: "Securing React Apps with Auth0",
|
|
||||||
slug: "react-auth0-authentication-security",
|
|
||||||
authorId: 1,
|
|
||||||
category: "JavaScript"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 2,
|
|
||||||
title: "React: The Big Picture",
|
|
||||||
slug: "react-big-picture",
|
|
||||||
authorId: 1,
|
|
||||||
category: "JavaScript"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 3,
|
|
||||||
title: "Creating Reusable React Components",
|
|
||||||
slug: "react-creating-reusable-components",
|
|
||||||
authorId: 1,
|
|
||||||
category: "JavaScript"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 4,
|
|
||||||
title: "Building a JavaScript Development Environment",
|
|
||||||
slug: "javascript-development-environment",
|
|
||||||
authorId: 1,
|
|
||||||
category: "JavaScript"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 5,
|
|
||||||
title: "Building Applications with React and Redux",
|
|
||||||
slug: "react-redux-react-router-es6",
|
|
||||||
authorId: 1,
|
|
||||||
category: "JavaScript"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 6,
|
|
||||||
title: "Building Applications in React and Flux",
|
|
||||||
slug: "react-flux-building-applications",
|
|
||||||
authorId: 1,
|
|
||||||
category: "JavaScript"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 7,
|
|
||||||
title: "Clean Code: Writing Code for Humans",
|
|
||||||
slug: "writing-clean-code-humans",
|
|
||||||
authorId: 1,
|
|
||||||
category: "Software Practices"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 8,
|
|
||||||
title: "Architecting Applications for the Real World",
|
|
||||||
slug: "architecting-applications-dotnet",
|
|
||||||
authorId: 1,
|
|
||||||
category: "Software Architecture"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 9,
|
|
||||||
title: "Becoming an Outlier: Reprogramming the Developer Mind",
|
|
||||||
slug: "career-reboot-for-developer-mind",
|
|
||||||
authorId: 1,
|
|
||||||
category: "Career"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 10,
|
|
||||||
title: "Web Component Fundamentals",
|
|
||||||
slug: "web-components-shadow-dom",
|
|
||||||
authorId: 1,
|
|
||||||
category: "HTML5"
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
const authors = [
|
|
||||||
{ id: 1, name: "Cory House" },
|
|
||||||
{ id: 2, name: "Scott Allen" },
|
|
||||||
{ id: 3, name: "Dan Wahlin" }
|
|
||||||
];
|
|
||||||
|
|
||||||
const newCourse = {
|
|
||||||
id: null,
|
|
||||||
title: "",
|
|
||||||
authorId: null,
|
|
||||||
category: ""
|
|
||||||
};
|
|
||||||
|
|
||||||
// Using CommonJS style export so we can consume via Node (without using Babel-node)
|
|
||||||
module.exports = {
|
|
||||||
newCourse,
|
|
||||||
courses,
|
|
||||||
authors
|
|
||||||
};
|
|
||||||
|
|
@ -24,7 +24,6 @@ module.exports = {
|
||||||
},
|
},
|
||||||
plugins: [
|
plugins: [
|
||||||
new webpack.DefinePlugin({
|
new webpack.DefinePlugin({
|
||||||
"process.env.API_URL": JSON.stringify("http://localhost:3001"),
|
|
||||||
"process.env.REVERSE_PROXY_API_URL": JSON.stringify(
|
"process.env.REVERSE_PROXY_API_URL": JSON.stringify(
|
||||||
"http://localhost:5050"
|
"http://localhost:5050"
|
||||||
)
|
)
|
||||||
|
|
|
||||||
|
|
@ -27,7 +27,9 @@ 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://localhost:3001")
|
"process.env.REVERSE_PROXY_API_URL": JSON.stringify(
|
||||||
|
"https://toodle.ddns.net/reverse-proxy-api"
|
||||||
|
)
|
||||||
}),
|
}),
|
||||||
new HtmlWebpackPlugin({
|
new HtmlWebpackPlugin({
|
||||||
template: "src/index.html",
|
template: "src/index.html",
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue