Land Node (MERN)How to Build a Full Stack Application with MySQL

Node.js, Express, React, and MySQL – also known as the MERN stack – is a powerful combination of technologies that allows developers to build full stack web applications efficiently. In this article, we will walk you through the process of building a full stack application using Node.js for the backend, React for the frontend, and MySQL for the database.

Setting up the Backend with Node.js and Express
The first step in building a full stack application with the MERN stack is setting up the backend with Node.js and Express. Node.js is a runtime environment that allows you to run JavaScript on the server, while Express is a minimal and flexible Node.js web application framework.

To get started, create a new directory for your project and run the following commands to initialize a new Node.js project and install Express:

mkdir my-app

cd my-app

npm init -y

npm install express

Next, create a new file called server.js and add the following code to create a simple Express server:

const express = require('express');

const app = express();

const PORT = 5000;



app.get('/', (req, res) => {

  res.send('Hello World');

});



app.listen(PORT, () => {

  console.log('Server is running on port ' + PORT);

});

Run the server by running the following command:

node server.js

You should see the message "Server is running on port 5000" in the console. Your backend server is up and running!

Connecting to MySQL
Next, we need to set up a MySQL database and connect it to our Node.js server. Install the mysql package by running the following command:

npm install mysql

In your server.js file, add the following code to connect to your MySQL database:

const mysql = require('mysql');



const connection = mysql.createConnection({

  host: 'localhost',

  user: 'root',

  password: 'password',

  database: 'my_database'

});



connection.connect((err) => {

  if (err) {

    console.error('Error connecting to database: ' + err.stack);

    return;

  }

  console.log('Connected to database');

});

Replace the host, user, password, and database fields with your own MySQL database credentials.

Building the Frontend with React
Now that we have our backend set up and connected to our MySQL database, let’s move on to building the frontend with React. Create a new directory called client inside your project directory and run the following commands to initialize a new React project:

npx create-react-app client

cd client

npm start

This will start a development server for your React frontend, which you can access at http://localhost:3000.

In your React application, you can make API requests to your Node.js server to fetch data from your MySQL database. You can use libraries like Axios or the built-in fetch API to make these requests.

Conclusion
In this article, we have covered the basics of building a full stack application with the MERN stack and MySQL. You have learned how to set up a Node.js backend server, connect it to a MySQL database, and build a React frontend to interact with your backend server.

This is just the starting point for building full stack applications with the MERN stack. There are many advanced features and concepts to explore, such as authentication, routing, state management, and more. With some practice and experimentation, you can build powerful and interactive web applications with the MERN stack and MySQL.