Skip to content
Joshua V Sherman edited this page Mar 23, 2020 · 6 revisions

Getting Started

In order for our apps to run, you'll first need to clone web-jam-back. After opening it up in your code editor, create a file named '.env' and copy the contents of the file '.env.example' to it. All of our projects have something similar and won't build correctly without this.

In a cmd prompt, locate where you stored web-jam-back and run 'yarn install' to install the initial files and then run 'yarn start' when it's finished to start up the back. This is crucial for our other projects to run and load things properly.

For our front end, we have a few projects, but they all will follow the same logic (except JaMmusic that requires another step.)

Clone JaMmusic and create the .env file and copy over the .env.example file, open a cmd prompt, locate the file, and initiate it with yarn install and yarn start (Like the back end). If you're working on JaMmusic, you'll also need to clone WebJamSocket which is our socket cluster client.

In order to initiate things in the admindashboard portion of our projects, you'll need to email Joshua at joshua.v.sherman@gmail.com (so that he can add you as a developer in the database.)

To login to our projects, simply run the backend and frontend and locate the Google Login button to the right side of the screen, in the menu. You'll need a gmail account to log in as of right now.

If you have any issues with any of this, feel free to contact Joshua by email or on GitHub.

.env Global Environment Variables

For some of the environments, you'll need to set up a few things yourself (Such as the hashstring and GoogleClientId).

Setting up a hashstring is simple - It's a set of characters you designate! For example, a 20 character code generated by LastPass could be used. Just make sure that it's difficult to guess and you keep it secret.

In order to setup a oAuthClientID, you'll need to head on over to Google's Developer Console.

Make sure you're logged into your developer account using a gmail account, and click on "Credentials." From there, click >"Create Credentials" >"OAuth Client ID."

Select "Web Application."

Fill out a name for the application (Either a made up name, or your company name, this is just an identifier for the ID), and move on to setting up the URLs.

Depending on where your site is being hosted, there's a number of different ways to go about this. Our application is based on heroku, so I'm going to use that as an example.

For "Authorized JavaScript origins", you're going to want to list the front-end and back-end links to your application, as well as the port number you're using for local development.

IE: "https://[front-end].heroku-app.com", "http://[front-end].heroku-app.com", "https://[back-end-master].heroku-app.com", "http://[back-end-master].heroku-app.com", "http://localhost:9000"

For "Authorized redirect URIs", you're going to want to include your back-end master, back-end developer, and local development URIs.

IE: "https://[back-end-master].heroku-app.com", "http://[back-end-master].heroku-app.com", "https://[back-end-dev].heroku-app.com", "http://[back-end-dev].heroku-app.com", "http://localhost:7000"

This will give you the GoogleClientId for the .env file as well as the GoogleSecret (Used in the web-jam-back .env file)

Help! I installed everything, but I'm getting a ton of errors when I run it!

The most likely errors are due to not running everything that's required for the project. Our project requires a Socket Cluster Client to be running in order to connect some parts together. If you're getting the error, for example, Uncaught TypeError: scc.on is not a function or Uncaught (in promise) TypeError: scc.on is not a function you should clone WebJamSocket and run it in conjunction with the front end.

Some other errors might occur if you don't have a .env file setup. Our projects include a file named .env.example that includes some base examples of variables needed to properly run the projects. Simply make a file named .env and copy the contents of the .env.example file over to it prior to running the project. These two things will fix the majority of problems from a fresh install.

One last thing that's needed is the backend. Some portions of the site rely on examples from our development database, and without the back end running, they won't function properly. Simply clone web-jam-back and run it in conjunction with the Socket Cluster Client and front end project you're working on. Remember to create .env files from the examples provided for each project too, to prevent other errors!