Build React app into webserver container

[codeforpdx]

Build React app into webserver container

[erikjasso]

Ask the front-end devs what they are using to build the React app

[maxkwallace]

@erikjasso right now the frontend is set up to use the create-react-app defaults (Webpack) to do builds and I don't see a need to change that in the future. You can do a build in that directory with the command npm run build and it looks like this:

mkw@M4600:~/Documents/repos/recordexpungPDX/recordexpungPDX/src/frontend$ npm run build

> [email protected] build /home/mkw/Documents/repos/recordexpungPDX/recordexpungPDX/src/frontend
> react-scripts-ts build

Creating an optimized production build...
Starting type checking and linting service...
Using 1 worker with 2048MB memory limit
(node:8496) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
Compiled successfully.

File sizes after gzip:

  34.18 KB  build/static/js/1.be79822f.chunk.js
  3.56 KB   build/static/js/main.7dcb98c8.chunk.js
  1.02 KB   build/static/css/main.60428d27.chunk.css
  763 B     build/static/js/runtime~main.229c360f.js

The project was built assuming it is hosted at the server root.
You can control this with the homepage field in your package.json.
For example, add this to build it for GitHub Pages:

  "homepage" : "http://myname.github.io/myapp",

The build folder is ready to be deployed.
You may serve it with a static server:

  npm install -g serve
  serve -s build

Find out more about deployment here:

  http://bit.ly/CRA-deploy

[erikjasso]

@maxkwallace I've never used Webpack. What does it do?

[maxkwallace]

@erikjasso Webpack is a tool that's primarily used to transform Javascript code files on the filesystem (i.e. what we edit in a repo) into static assets, typically and most importantly, one or more big Javascript files that's the result of bundling together and minifying all the code you need.