Full Stack React — Part 1(React, GraphQL, Express, MongoDB)
Episode 1: Setup project (Evernote Clone)
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 nodemon
or 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