How to setup MERN stack Frontend and Appsync Backend.

code, coding, computer-1839406.jpg


The technical interview assignment requires environment to be setup for frontend and backend. Below are the steps to setup frontend and backend.

Once the environment is setup is completed, you will be given the technical interview assignment.

Prerequisite 1: Provide your github id. Access to 2 repos will be provided to you

Prerequisite 2: Mongodb user and pwd

Use this to clone mongodb daatabase required in step 2.2

Prerequisite 3: aws access 

use this to aws cli configuration – step 3.3

$ aws configure
AWS Secret Access Key [None]: wJalrXUtnFEMI/K7MDENG/bPxRfiCYEXAMPLEKEY
Default region name [None]: us-west-2
Default output format [None]: json

Also, Use this to login to setup codepipeline for your branch, step 3.4 and step 4.4

Post your questions in the comments section


Step 1

Step 1:

0.1 Signup with your email and password on (don’t use social sign in because
you will need your email and password while testing your Appsync Graphql API in after step 3)

Make sure you create account on before you clone the mongodb in step 2.

How to get your stage name? 

<branch-name>  = firstname+first letter of last name (example: sumij)
<project-name>  = vijaa
<satge> = prod - <branch name> - vijaa (eample: prod-sumij-vijaa)

This is the name for your mongodb database that you will be using in step 2, app sync api name in step 3.2

step 2

2 Clone Database- this step is to setup mongodb database for your branch on mongodb cloud

2.1 Check if you have installed mongodb shell

run this command in terminal

mongo -version
Screenshot 2021-07-31 at 6 12 17 PM

If you don’t have then you can download mongodb shell from here
2.2 Clone the master database

Don’t run this command in repository folders (you can run this on desktop)
Run this command to clone the database (use your own mongo-username and mongo-password – this is provided to you in whatsapp group)

mongodump --uri mongodb+srv://<your-mongo-username>:<your-mongo-password>

This command will create a new dump folder inside the folder you ran this command in

Screenshot 2021-07-31 at 5 44 14 PM

Inside dump folder their will be a prod-master-vijaa folder

Screenshot 2021-12-10 at 7 06 11 PM

You have to rename this folder to replace “master” in “prod-master-vijaa” with your branch name. (Example prod-sumij-vijaa). This is same as the <stage> from step 1.

Screenshot 2021-12-10 at 7 07 35 PM

Then run this command in same folder were you ran the 1st command. This will copy your local mongodb to cloud mongodb. 

mongorestore --uri mongodb+srv://<your-mongo-username>:<your-mongo-password>

You completed creating mongodb database “prod-<branch name>-vijaa” on mongodb cloud. Verify this by using mongodb compass.


step 3

3 Setup Backend (GraphQL, AWS AppSync, MongoDB)

You can learn about aws appsync here

3.1 Clone repository on your local

git clone [email protected]:Codemarket2/vijaa-backend.git

3.2 Create your new github branch ( if don’t have one already). 

git checkout -b <branch-name> (branch name = first name + first letter of last name. example sumij)
git push origin <branch-name>

3.2.a Install dependencies. 

yarn install

3.2.b add mongo db user details to

.env file (make a copy of sample.env and rename it to .env)

Backend connects to Mongodb using the mongodb user and pwd in the file .env

MONGO_USERNAME=<your-mongodb-username> (use the value given to you in whatsapp group)
MONGO_PASSWORD=<your-mongodb-password> (use the value given to you in whatsapp group)
GRAPHQL_API_URL=<your-graphql-api-url> (at this stage this value is empty, after backend is deployed you will get value for this)
GRAPHQL_API_KEY=<your-graphql-api-key> (at this stage this value is empty, after backend is deployed you will get value for this)

Your mongodb username password are used

DATABASE: `mongodb+srv://${process.env.MONGO_USERNAME}:${process.env.MONGO_PASSWORD}${scope.stage}?retryWrites=true&w=majority`,

Leave a Comment

Your email address will not be published. Required fields are marked *