Setting up a local environment for the website
Okay so the first step is getting an IDE (VS code, IntelliJ Webstorm, etc) and making a new project from version control (VCS). This will ask you for an url/link which you can find by clicking in the green code tab as seen on the image below. This should copy all the files inside your IDE.
Okay so after getting the code locally, all you need to do now is run three commands in the terminal.
So the website has a file called .env, this sets up the enviroment (env) variables. Such as what port to use (3000, 4000, etc) to whether use the test server or production (api.test.faforever vs api.faforever). Luckily for you, we set up an .env.example ! All you need to do now is copy paste that file and name it .env or type the next line in the terminal:
cp .env.example .env
So like most websites and applications, we use dependencies such as SASS, pug, axios, express.js and so on. In order for the website to run, it needs to have those installed. Luckily for you, the process is extremely easy. Just type the next command and it will download the dependencies.
yarn install
As of this writing, the website uses grunt. An outdated system that processes our js and css. So everytime you make a styling (css/sass) change in one of the sass files, you'll need to run the next command or none of the website styles will run.
grunt prod
Now all you need to do is run express.js. Run the terminal command below and then go to localhost:3000 (or whatever port number you put). This must be done every time a backend (routes, scripts, express.js) change is done (unlike the frontend that just needs a page refresh).
node express.js
So since writing node express.js everytime you make a backend change or want to restart the website is a pain, you need to add a configuration so it runs automatically. Here's the VS Code and the Webstorm.
Just go click on Run > Open Configuration > Make sure it looks the same as the file below. It should restart every time you press ctrl + F5 (bind this to your mouse middle button, it will become extremely useful for web development).
On the top corner to the middle, there should be something with a play button icon or an add configuration text. Go into adding a configuration, click the plus/+ sign and add a Node.js configuration, then put down express.js as the Javascript file.
If you have any issues running this or setting up your local environment. Just ask for Javi on the official FAF Discord https://discord.gg/mXahVSKGVb