[AEC-WS-00] - Setup Website Locally

[nasirhm]

Configure the website locally to setup development environment.

Steps:

• Fork the repo under your username.
• Clone the forked repo.
• Install NodeJS (Required to run npm)
• npm install (Installs all the plugins that the website requires.)
• npm run preview

[soh3ee]

Detailed steps to setup local development environment for new people (: (If you're new to CS, this may be scary at first, so here are some detailed steps that tell you exactly what to do in order to get started with contributing the AEC website)

1. Fork the repo.

• WTH is a fork? A fork is essentially a copy. So when you "fork" a repo, you're copying their files into your own, new repo.
• But you won't be forking THIS repo, you should be forking: https://github.com/Applied-Engineering-FC/website-dev. The button for this is at the top right corner. Click "Fork" and the default settings should be fine.
• The reason why you fork that repo is because the backend we have set up allows us to make all the changes on the website-dev repo, which, when merges are made, will automatically make changes to this repo here.

2. Clone the forked repo.

• To do this, you should have 2 things open: your terminal and your forked repo in your web browser (Safari, Firefox, Chrome, whatever). You should also have git installed.
• In your terminal, type git clone <YOUR REPO'S LINK>
• REPLACE <YOUR REPO'S LINK> with the link that is in your browser. For example, for cloning the original website-dev repo, I would do git clone https://github.com/Applied-Engineering-FC/website-dev/
• "Cloning" is basically the act of bringing all the files on a GitHub repo to your local machine. Within the files that are brought over, there is a directory named .git. This contains all the information that GitHub needs when you will eventually do things like "commit" and "push" your changes. But that is beyond setting up the local development environment.

3. Installing NodeJS

• Just follow the guide here for your operating system: https://kinsta.com/blog/how-to-install-node-js/ .

4. Change into the website-dev directory and install all necessary plugins
   • To change directories in Linux or MacOS (or any UNIX-based system), type cd website-dev. Then, run npm install.
   • npm knows what plugins install by reading package.json. It also installs their dependencies.

!!! Windows-based operating systems: I would suggest installing and using WSL or spinning up a VM. Basically, I don't think web-development in Window-based OSs is beginner-friendly nor efficient.

5. Run npm run dev
   • This basically makes your computer a local server! When you run npm run dev, you'll see Local: http://localhost:5175/, or something similar to that. Copy and paste that into your browser, and you'll be able to see the website in your browser!

Feel free to ask any questions under this issue