Repository for the front end web application on the radio telescope project
Install Visual Studio Code from https://code.visualstudio.com/. Follow the normal installation instructions and accept all defaults.
Install the following Plug-ins inside VSCode. To install plugins, launch VSCode select the building block icon on the left. Search for plugins by name in the search bar and then click "install". The plugins should then appear in the Enabled section.
- Auto Close Tag
- Bracket Pair Colorizer
- Copy Relative Path
- Gitlens - Git Supercharged
- Npm
- Npm intellisense
- One Monokai Theme
- Vetur Do some research on these plugins to learn how to effectively use them. Especially focus on Gitlens to learn how to manage your local repository in VSCode.
- Install Git from https://git-scm.com/downloads
- Install Node.JS/npm from https://nodejs.org/en/
- Launch VSCode
- From the tabs at the top, select Terminal --> New Terminal
- In the terminal, navigate to whatever directory you want to place your local repository in, and then execute the following command:
git clone https://github.com/YCPRadioTelescope/Radio-Tele-Frontend.git
This makes a local repostory in the current directory. - From the tabs at the top, select File --> Open Folder and then select the vue-front-end folder inside of the Radio-Tele-Frontend folder that was just cloned. The files should now appear in the file explorer on the left.
- If the branch displayed at the bottom left does not say master, then click on it to open the branch selection dialogue box at the top. Then search for the origin/master branch and then select it to check out that branch. Note: Check package.json for any dependencies marked with a “^” before the version number, this indicates automatic updating and can lead to problems down the road.
The frontend uses a "secret key" component to connect to AWS. You will have to retrieve this from a team member who has access to it. For security reasons, this cannot be pushed to GitHub. The SecretKey.js file will go into the "utils" directory within the project. The project will NOT compile without this file!
- In the terminal, make sure you are in the vue-front-end directory and then type the following commands to install, build, and run the web application locally.
npm install
npm run build
npm run dev
Note: If it fails to compile or run, trynpm run serveinstead. - Open any web browser and navigate to
localhost:8081. If you see the landing page and can get to the login page, then the application is running successfully. From now on, you should be able to run the application using only thenpm run devcommand. You can now start developing!
It is highly recommended that you also setup the back-end application so that you can host the back-end locally and eliminate dependency on the remote database. If AWS goes offline, or if you do not have internet, you can still continue developing by running both the front-end and back-end applications on localhost.
To setup the back-end, see https://github.com/YCPRadioTelescope/RT-Contracts
Note: Consider installing Postman for debugging API calls.
With the local back-end application installed, you will need to update the ApiDriver.js file in the "src" directory to handle local API requests. Do this by commenting out let baseUrl = "http://api.ycpradiotelescope.com:8080/api/ and replacing it with let baseUrl = "http://localhost:8080/api/";. Do the same with any other references to http://api.ycpradiotelescope.com:8080/api/ if applicable.
- To start your own vue project, see https://cli.vuejs.org/guide/creating-a-project.html#vue-create
- To understand the mechanics of Vue.JS, see https://vuejs.org/v2/guide/
- To understand the mechanics of Vuetify, see https://vuetifyjs.com/en/getting-started/quick-start
Here is the link to the AWS Management Console. See the back-end team to get credentials.