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

--

--

--

A passionate web developer

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ajea Smith

Ajea Smith

A passionate web developer

More from Medium

Using API Gateway Web Socket API with React, Redux and “Serverless” :: Part 01

Stripe Integration to NestJs and React App

Why Should I Use Node.js?

Localhost Cookies: How to Divide and Rule Them All.