4. Running the App Locally - WebJamApps/JaMmusic GitHub Wiki

4.2 Get the Front-end Running on localhost

4.2.1 IF you do not have any code at all…

Create a project root folder (best to use the name of the GitHub org)
Open the folder just created, right-click and select Open in Terminal
Go to the project’s repo folder on GitHub and select the clone or download button, then click the clipboard icon.
From the Ubuntu terminal, type _git clone _ Folder gets created
Close the terminal
Open the new folder, right-click and select Open in Terminal.

Add any files that are needed but not included in the GitHub as follows:

.env file that contains credentials and configuration

From Atom, right-click the folder root (top of the tree), and select new file, and name it .env, and press enter
Copy the starting variables from the section above and paste it into the file, then save the file.
.bowerrc file that is needed if working behind a corporate firewall

4.2.1.1 The .env file

There are three .env files that are needed for running the app locally as follows:

.env placed at the root of the frontend
.env placed at the root of the backend
.env that is placed inside of the backend/frontend (subfolder), which appears only after installing the backend.

Request the contents of the .env file from [email protected]

Use this as a starting point for the .env file:

PORT=9000
NODE_ENV=development
IP=http://localhost
BackendUrl=http://localhost:7000
GoogleClientId=
AllowUrl=
GoogleClientSecret=

4.2.2 IF you already have code and need to get the latest…

Do you have changes locally that you want to get rid of so that you can get the latest version of code?

YES – open project root/frontend folder; right-click and select Open in Terminal

type git stash
type git pull origin dev

NO – open project root/frontend folder; right-click and select Open in Terminal

type git pull origin dev

4.2.3 Now that you have the latest code, check for node version.

Open the frontend folder in Atom {select the folder, right-click and select Open With > Atom}
Look at the bottom right corner of Atom and install updates if needed.
Confirm that you are on your branch also (bottom right corner of Atom).
Open package.json file, look for
Engines, node, and the version is there
Go back to the terminal; type node --version
Verify the version matches the version in the package.json file

If node versions do not match:

type nvm install node (this installs the latest version)
Type nvm alias default node (sets this new version of node as default for all locations)
type node --version (this verifies the versions again)

If still not matching, either update the package.json or downgrade the node version (ask the systems engineer for guidance - currently Josh Sherman).

If the node versions match, then continue:

IF working behind a corporate firewall, confirm .bowerrc was copied from master folder
type npm run cleaninstall

Note: the package.json file contains a list of the project dependencies

type npm start
Open Chrome and type http://localhost:9000
Verify that the webpage displays as expected.

Note: you may need to refresh the browser to see it.

You are now ready to begin coding the front-end.

4.3 Get the Backend Running on Localhost

This assumes you have already created the front end of the project.

4.3.1 IF you do not have any back-end code at all…

Go to the project repository in GitHub; select the Git Clone button, then click the clipboard icon.
From Ubuntu, navigate to the project root (one folder higher than the front end folder), open the terminal window, and type git clone {paste the url of repository to clone}
Back-end folder gets created; navigate inside of this new folder, right-click and select Open in Terminal.

Add any files that are needed but not included in the GitHub as follows:

.env file that contains credentials
.bowerrc file that is needed if working behind a corporate firewall

Verify that the postinstall.sh script has permissions to run:

navigate to the project BackEnd/frontend folder
right-click postinstall.sh, select Properties
select Permissions tab, go to the Execute: line
check “Allow executing file as program”; close the window
Right-click inside the folder and open it in a new terminal

4.3.1.1 The Backend .env Files

There are two .env files that are needed for running the app locally as follows:

.env placed at the root of the backend
.env that is placed inside of the backend/frontend (subfolder), which appears only after installing the backend.
Request the contents of the .env file from [email protected]

Use this as a starting point for the .env file:

PORT=9000
NODE_ENV=development
IP=http://localhost
BackendUrl=http://localhost:7000
GoogleClientId=
AllowUrl=
GoogleClientSecret=
MongoDB_URI=

4.3.2 IF you already have code and need to get the latest…

Do you have changes locally that you want to get rid of so that you can get the latest version of code?

YES – From Ubuntu, navigate inside of the backend folder; right-click and select Open in Terminal

type git stash
type git pull origin dev

NO – open project root/front-end folder; right-click and select Open in Terminal

type git pull origin master

4.4 Check for Node Version and install Packages

Open the back-end folder in Atom {select the folder, right-click and select Open With>Atom}
Open package.json file, look for:

engines: {
"node": [node version]

Go back to the back-end terminal; type node --version
Verify the version matches the version in the package.json file

If node versions do not match:

If still not matching, either update the package.json or downgrade the node version (ask the systems engineer for guidance - currently Josh Sherman).

If the node versions match then continue:

type npm install -g yarn
Type yarn install

If this is first time installing backend, then copy these files into BackEnd/frontend folder:

.env file (contains credentials)
.bowerrc file (only needed if working behind the corporate firewall)

Reinstall again: yarn install type npm start

You are now ready to begin coding the backend.