This project is intended as both an example to be referenced, and a cookbook to kickstart new app development.
Required
Optional
- Docker - used to quickly and easily run the backend and database locally. If you prefer, you can directly run the Java jar and MySQL workbench instead.
- VSCode extension "ESLint" - Quality-of-life extension that will run ESLint against code in real-time
- Node.js/JavaScript (high-level video and interactive walkthrough)
- React
- Redux
git clone https://gitlab.nmcapstone.com/nm-capstone-cookbooks/uwm-cs-595-cs-frontend.git
cd uwm-cs-595-nm-frontend
npm install
- Start up the backend
- If you are using Docker, simply follow these steps:
docker login docker.nmcapstone.com
npm run infra:up
- If you are not using Docker, then please refer to the project docs.
- If you are using Docker, simply follow these steps:
NPM scripts are custom commands that simplify common project tasks, such as:
- Running tests
- Building and starting the application
- Running code quality tools like ESLint
These scripts are defined scripts
block of the package.json
file, and can be run in a terminal using npm run <script-name>
.
If the script requires additional arguments, use the format npm run <script-name> -- <arguments...>
.
See below for the included commands and examples
This project includes a base set of commands:
Script | Examples | Purpose |
---|---|---|
infra:up |
npm run infra:up |
Used to start up the backend via Docker and Docker-Compose |
infra:down |
npm run infra:down |
Used to tear down the backend via Docker and Docker-Compose |
test |
npm run test |
Used to execute unit and integration tests |
build |
npm run build |
Used to build the static WebApp bundle |
build:local-docker |
npm run build:local-docker |
Same as build , but specifically for running the app locally in Docker |
build:deployed |
npm run build:deployed |
Same as build , but specifically for running the app in AWS |
start |
npm run start |
Used to start up the app and serve the static bundle from build |
start:dev |
npm run start:dev |
Used to both build and start the app locally (use this when developing) |
Once you are all set up, with the backend already running, you can start the webapp simply by:
- Run the command
npm run start
(Runs the node server) - In another terminal
npm run start:dev
(Builds and watches the client side code) - Open a browser
- Navigate to
http://localhost:4000
You can execute all unit and integration tests by running npm run test
.
If you only want to run a single test, use the command format npm run test -- path/to/your/file.js
.
If you want the tests to automatically re-run when you make changes, use the command format npm run test -- --watchAll
.
You can also watch a single test with the command format npm run test -- --watchAll path/to/your/file.js
.