RFR Section 4 – Working with a Real Back-End


React

Updated Mar 14th, 2022

Table of Contents

Course Summary

Chapter Details

22. Getting a Database Ready

This section not meant to be educational. Want to use back-end so it is realistic project but we will not build in this course.

MongoDB is the database of choice.

Create free account

Create a new cluster and click collections. Click add my own data and create a database named “react course” and a “users” collection

Configure things so a backend server can communicate.

Click cluster and then click connect. We want to whitelist all IP addresses.

Create new user and make sure you have access to your password.

Click connect your application and make sure node driver is selected. The connection string is what we are after. Paste into VSCode and swap out <password> with your password and and test for your database name.

23. Solution to Common Database Problem

Careful using password generator when creating database user.

24. Note About a Common Misspelling

JWTSECRET is very easy to mispell

25. Running The Back-End

Open a second VSCode window and

In the course repo clone or download “backend-api” folder and put alongside (not inside) your project file.

Create a new .env file and add CONNECTIONSTRING, PORT, and JWTSECRET variables. 8080 is good for the port. Connecting string is from Atlas. Any reasonable string will do for the secret.

Npm run start command the. Go to localhost:8080 and if you visit you will see a message “back-end is running”