Full Stack React — Part 1(React, GraphQL, Express, MongoDB)

Episode 1: Setup project (Evernote Clone)

Photo by Caspar Camille Rubin on Unsplash

In this episode, we work on getting our project created and our server up and running properly.

Create a folder structure

STEP 1: Create a folder named evernoteclone (no spaces) — either on the terminal with the command mkdir evernoteclone or create one manually from the desktop.

STEP 2: Drag and drop that directory into the code editor(I’m using vscode, you can choose whatever you like)

STEP 3: Either use your terminal or built-in terminal from the editor and run the command cd evernoteclone once you’re inside that directory, create a server.js file. Then run the command npx create-react-app client this will create a react app, we named it client. This folder and the server.js file should be inside your evernoteclone folder.

Once you have these, your folder structure should now look like this →

evernoteclone > server.js & client/

Install packages needed

STEP 1: Create a package.json`file in the main directory (evernoteclone folder). After, create a start script like this → "start": nodemon server.js

Package.json file →

{
"name": "testtest",
"version": "1.0.0",
"description": "",
"main": "server.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "nodemon server.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"cors": "^2.8.5",
"express": "^4.17.1",
"express-graphql": "^0.8.0",
"graphql": "^14.4.1",
"mongoose": "^5.6.2"
}
}

STEP 2: Be sure to be inside the evernoteclone directory and run either npm i express graphql express-graphql nodemonor yarn add express graphql express-graphql nodemon in the terminal of your choosing. This will install the packages inside our package.json file, later on, we’ll install mongoose.

Setup Server

STEP 1: inside server.js require express and create an express app→

const express = require("express");
const app = express();

STEP 2: Create a simple route that returns a “Hello, it's working” string→

app.use("/hello", (req, res) => {
res.send("Hello, its world");
});

STEP 3: Listen to our app on port 5000→

const PORT = 5000;
app.listen(PORT, () => {
console.log("server is running");
});

Final Code:

when your server.js file looks like this, you can now test to make sure your server is working by running the command npm start or yarn start

const express = require("express");
const app = express();
app.use("/hello", (req, res) => {
  res.send("Hello, its world");
});
const PORT = 5000;
app.listen(PORT, () => {
  console.log("server is running");
});

If you would like to watch the video version, you can watch it here: https://youtu.be/dmvXt_GlPLA