proesslet/HCI-SPC-Redesign

SPC Redesign

Directories

DesignDocs

Basically any files we create to help with design (color palletes, figma files, etc)

website

All the website code

• node_modules: all dependencies that are installed through npm (hopefully we won't really have many other than the base vue ones)
• public: the folder to put images in
• src: all the vue code
• index.html: the main html file (nothing is really written here though since Vue takes care of it all)

Inside of src

• assets: mostly just some css that we probably won't need to touch anymore
• components: singular component files (outlook display, watch/warning display, forms, etc)
• router: the thing that controls what is displayed when a particular url is entered
• views: whole pages that contain a combination of code and importing other components
• main.js: the main javascript file (hopefully won't need any more modification for our purposes)

The rest is all just config files that we don't need to really worry about!

Helpful Project Information

• SPC Outlook Selector

• NWS API - if we want to include active watches/warnings and make it actually work

• Vue Documentation

• Very good vue crash course by Traversy Media (love this guy)

Recommended IDE Setup

VSCode + Volar (and disable Vetur).

Install Node (if needed)

Install from here. It is a super easy install - the latest version is all you need

Project Setup

Ensure you are in the website directory

cd website

Install required dependencies

npm install

Compile and Hot-Reload for Development

This will allow you to run the application locally in your web browser. Once you run this command, it will tell you what port it is running on so that you can access it from localhost.

npm run dev

Compile and Minify for Production

This will compile all javascript into js files to deploy to a server. If you are just wanting to preview the project, or work on development, it is recommended you use the previous command.

npm run build