How to Clone a GitHub Repo (and Set Up Your Own DB for a CRUD App)

·

4 min read

Update: If you're from #100Devs, please be sure to fork Leon's repo first, and then clone it, because we will need to make a pull request to submit our group project!

If you are new to cloning public repo from GitHub, or need a cheatsheet of the steps, I've got (too) many screenshots showing you and reminding myself how to do so. :)

Screen Shot 2022-08-30 at 6.36.04 PM.jpg

Step 2. Set up directory and open in VS Code.

Open the terminal, create a folder where you plan to clone the code files to, use command "code ." to open the folder in VS Code.

Screen Shot 2022-08-30 at 6.37.21 PM.jpg

Step 3. Clone code.

Open a new terminal in VS Code. Click on the Terminal -> New Terminal, or use short cut "control + shift + `", then write in command "git clone" and paste the link you copied in Step 1.

Screen Shot 2022-08-30 at 6.38.32 PM.jpg

Step 4. Install Node Packages.

In the terminal, cd into the new directory (you just cloned), and write command "npm install" or "npm i" for short.

Screen Shot 2022-08-30 at 6.41.34 PM.jpg

Step 5. Create DB.

Log in or sign up for Mongo Atlas.

Screen Shot 2022-08-30 at 6.49.35 PM.jpg

Step 6. Create a project.

Go to Projects -> Create a Project -> name your project (I named mine "Group-project") -> Click "Next"

Screen Shot 2022-08-30 at 6.50.37 PM.jpg

You could add members and set permissions. Or just leave the default and click "Create Project".

Screen Shot 2022-08-30 at 6.51.06 PM.jpg

Step 7. Build a Database.

Now go into the project you just created, and click "Build a Database".

Screen Shot 2022-08-30 at 6.51.27 PM.jpg

Step 8. Deploy a Database.

Choose the free plan (unless you need a paid plan for your project).

Screen Shot 2022-08-30 at 6.51.40 PM.jpg

Step 9. Create a Cluster.

Again, make sure it's the free/shared cluster, I chose AWS and Oregon as my region (as I live in California but I don't think it matters that much--if I'm wrong, please enlighten me!), then, click "Create Cluster".

Screen Shot 2022-08-30 at 6.52.28 PM.jpg

Authenticate your cluster by setting a username and password (save the password somewhere safe), then, click "Create User".

Screen Shot 2022-08-30 at 6.54.02 PM.jpg

The second step is to set IP Address. Choose "My Local Environment" (should be selected by default) and click on "Add My Current IP Address".

Screen Shot 2022-08-30 at 11.04.17 PM.jpg

You should now see your IP address listed (I blurred mine). Click "Finish and Close".

Screen Shot 2022-08-30 at 11.04.40 PM.jpg

Yay! Click "Go to Database"

Screen Shot 2022-08-30 at 11.05.00 PM.jpg

You should be redirected (if not, just go back) to the Database Deployments page, and the "Loading" may take a while.

Screen Shot 2022-08-30 at 6.54.46 PM.jpg

Step 10. Connect.

When it finishes loading, click "Connect".

Screen Shot 2022-08-30 at 6.58.16 PM.jpg

Click "Connect your application".

Screen Shot 2022-08-30 at 6.59.29 PM.jpg

Copy the connection string and click "Close".

Screen Shot 2022-08-30 at 7.00.02 PM.PNG

Step 11. Paste your connection string in the .env file.

Comment out or just replace the DB_STRING in the .env file in the config folder. Replace "" with the password you set and saved earlier in Step 9. update: #100devs, you can add 'todo' right before the '?' as Leon did to name the database. Remember the PORT number in this .env file. You can change it if you want to.

Screen Shot 2022-08-30 at 11.27.22 PM.jpg

Step 12. Let's run the app!

If you go to package.json, you'll notice in the "scripts", nodemon server.js is set to "start". This means that for us to run nodemon, we simply need to write in the terminal the comman "npm start" (make sure you cd'ed into the correct directory, in my example, the todo-mvc-auth-local directory).

Screen Shot 2022-08-30 at 6.42.03 PM.PNG

Step 13. Now check the port!

If your nodemon started, server is running, and DB got connected, open the browser and check "localhost: 2121" (or, the number you changed to), you'll be able to view and use the app locally! Have fun testing and playing with the code and database! All data will be saved in your own DB collection.

Screen Shot 2022-08-30 at 7.09.18 PM.jpg

All code can be found here and thanks to Leon Noel (twitter @leonnoel) and 100Devs.