Building a Simple Weather App using the MySQL, Express, React, and Node.js Print

  • 1

Building a Simple Weather App using the MySQL, Express, React, and Node.js on DomainIndia.com Shared Hosting

Introduction:

In this tutorial, we will guide you through building a simple Weather App using the MySQL, Express, React, and Node.js on DomainIndia.com shared hosting with CloudLinux Node.js Selector. We will be using Visual Studio Code as our local development environment. By following this guide, you will learn how to set up the application, create routes, define models, connect to a database, and create the frontend with React components. Additionally, you will learn how to test the API, run the React app, and deploy the application.

Product URL: https://www.domainindia.com/web-site-hosting-india.php

1. Prerequisites:

Before starting this tutorial, make sure you have the following installed on your local machine:

- Node.js and npm: https://nodejs.org/en/download/
- Visual Studio Code: https://code.visualstudio.com/download
- A DomainIndia.com shared hosting account with CloudLinux Node.js Selector.

2. Setting Up the Application:

2.1. Create a new directory for your Weather App in your local system:


$ mkdir weather-app
$ cd weather-app

2.2. Initialize a new Node.js project:


$ npm init -y

2.3. Install the required dependencies:


$ npm install express mysql2 sequelize dotenv

2.4. Create a new file named "app.js":


$ touch app.js

2.5. Open the "weather-app" directory in Visual Studio Code.

3. Setting Up the Node.js Server:

3.1. In "app.js", import the required modules and set up a basic Express server:


const express = require("express");
const app = express();
const PORT = process.env.PORT || 3001;

app.use(express.json());

app.get("/", (req, res) => {
res.send("Welcome to the Weather App!");
});

app.listen(PORT, () => {
console.log(`Server is running on port ${PORT}`);
});

3.2. Test the server:


$ node app.js

Access http://localhost:3001 in your browser to see the "Welcome to the Weather App!" message.

4. Configuring the Database:

4.1. Create a new file named ".env" in your project's root directory:


$ touch .env

4.2. Add your MySQL database credentials to the ".env" file:


DB_HOST=localhost
DB_USER=your_mysql_username
DB_PASSWORD=your_mysql_password
DB_NAME=your_mysql_database_name

Replace the placeholders with your actual database credentials.

4.3. Install the "dotenv" package:


$ npm install dotenv

4.4. In "app.js", load the environment variables from the ".env" file:


require("dotenv").config();

5. Setting Up Sequelize:

5.1. Install the Sequelize CLI globally:


$ npm install -g sequelize-cli

5.2. Initialize Sequelize in your project:


$ sequelize init

5.3. Configure Sequelize to use your MySQL database by updating the "config/config.json" file:

json
{
"development": {
"username": "your_mysql_username",
"password": "your_mysql_password",
"database": "your_mysql_database_name",
"host": "localhost",
"dialect": "mysql"
},
"test": {
...
},
"production": {
...
}
}

Replace the placeholders with your actual database credentials.

6. Creating the Models:

6.1. Create a new model named "Weather":


$ sequelize model:create --name Weather --attributes location:string,temperature:integer

This command will generate a new "Weather" model with the specified attributes and a migration file.

6.2. Run the migrations to create the corresponding table in your MySQL database:


$ sequelize db:migrate

7. Creating the Routes:

7.1. In your "app.js" file, create a route for fetching weather data:


const Weather = require("./models/weather");

app.get("/weather", async (req, res) => {
try {
const weatherData = await Weather.findAll();
res.json(weatherData);
} catch (error) {
res.status(500).json({ message: "Error retrieving weather data." });
}
});

8. Testing the API:

You can use a tool like Postman or curl to test your API endpoints. For example, to test the "/weather" endpoint:


$ curl http://localhost:3001/weather

9. Creating the Frontend:

9.1. In your project's root directory, create a new React app:


$ npx create-react-app client

9.2. Change to the "client" directory:


$ cd client

9.3. Install the Axios library to make HTTP requests:


$ npm install axios

10. Creating the React Components:

10.1. In the "client/src" directory, create a new "WeatherList.js" file to display the weather data:


import React, { useState, useEffect } from "react";
import axios from "axios";

const WeatherList = () => {
const [weatherData, setWeatherData] = useState([]);

useEffect(() => {
const fetchWeatherData = async () => {
const response = await axios.get("/weather");
setWeatherData(response.data);
};

fetchWeatherData();
}, []);

return (
<div>
<h1>Weather Data</h1>
<ul>
{weatherData.map((weather) => (
<li key={weather.id}>
{weather.location}: {weather.temperature}°C
</li>
))}
</ul>
</div>
);
};

export default WeatherList;

10.2. Update the "client/src/App.js" file to include the "WeatherList" component:


import React from "react";
import WeatherList from "./WeatherList";

function App() {
return (
<div className="App">
<WeatherList />
</div>
);
}

export default App;

11. Running the React App:

11.1. In the "client" directory, start the React development server:


$ npm start

Access http://localhost:3000 in your browser to see the weather data displayed in your React app.

12. Deploying the Application on DomainIndia.com cPanel with CloudLinux Shared Hosting:

To deploy your Node.js and React applications on DomainIndia.com cPanel Hosting platform using CloudLinux Node.js and MySQL, follow these steps:

12.1. Prepare your backend for deployment:

- Make sure your Node.js server listens to the `process.env.PORT` variable, as the hosting environment will provide the actual port number.
- Ensure your `.env` file contains the correct credentials for your remote MySQL database.
- Add a new "start" script in your "package.json" file under "scripts":

json
"scripts": {
"start": "node app.js",
...
}

12.2. Prepare your React frontend for deployment:

- Change the API URL in your React components to point to your actual backend URL. For example, in your "WeatherList.js" file:


const response = await axios.get("https://your-backend-url/weather");

- Replace `your-backend-url` with the actual URL of your Node.js server.

- In the "client" directory, build your React app:


$ npm run build

This will create a "build" directory containing the production-ready frontend assets.

12.3. Upload your backend and frontend files to your cPanel account:

- Compress your backend files, including the "app.js", "models", "config", "migrations", and ".env" files, into a single archive (e.g., "backend.zip").
- Upload the "backend.zip" archive to your cPanel account's file manager and extract it to a desired directory (e.g., "public_html/weather-app-backend").
- Upload the contents of the "client/build" directory to your desired frontend directory (e.g., "public_html/weather-app").

12.4. Configure Node.js in cPanel:

- In your cPanel dashboard, navigate to the "Software" section and click on "Setup Node.js App".
- Click on the "Create Application" button.
- Select the desired Node.js version and set the "Application mode" to "Production".
- Set the "Application root" to the directory containing your backend files (e.g., "public_html/weather-app-backend").
- Set the "Application URL" to the corresponding URL of your backend directory.
- Set the "Application startup file" to "app.js".
- Click on the "Create" button.

12.5. Install your backend dependencies:

- In the "Node.js Selector" interface, click on the "NPM Install" button to install your backend dependencies.

12.6. Start your Node.js server:

- Click on the "Run JS Script" button and enter "start" in the input field to start your Node.js server.

At this point, your Weather App should be successfully deployed and accessible via your domain. Visit the frontend URL (e.g., "https://your-domain.com/weather-app") to access the Weather App.

Conclusion:

In this tutorial, you learned how to build a simple Weather App using the MER(N) stack on DomainIndia.com shared hosting with CloudLinux Node.js Selector. By completing this tutorial, you have gained experience in setting up the application, creating routes, defining models, connecting to a database, and creating the frontend with React components. Additionally, you learned how to test the API, run the React app, and deploy the application. This foundational knowledge will serve as a


Was this answer helpful?

« Back