How to set up your local environment (Beginner friendly)

[JaviTrek]

Setting up your local environment should take about 5 minutes and it's very simple!
Just follow the steps below and you should be fine!

Setting up your IDE

Your IDE (Integrated Development Environment) such as IntelliJ's Webstorm or Visual Studio Code is where we'll setup our code. First download and install any IDE you like using, I recommend Visual Studio Code if you aren't too experienced.

Also if you haven't installed node.js in your computer, go and install it as well. Node download

Clone the repository

Okay IDE setup done, now we just need to copy the code. On VS Code, open up a new window (File > New Window). On any other IDE, this process should be extremely similar (look up for VCS if you can't find github, its the same thing)



You should be now seeing this window, click on Clone Git Repository

Now we need to get the repository link, go to our repository and click the green code square, you should see a URL

Your system is about to ask you for a folder to place the code, I RECOMMEND CREATING A NEW FOLDER! Call it AW-Competitive, INIT Build or whatever suits you.

After doing so, you should see the code in your IDE.

Install our Dependencies

Great you installed the repo correctly! Now we are going to run some terminal lines so we can install our dependencies (such as react, express, webpack, etc.)

Open up a new terminal to start!

client / frontend

We have our client folder, where we store our frontend files.

Lets switch folders by using cd (change directory) command

cd client

Then, once you are in the client folder, run

npm i

This will install (i) all of our front-end dependencies (sass, react, webpack, etc)

server / backend

Same deal as before, lets do:

cd ../server

(The ../ you see before server means leaving the current folder (client), and then moving to server, its the same as doing cd .. and then cd server but combined)

Now we run npm i (install) to get all of our back-end dependencies (express.js, dotenv, cors, etc)

npm i

You should see something more or less like this:

copy the .env file

Okay so we have our example.env (environment) file. This is where we store sensitive information that we do not want to share online (such as the token/password we use to communicate with our database). Luckily for you, I set up example.env so you just need to copy it and rename setup.env. You can either manually copy paste or run this command

cp stands for copy paste.

(You need to be inside the server folder before running this)

cp example.env setup.env

your setup.env should look like this

Now in order to access the database (mongoDB) you need to Now either you should already have in your Discord DM your user and password or DM me (Javi) to send you one. You'll replace the "user" line with your new user and same with password:

Start up your local environment

Okay now if everything went well, starting up our local environment should be easy peasy now. All you gotta do is have two terminals (recommend renaming one to client and one to server, its optional) and in one of them be inside the client folder and in another be inside the server folder. Run the next command on both terminals:

npm start

Now if both terminals look clean, go to your browser and type " localhost:3000 " and you should see the website