Skip to content

Local Frontend Testing Guide

Jump to bottom
David Huculak edited this page Dec 30, 2017 · 16 revisions

Below is a guide for running the ConU CoursePlanner frontend on your local machine for faster testing than having to do a full build + deploy each time you make a change. This is not the only way to get this working but it is the way that I have got it working for myself and it's very simple so I recommend this method. - David

Software dependencies:

Install the following programs:

  • nodejs - to build the frontend
  • IntelliJ or any static file server - to serve the static frontend files (html, css, js) locally
  • nginx - to redirect (a.k.a. proxy) all backend requests to our remote server

maven does not need to be installed for this to work

Setting up your local server

  1. Start IntelliJ, go to File tab -> Settings -> Build, Execution, Deployment --> Debugger --> Built-in server and make note of the listed port number (I believe the default is 63342). Also, check the box that reads "Allow unsigned requests" - this was sometimes needed for this to work.

  2. Navigate to the conf/ folder in the location where you installed nginx (on Ubuntu mine was located at /usr/local/nginx/conf/, though I think the default installation dir is /etc/nginx). Open up the file named nginx.conf and replace the contents of the file with my configuration sample file.

  3. If needed, replace the port number (127.0.0.1:63342) on line 20 with the one you found in step 1.

  4. If needed, replace the url of the backend to use your own (the sample I added uses courseplannerd).

  5. Start nginx by navigating to the location where you installed nginx and run the program:

    On Windows (in git bash)

    # hit Ctrl+C to stop it
./nginx.exe

    On Linux

    # start nginx
sudo ./nginx

# stop nginx
sudo ./nginx -s stop

Testing the site

  • Before anything, install node dependencies if needed: npm install

  1. Navigate to the root folder of the project and run the frontend build or watch command(s):

    Build frontend

    npm run build-dev

    OR

    Watch frontend

    npm run watch

  2. Type localhost in your browser window or click the link: http://localhost/

  3. Make changes to code (I recommend changing a string value in src/main/webapp/babel-src/util.js to check that it's working).

  4. If you ran the watch command, wait a few seconds for the build to finish then refresh the page. Else, the frontend will not be built automatically when you edit the source files so you must repeat step 1 then refresh the page.

Don't forget that for this specific setup, you will need both IntelliJ and nginx to be running otherwise http://localhost/ won't work

Clone this wiki locally