Building a Simple Event Management App with MERN Stack on AlmaLinux 8.6 using DomainIndia VPS and Visual Studio Code
Introduction:
In this tutorial, we will guide you through building a simple Event Management App using the MERN stack (MongoDB, Express, React, and Node.js) on an AlmaLinux 8.6 VPS from DomainIndia.com. 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.
Prerequisites:
- A DomainIndia.com VPS with AlmaLinux 8.6 installed
- Basic knowledge of JavaScript, Node.js, Express, React, and MongoDB
- Visual Studio Code installed on your local machine
- Node.js and NPM installed on your local machine
- MongoDB installed on your VPS
1. Setting Up the Application:
1.1. Create a new directory for your project and open it in Visual Studio Code.
$ mkdir event-management-app
$ cd event-management-app
$ code .
1.2. Initialize a new Node.js project with the following command:
$ npm init -y
1.3. Install the required dependencies:
$ npm install express mongoose dotenv cors
2. Setting Up the Node Server:
2.1. Create a new file named "server.js" in your project directory and add the following code to set up a basic Express server:
javascript
const express = require("express");
const dotenv = require("dotenv");
const cors = require("cors");
dotenv.config();
const app = express();
app.use(cors());
app.use(express.json());
const PORT = process.env.PORT || 5000;
app.listen(PORT, () => {
console.log(`Server is running on port ${PORT}`);
});
3. Creating the Routes:
3.1. Create a new directory named "routes" and create a file named "events.js" within it. Add the following code to define routes for managing events:
javascript
const express = require("express");
const router = express.Router();
// Import the event controller
const eventController = require("../controllers/events");
// Define the routes
router.get("/", eventController.getAllEvents);
router.post("/", eventController.createEvent);
router.get("/:id", eventController.getEventById);
router.put("/:id", eventController.updateEvent);
router.delete("/:id", eventController.deleteEvent);
module.exports = router;
3.2. Update "server.js" to use the event routes:
javascript
const eventRoutes = require("./routes/events");
app.use("/api/events", eventRoutes);
4. Defining the Models:
4.1. Create a new directory named "models" and create a file named "Event.js" within it. Add the following code to define the Event schema using Mongoose:
javascript
const mongoose = require("mongoose");
const EventSchema = new mongoose.Schema({
title: {
type: String,
required: true,
},
description: {
type: String,
required: true,
},
date: {
type: Date,
required: true,
},
location: {
type: String,
required: true,
},
});
module.exports = mongoose.model("Event", EventSchema);
5. Connecting to a Database:
5.1. Update your ".env" file with the following environment variables:
MONGODB_URI=mongodb://username:password@your-vps-ip:27017/event-management-db
PORT=5000
5.2. Update "server.js" to connect to the MongoDB database:
javascript
const mongoose = require("mongoose");
mongoose.connect(
process.env.MONGODB_URI,
{ useNewUrlParser: true, useUnifiedTopology: true, useFindAndModify: false },
() => console.log("Connected to MongoDB")
);
6. Testing the API:
6.1. Install Postman or any other API testing tool to test your API endpoints.
6.2. Run the server by executing the following command:
$ node server.js
6.3. Test the various CRUD operations using the following endpoints:
- GET: http://localhost:5000/api/events
- POST: http://localhost:5000/api/events
- GET: http://localhost:5000/api/events/:id
- PUT: http://localhost:5000/api/events/:id
- DELETE: http://localhost:5000/api/events/:id
7. Creating the Frontend:
7.1. Install the "create-react-app" package globally:
$ npm install -g create-react-app
7.2. Create a new React application:
$ create-react-app client
7.3. Change to the "client" directory and install the required dependencies:
$ cd client
$ npm install axios react-router-dom
8. Running the React App:
8.1. In the "client" directory, start the React development server:
$ npm start
8.2. Open your browser and navigate to http://localhost:3000 to see your React app.
9. Creating the React Components:
9.1. Create the necessary components, such as "EventList", "EventForm", and "EventDetails", to display and manage events.
9.2. Use React hooks, such as "useState" and "useEffect", to manage the state of your components.
9.3. Use "axios" to send requests to the API endpoints you've created earlier.
9.4. Implement routing using "react-router-dom" to navigate between different pages of your application.
In this tutorial, we have walked you through the process of building a simple Event Management App using the MERN stack on an AlmaLinux 8.6 VPS from DomainIndia.com. We have shown you how to set up the application, create routes, define models, connect to a database, and create the frontend with React components. With this knowledge, you can now continue to expand your application or build other projects using the MERN stack.
10. Deploying the Application:
Once you have developed your Event Management App, the next step is to deploy it on your DomainIndia.com VPS. Follow the steps below to do so:
10.1. Build your React app for production:
$ cd client
$ npm run build
10.2. Install the "serve" package globally:
$ npm install -g serve
10.3. Test the production build locally:
$ serve -s build
10.4. Access your app at http://localhost:5000 to ensure everything works as expected.
10.5. Transfer your project files to your VPS using SSH & GIT, SCP or an FTP client like FileZilla.
Access to the command line via SSH
Familiarity with Git and GitHub
10.6. On your VPS, install Node.js, NPM, and MongoDB following the official guides:
- Node.js and NPM: https://nodejs.org/en/download/package-manager/#enterprise-linux-and-fedora
- MongoDB: https://docs.mongodb.com/manual/tutorial/install-mongodb-on-red-hat/
10.7. Install PM2, a process manager for Node.js, to run your application as a service:
$ npm install -g pm2
10.8. Start your Node.js server using PM2:
$ cd /path/to/your/event-management-app
$ pm2 start server.js --name event-management-app
10.9. Configure PM2 to start your application on system boot:
$ pm2 startup
$ pm2 save
10.10. Set up Nginx as a reverse proxy:
10.10.1. Install Nginx:
$ sudo dnf install nginx
10.10.2. Create a new Nginx configuration file for your application:
$ sudo nano /etc/nginx/conf.d/event-management-app.conf
10.10.3. Add the following configuration to the file, replacing "your-domain.com" with your actual domain name:
nginx
server {
listen 80;
server_name your-domain.com;
location / {
proxy_pass http://localhost:5000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_set_header Host $host;
}
}
10.10.4. Test the Nginx configuration:
$ sudo nginx -t
10.10.5. Reload Nginx:
$ sudo systemctl reload nginx
10.11. Configure your domain's DNS settings to point to your VPS's IP address.
10.12. Access your application using your domain name.
With these steps completed, your Event Management App is now deployed on your DomainIndia.com VPS and accessible via your domain name. You can further improve your application by implementing features such as user authentication and authorization, email notifications, and more. The possibilities are endless as you continue to learn and develop using the MERN stack.
11. Securing Your Application with HTTPS:
Securing your application with HTTPS is essential to protect user data and improve the overall security of your application. In this section, we will guide you through obtaining an SSL certificate from Let's Encrypt using Certbot and configuring Nginx to serve your application over HTTPS.
11.1. Install Certbot:
$ sudo dnf install epel-release
$ sudo dnf install certbot
11.2. Install the Nginx plugin for Certbot:
$ sudo dnf install python3-certbot-nginx
11.3. Obtain an SSL certificate for your domain:
$ sudo certbot --nginx -d your-domain.com
Replace "your-domain.com" with your actual domain name. Follow the on-screen prompts to complete the process.
11.4. Update your Nginx configuration file to serve your application over HTTPS:
Open the configuration file you created in the previous section:
$ sudo nano /etc/nginx/conf.d/event-management-app.conf
Update the configuration as follows:
nginx
server {
listen 80;
server_name your-domain.com;
return 301 https://$host$request_uri;
}
server {
listen 443 ssl;
server_name your-domain.com;
ssl_certificate /etc/letsencrypt/live/your-domain.com/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/your-domain.com/privkey.pem;
ssl_protocols TLSv1.2 TLSv1.3;
ssl_ciphers 'TLS_AES_128_GCM_SHA256:TLS_AES_256_GCM_SHA384:TLS_CHACHA20_POLY1305_SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-RSA-AES256-GCM-SHA384';
location / {
proxy_pass http://localhost:5000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_set_header Host $host;
}
}
11.5. Test the Nginx configuration:
$ sudo nginx -t
11.6. Reload Nginx:
$ sudo systemctl reload nginx
11.7. Set up automatic certificate renewal:
Certbot will automatically renew your SSL certificate when it is close to expiring. To ensure that Nginx picks up the renewed certificate, create a renewal hook script:
$ sudo nano /etc/letsencrypt/renewal-hooks/deploy/reload-nginx.sh
Add the following content to the script:
#!/bin/bash
systemctl reload nginx
Make the script executable:
$ sudo chmod +x /etc/letsencrypt/renewal-hooks/deploy/reload-nginx.sh
Your Event Management App is now served over HTTPS, and all HTTP requests will be redirected to HTTPS. This ensures that your users' data is transmitted securely, and your application complies with best security practices.
By completing this tutorial, you have learned how to build, deploy, and secure a simple Event Management App using the MERN stack on a DomainIndia.com VPS with AlmaLinux 8.6. As you continue to develop your skills, you can enhance your application with additional features and improve its overall performance and security.
12. Implementing User Authentication and Authorization:
To make your Event Management App more robust, you can add user authentication and authorization features. By implementing these features, you can restrict access to certain functionalities, such as creating, updating, or deleting events, to registered users only. In this section, we will provide a brief overview of how to add authentication and authorization to your app using JSON Web Tokens (JWT).
12.1. Install required dependencies:
$ npm install jsonwebtoken bcryptjs
12.2. Create a User schema and model:
Create a new file named "User.js" in the "models" directory with the following schema:
javascript
const mongoose = require("mongoose");
const bcrypt = require("bcryptjs");
const UserSchema = new mongoose.Schema({
username: {
type: String,
required: true,
unique: true,
},
email: {
type: String,
required: true,
unique: true,
},
password: {
type: String,
required: true,
},
});
UserSchema.pre("save", async function (next) {
if (!this.isModified("password")) {
return next();
}
const salt = await bcrypt.genSalt(10);
this.password = await bcrypt.hash(this.password, salt);
});
UserSchema.methods.comparePassword = function (candidatePassword) {
return bcrypt.compare(candidatePassword, this.password);
};
module.exports = mongoose.model("User", UserSchema);
12.3. Create user authentication routes and controllers:
Create a new "auth.js" file in the "routes" directory and a corresponding "authController.js" file in the "controllers" directory. Implement the following functionalities:
- Register a new user
- Log in an existing user
- Authenticate and authorize users using JWT
12.4. Protect your event routes:
Update your event routes to require user authentication by creating a middleware function to verify the JWT.
12.5. Implement user authentication on the frontend:
Create new components and routes for user registration and login, and update the existing components to require authentication for certain actions.
12.6. Store JWTs securely on the client-side:
Use a secure method, such as HttpOnly cookies, to store JWTs on the client-side, and pass them along with requests to your server.
By implementing user authentication and authorization, you can restrict access to certain parts of your application and provide a more personalized experience for your users. This also helps to improve the security of your application by preventing unauthorized users from performing actions that could compromise data integrity.
As you continue to develop your Event Management App, consider exploring other advanced features and optimizations, such as integrating a caching mechanism like Redis, implementing real-time event updates with WebSockets, or even containerizing your application with Docker. Keep learning and experimenting to discover new ways to improve your application's performance, security, and user experience.
13. Real-time Event Updates with WebSockets:
Integrating real-time event updates can enhance your Event Management App by providing users with up-to-date information on events as they happen. In this section, we will outline the steps to add real-time updates using WebSockets and the Socket.IO library.
13.1. Install Socket.IO:
$ npm install socket.io
On the frontend, in your "client" directory:
$ npm install socket.io-client
13.2. Set up Socket.IO on the server:
Update your "server.js" file to include the following code to set up a Socket.IO server:
javascript
const http = require("http");
const socketio = require("socket.io");
const server = http.createServer(app);
const io = socketio(server);
io.on("connection", (socket) => {
console.log("New client connected");
// Handle custom events, such as creating, updating, or deleting events
socket.on("disconnect", () => {
console.log("Client disconnected");
});
});
server.listen(process.env.PORT, () => {
console.log(`Server is running on port ${process.env.PORT}`);
});
13.3. Emit events on event changes:
Update your event controllers to emit events whenever an event is created, updated, or deleted. For example, when creating a new event:
javascript
const newEvent = await Event.create(req.body);
io.emit("eventCreated", newEvent);
13.4. Set up Socket.IO on the frontend:
In your React app, create a new file named "socket.js" and add the following code to set up a Socket.IO client:
javascript
import { io } from "socket.io-client";
const socket = io(process.env.REACT_APP_SOCKET_ENDPOINT);
export default socket;
Replace `process.env.REACT_APP_SOCKET_ENDPOINT` with the actual WebSocket endpoint of your server.
13.5. Listen for events in your React components:
Update your React components to listen for real-time updates. For example, in your "EventList" component:
javascript
import { useEffect } from "react";
import socket from "./socket";
function EventList() {
// ...
useEffect(() => {
socket.on("eventCreated", (newEvent) => {
// Update your component state with the new event
});
return () => {
socket.off("eventCreated");
};
}, []);
// ...
}
By integrating real-time event updates using WebSockets and Socket.IO, you can provide users with an enhanced experience by keeping them informed about the latest event changes without the need for manual page refreshes.
14. Additional Improvements and Optimizations:
As you continue to develop your Event Management App, you can explore further improvements and optimizations, such as:
- Integrating a caching mechanism like Redis to reduce database queries and improve performance.
- Containerizing your application with Docker for easier deployment and better resource management.
- Implementing a more sophisticated user interface with advanced filtering, sorting, and searching capabilities.
- Enhancing the user experience by adding features like event registration, reminders, and notifications.
- Adopting a microservices architecture to better manage and scale individual components of your application.
- Optimizing performance through code refactoring, database indexing, and load balancing.
The possibilities are endless as you continue to learn and grow as a developer. Keep experimenting with new technologies, techniques, and best practices to build more robust and scalable applications.
