Skip to content

Running The Project

Jump to bottom
Danny edited this page Feb 26, 2023 · 2 revisions

Introduction

There are a few steps that will be required in order for you to actually run the project and see the changes you are making. At first, it may seem a little intimidating but after you have done it a few times it will start to make a lot more sense. I decided to use this Wiki to summarize some of the things that I think would be really helpful to know in a more digestible way than you'd find in the docs.

Forking the Repository

In order to start working on your new features you will first need to create a fork of the repo. What is a fork? You can basically think of it like cloning the repo except that you also add the copy to your own GitHub. Any changes you make to this fork will also show up in the original form where you can make pull requests as per usual.

In order to fork the repo you will head to the main page for the repo and in the top right next to "Watch" you will see "Fork". Click this button to create your fork.

Cloning your Fork

After that, you will then navigate to your own repository and click on the "<> Code" button. Choose the SSH tab and click the copy icon*. Then open a Command Prompt/ Powershell/ Windows Terminal on Windows or a Terminal on Mac. Make sure you are in the directory you want the files to be in and type git clone <paste the link you got from your repo>. This will clone all of the code into the directory.

  • You can also use GitHub Desktop if you prefer a GUI.

Opening the Code

When it comes to an IDE (Integrated Development Environment) the choice is yours. An extremely popular choice and the one I personally use is VS Code. It's pretty lightweight and has a huge library of extensions to help make your life easier. Another similarly popular choice is the IDEs made by JetBrains.

If you are using VS Code you should be able to right-click inside the directory of the cloned repo and choose the option "Open with Code". This will open the entire folder inside VS Code.

Running the Code

Javascript has a really fun-to-use package manager called NPM or Node Package Manager. NPM is usually how you will get the packages you need to run the code or add any cool libraries you find that you want to integrate into your projects. There are other options as well besides NPM, Yarn is another popular one and PNPM has recently been climbing in popularity due to its significant performance increase over regular NPM.

Installing Node

In order to use NPM, you need to install NodeJS it's best to use the LTS version as that stands for Long Term Support meaning it will be the most stable version. There can be some issues with Node version mismatching and trying to run an app when collaborating with a team so feel free to provide what Node version you are running here to help diagnose issues (in order to check, after installing run the command node -v from your terminal):

  • Daniel - Node version 18.12.1

Installing NodeJS will automatically also come with NPM.

Dependencies

So the reason NodeJS is necessary is that you will need the dependencies and node to run the application. In order to see what dependencies the application has you can check the package.json file at any time to see a list. Installing dependencies is actually really easy. Make sure you are in the same directory as the package.json file and simply run npm install in your terminal. NPM will use the package.json file to know what packages and what specific versions to grab.

Starting a React App

Now that you have NodeJS and all the dependencies installed you are ready to launch the application and see it in your browser. To do this make sure you are in the same directory where the file "index.js" is as that is what is known as the 'entry-point' for the application. Then simply run npm start from there and the app will begin to launch. In most cases your browser will open to the correct page automatically but in case it doesn't the console will display at what address and port it is hosted but by default it is usually http://localhost:3000.

And that's it! You have successfully done everything you need in order to launch our project below are some additional tips!

Additional Tips & Best Practices

  • React applications update on save, you don't need to restart the application each time you make changes to the code, once you hit save the application will refresh!
  • In both Firefox and Chrome, you can download the React Dev-Tools, this adds a few more React specific features to the Chrome/ Firefox dev tools to track the state of your components and even benchmark their performance
  • It is best practice that each time you pull a new version of the repo down that you run npm install just in case there are more dependencies that have been added

If you have any other questions feel free to reach out! I am not an expert by any means but I will try to help as best I can!

Clone this wiki locally