Giter VIP home page Giter VIP logo

gradtracker-frontend's Introduction

frontend-example cookbook

This project is intended as both an example to be referenced, and a cookbook to kickstart new app development.

Prerequisites

Software:

Required

  1. Git
  2. Node.js version >= 10.16.0
  3. An IDE (VSCode preferred)

Optional

  1. 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.
  2. VSCode extension "ESLint" - Quality-of-life extension that will run ESLint against code in real-time

Knowledge

  1. Node.js/JavaScript (high-level video and interactive walkthrough)
  2. React
  3. Redux

Getting set up

  1. git clone https://gitlab.nmcapstone.com/nm-capstone-cookbooks/uwm-cs-595-cs-frontend.git
  2. cd uwm-cs-595-nm-frontend
  3. npm install
  4. Start up the backend
    • If you are using Docker, simply follow these steps:
      1. docker login docker.nmcapstone.com
      2. npm run infra:up
    • If you are not using Docker, then please refer to the project docs.

Build and run on your local machine

NPM Scripts

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)

Start up the app

Once you are all set up, with the backend already running, you can start the webapp simply by:

  1. Run the command npm run start (Runs the node server)
  2. In another terminal npm run start:dev (Builds and watches the client side code)
  3. Open a browser
  4. Navigate to http://localhost:4000

Running Tests

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.

gradtracker-frontend's People

Contributors

ericmacfarland avatar tyczkowski avatar rachaelcharles avatar ericmacfa avatar brayers avatar anarwal avatar dutchrican avatar sashahavia avatar pvanwoensel-lv avatar

Watchers

James Cloos avatar Matthew Watts avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.