This content originally appeared on Level Up Coding - Medium and was authored by William Pepple
Have you ever wondered how to run the front-end and backend parts of your full-stack apps at the same time? Hold my coffee and let’s dive into it.
Let’s say you are building a full-stack app, using React on the front-end and Nodejs & ExpressJs on the backend. The first step to do is to create the directory you want your project to be in.
After this is done, you can either keep writing the next series of commands or open the directory with your code editor. you can do that by checking into the directory with the command: “cd folder-name ”, then enter “code .”
The next step is to open the terminal right in the code editor, to do this, hold CTRL + J together.
The next thing to do is to initialize our project, in your terminal, enter “npm init -y”
You can edit the package.json file later, so for our frontend, let’s use React. In the same directory, enter the following command: “npx create-react-app@latest frontend”. “frontend” is an arbitrary word I want to use to name our frontend app, you can name it however you like.
For the purpose of this tutorial, we won’t be creating a full-stack app with APIs and features, the goal is to make the backend and frontend run simultaneously. That being noted, let’s create a backend folder, to do that in the project root folder, enter “mkdir backend”. Once again “backend” is an arbitrary word.
Just like we did in the root directory, let’s initialize the backend folder,
check into the backend directory and enter “npm init -y”
Just to get it functioning. create a file in the Backend folder, call it index.js and write something in it, something simple like “Hello World”.
You can test if it works by running “node index.js” in the terminal, as you can see in the image above, it ran. now that’s done, let’s go into the package.json file in the backend folder, not the one in the root directory, add a start script just as seen below:
To test it, in the backend folder, enter “npm start”.
So let’s create a simple connection, install express and nodemon, express will be a dependency and nodemon will be a devdependency, to check the difference between a dependency and a devdependency, check the following link: https://stackoverflow.com/questions/18875674/whats-the-difference-between-dependencies-devdependencies-and-peerdependencies
Let’s install express and nodemon, for express, “npm i express” will suffice, and for nodemon, “npm i nodemon -D” will install it, ensure you are still in the backend directory. you will see the following result:
In the index.json file, type the following code:
Line 16 -18 simply created a simple API for us with a response message at localhost:5000, to test the simple API, let’s go to localhost:5000 on our browser, you should see the following:
Now, let’s use nodemon, nodemon is simply used for hot reloading, hot reloading restarts our server whenever we save a file or make a change while developing instead of having to restart manually it every time. To implement it, go to your package.json and replace “node” in our start script with “nodemon”.
Now that’s settled, let’s focus on kickstarting the backend and frontend simultaneously. I omitted doing that for the frontend because “create-react-app” comes with a template of scripts that we can use, “npm start” works for react.
let’s go to the root directory of the project, to do that, enter the following: “cd ../” in the backend directory, this will lead us to the root directory.
While at the root directory, let’s install “concurrently”, it is the npm package that will help us run the backend and frontend at the same time. after that is done, go to the package.json in your root folder and type the following in your scripts section:
I will explain what the server, client and dev scripts mean synchronously.
The “server” script represents the command to start the server, in the backend package.json, we already specified it, the “- -prefix” instructs the code to run the command in the backend directory, the same thing occurs in the “client” script, the command is to ensure the frontend app starts. the command “npm run dev” will run the “dev” script, it uses the “concurrently” keyword to simultaneously run the two scripts as seen below:
For React, the default port is 3000, we chose 5000 for our backend server. after you’ve run the script, check http://localhost:3000 and http://localhost:5000 in your browser separately, you will see the frontend and backend instances running simultaneously.
I am William Pepple, thank you for coming to my Ted Talk.😃♥️
How to simultaneously run the client and server instances of your full-stack app in one folder. was originally published in Level Up Coding on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Level Up Coding - Medium and was authored by William Pepple
William Pepple | Sciencx (2022-04-17T16:56:15+00:00) How to simultaneously run the client and server instances of your full-stack app in one folder.. Retrieved from https://www.scien.cx/2022/04/17/how-to-simultaneously-run-the-client-and-server-instances-of-your-full-stack-app-in-one-folder/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.