diff --git a/blog/authors.yml b/blog/authors.yml index ed0515787..c78ea83ed 100644 --- a/blog/authors.yml +++ b/blog/authors.yml @@ -1,23 +1,19 @@ ajay-dhangar: name: Ajay Dhangar - url: https://github.com/ajay-dhangar + title: Founder of CodeHarborHub + url: https://ajay-dhangar.github.io/ image_url: https://avatars.githubusercontent.com/u/99037494?v=4 -ajay-dhangar_2022: +ajay-dhangar_2024: name: Ajay Dhangar - title: Software Engineer - url: https://github.com/ajay-dhangar + title: Software Engineer at OptimumAI + url: https://www.optimumai.in/community image_url: https://avatars.githubusercontent.com/u/99037494?v=4 -ajay-dhangar_2021: - name: Ajay Dhangar - title: Full Stack Developer - url: https://github.com/ajay-dhangar - image_url: https://avatars.githubusercontent.com/u/99037494?v=4 ajay-dhangar_2020: name: Ajay Dhangar - title: Frontend Developer + title: B.Tech (CSE) Student url: https://github.com/ajay-dhangar image_url: https://avatars.githubusercontent.com/u/99037494?v=4 diff --git a/blog/getting-started-with-mern/index.md b/blog/getting-started-with-mern/index.md index 225dbc7b3..4154743a6 100644 --- a/blog/getting-started-with-mern/index.md +++ b/blog/getting-started-with-mern/index.md @@ -1,35 +1,64 @@ --- title: 'Getting started with MERN' -authors: [abhijith-m-s] -tags: [web dev,React,Express,MongoDB,Node,UI,web development,web frameworks] +authors: [abhijith-m-s, ajay-dhangar] +tags: + - MERN Stack + - MongoDB + - Express.js + - React + - Node.js + - Web Development + - API + - Frontend Development + - Backend Development date: 2024-06-10 09:32:00 -description: Simple Guide to get you started with MERN +description: Learn the basics of the MERN stack, from building an API with Express.js to creating a React app. This guide covers prerequisites, configuring MongoDB Atlas, styling, and more. draft: false +canonical_url: https://codeharborhub.github.io/blog/getting-started-with-mern +meta: + - name: "robots" + content: "index, follow" + - property: "og:title" + content: "Getting started with MERN" + - property: "og:description" + content: "Learn the basics of the MERN stack, from building an API with Express.js to creating a React app. This guide covers prerequisites, configuring MongoDB Atlas, styling, and more." + - property: "og:type" + content: "article" + - property: "og:url" + content: "https://codeharborhub.github.io/blog/getting-started-with-mern" + - property: "og:image" + content: "https://codeharborhub.github.io/assets/images/mern-8a27add30515e58f789f89a4c9072818.jpg" + - name: "twitter:card" + content: "summary_large_image" + - name: "twitter:title" + content: "A Comprehensive Guide to Get You Started with MERN Stack" + - name: "twitter:description" + content: "Learn the basics of the MERN stack, from building an API with Express.js to creating a React app. This guide covers prerequisites, configuring MongoDB Atlas, styling, and more." + - name: "twitter:image" + content: "https://codeharborhub.github.io/assets/images/mern-8a27add30515e58f789f89a4c9072818.jpg" --- -A Deep dive into building your first MERN application from scratch +A comprehensive guide to get you started with MERN stack. From building an API with Express.js to creating a React app, this guide covers all the basics of the MERN stack. ![Getting started with MERN](./mern.jpg) -_CAUTION_ ⚠️ _THIS IS A COMPREHENSIVE STARTER FRIENDLY GUIDE TO MERN_ +:::caution +This article assumes you have a basic understanding of web development concepts and technologies. If you are new to web development, you might want to familiarize yourself with HTML, CSS, JavaScript, and Node.js before diving into the MERN stack. -> Hello Guys, -> ->Here we gonna build a simple library management application using the MERN stack, making sure all the basics regarding the stack is covered from building an API with Express.js to building a full blown application in which > the React app interacts with a backend Database. +::: -🚨🚨🚨 MAKE SURE TO HAVE [NODE](https://nodejs.org/en/download/package-manager/current) INSTALLED.🚨🚨🚨 +Have you ever heard of the MERN stack? If you are a web developer or aspiring to become one, you might have come across this term. The MERN stack is a popular web development stack that consists of four key technologies: MongoDB, Express.js, React.js, and Node.js. Each of these technologies plays a crucial role in building modern web applications. -> So let’s start right away!! +In this blog post, we will cover the basics of the MERN stack and walk you through the process of building a simple MERN application. We will start by setting up a MongoDB Atlas cluster, building an API with Express.js, creating a React app, and connecting the frontend to the backend. We will also cover styling and making requests from the frontend. -_This is gonna be a beginner friendly, so don’t worry_ 😁 -If you just want to skip to the repository, find the Github repo link below +:::info +If you prefer to jump straight to the code, you can find the GitHub repository for this project [here](https://github.com/AMS003010/SimpleMernApp) and star the repo to show your support. Feel free to fork the repository and experiment with the code. +::: -> Github Repo link — https://github.com/AMS003010/SimpleMernApp +**What we’re covering** -Show your support by starring ⭐ the repo - -## What we’re covering + - Prerequisites - What a Web Framework is? - Configuring a _MongoDB Atlas_ Cluster - Building a API with _Express.js_ @@ -37,764 +66,649 @@ Show your support by starring ⭐ the repo - Setting a Proxy from your Backend API server to the Frontend React App - Styling and making Requests from the frontend +## Prerequisites + +Before we get started, make sure you have the following installed on your system: + +- [Node.js](https://nodejs.org/en/download/) +- [npm](https://www.npmjs.com/get-npm) +- [MongoDB Compass](https://www.mongodb.com/try/download/compass) (optional, for local MongoDB) +- [Postman](https://www.postman.com/downloads/) (optional, for testing API endpoints) +- [Visual Studio Code](https://code.visualstudio.com/download) (or any code editor of your choice) +- A basic understanding of HTML, CSS, JavaScript, and Node.js +- A GitHub account (optional, for version control) +- A MongoDB Atlas account (optional, for cloud-based MongoDB) +- A basic understanding of web development concepts and technologies +- A cup of coffee ☕️ (optional, but highly recommended) +- A pinch of curiosity 🧐 + ## What is a Web Framework? -You might have heard of Unintelligible acronyms like MERN, MEVN, MEAN, LAMP, PERN etc. These are examples of some of the most popular web frameworks. A Web Framework is essentially a collection of tools or libraries that helps to build a full blown web application. Using frameworks, helps make the web development process faster, flexible and more transparent. -MERN — MongoDB, Express.js, React.js, Node.js +A web framework is a software framework designed to support the development of web applications, including web services, web resources, and web APIs. Web frameworks provide a standard way to build and deploy web applications by providing libraries, APIs, and tools to streamline the development process. + +In the context of the MERN stack, each technology plays a specific role: + +- **MongoDB**: A NoSQL database that stores data in a flexible, JSON-like format. +- **Express.js**: A Node.js web application framework that provides a robust set of features for building web applications and APIs. +- **React.js**: A JavaScript library for building user interfaces and single-page applications. +- **Node.js**: A JavaScript runtime built on Chrome's V8 JavaScript engine that allows you to run JavaScript code outside of a web browser. +- **MERN**: A full-stack development framework that combines MongoDB, Express.js, React.js, and Node.js to build modern web applications. +- **MongoDB Atlas**: A cloud-based database service that allows you to store your data in a serverless environment. +- **API**: An Application Programming Interface that defines how two services can communicate and interact with each other through requests and responses. +- **React Router**: A routing library for React that allows you to define routes and navigate between different components in a single-page application. +- **CSS**: Cascading Style Sheets that define the visual presentation of a web page, including layout, colors, fonts, and animations. +- **HTML**: Hypertext Markup Language that defines the structure and content of a web page. +- **JavaScript**: A programming language that enables interactive and dynamic web content. +- **Express**: A minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications. +- **Node.js**: A JavaScript runtime built on Chrome's V8 JavaScript engine that allows you to run JavaScript code outside of a web browser. +- **npm**: A package manager for Node.js that allows you to install, manage, and share JavaScript packages. +- **React**: A JavaScript library for building user interfaces and single-page applications. + +You might have heard of Unintelligible acronyms like MERN, MEVN, MEAN, LAMP, PERN etc. These are examples of some of the most popular web frameworks. Each of these frameworks has its own set of technologies and tools that work together to build web applications. + +| Framework | Technologies | Description | +| :--- | :--- | :--- | +| MERN | MongoDB, Express.js, React.js, Node.js | A full-stack development framework for building modern web applications. | +| MEVN | MongoDB, Express.js, Vue.js, Node.js | A full-stack development framework similar to MERN, but with Vue.js instead of React.js. | +| MEAN | MongoDB, Express.js, Angular, Node.js | A full-stack development framework with Angular instead of React.js or Vue.js. | +| LAMP | Linux, Apache, MySQL, PHP | A traditional web development stack that uses Linux as the operating system, Apache as the web server, MySQL as the database, and PHP as the server-side scripting language. | +| PERN | PostgreSQL, Express.js, React.js, Node.js | A full-stack development framework similar to MERN, but with PostgreSQL instead of MongoDB. | + + +:::info +**Fun fact:** HTMX has been making waves in the community due to its ability to be written in a hypertext format (that is what HTML is 😌) and being able to give you access to AJAX, CSS Transitions, WebSockets, and Server-Sent Events directly in HTML, using attributes. +::: -MEVN — MongoDB, Express.js, Vue.js, Node.js +## Configuring a MongoDB Atlas Cluster -MEAN — MongoDB, Express.js, Angular.js, Node.js +> MongoDB Atlas is a cloud-based database service that allows you to store your data in a serverless environment. It provides a fully managed database solution that eliminates the need for manual configuration, maintenance, and scaling of databases. -PERN — PostgreSQL, Express.js, React.js, Node.js +To get started with MongoDB Atlas, follow these steps: -BEHM — Bun, Elysia, HTMX, MongoDB +1. **Create an Account**: Sign up for a MongoDB Atlas account at [https://www.mongodb.com/cloud/atlas](https://www.mongodb.com/cloud/atlas). +2. **Create a New Cluster**: Click on the "Build a Cluster" button to create a new cluster. +3. **Choose a Configuration**: Select a configuration of your liking (e.g., M0, which is free and suitable for small applications). +4. **Choose a Provider**: Choose your preferred cloud provider (e.g., AWS, Azure, Google Cloud). +5. **Create Deployment**: Click on the "Create Deployment" button to create your cluster. +6. **Connect to Your Cluster**: Once your cluster is created, click on the "Connect" button. +7. **Add Your IP Address**: Click on the "Add Your Current IP Address" button to allow your IP address to access the cluster. +8. **Create a Database User**: Click on the "Create a Database User" button to create a new user for your database. Make sure to note down the username and password. +9. **Choose a Connection Method**: Choose the "Connect Your Application" option to get the connection string for your application. +10. **Copy the Connection String**: Copy the connection string and replace the username and password with the ones you created earlier. The connection string should look something like this: -and many more (seriously there’s no end to that😅) + ```plaintext + mongodb+srv://:@cluster0.tpgdder.mongodb.net/?retryWrites=true&w=majority&appName=Cluster0 + ``` -> __Fun fact:__ HTMX has been making waves in the community due to its ability to be written in a hypertext format (that is what HTML is 😌) and being able to give you access to AJAX, CSS Transitions, WebSockets and Server Sent Events directly in HTML, using attributes. + :::info + Make sure to replace `` and `` with the username and password you created for your database user. + ::: -## Configuring a MongoDB Atlas Cluster -Lets configure a MongoDB Atlas cluster. Here MongoDB will be used as a Database to store the books (with their details). You can either download MongoDB locally on your device (MongoDB Compass is a GUI tool to query and analyze the database) or use MongoDB Atlas to store your data in a serverless environment. I am going to using MongoDB Atlas +11. **Connect to Your Cluster**: Use the connection string to connect to your MongoDB Atlas cluster from your application. You can use the MongoDB Node.js driver to connect to your cluster and perform database operations. Here is an example of how you can connect to your cluster using the Node.js driver: + + ```js title="app.js" + const { MongoClient } = require('mongodb'); -Create a account on https://www.mongodb.com/cloud/atlas/register + const uri = 'mongodb+srv://:@cluster0.tpgdder.mongodb.net/?retryWrites=true&w=majority&appName=Cluster0'; -Click on Create a deployment + const client = new MongoClient(uri); -_Steps_ - - Choose a __configuration__ of your liking( I chose __M0__ which was Free and suitable for our application ) - - Choose your provider( I chose the default choice ) - - Click __Create Deployment__ + async function run() { + try { + await client.connect(); -This should bring you to a Dashboard, Click on __Connect__ + const database = client.db('mydatabase'); + const collection = database.collection('mycollection'); -_Steps_ - - Add a username and password - - For connection methods, choose Drivers and then choose Node (with your node version) - - Copy the __connection string__, it looks like the one below + // Perform database operations here -``` -mongodb+srv://:@cluster0.tpgdder.mongodb.net/?retryWrites=true&w=majority&appName=Cluster0 -``` - - Replace the __username__ and __password__ in the string - - For connection methods, choose __Drivers__ and then choose Node (with your node version) - - Click on __Network Access__ and add your __IP Address__ + } finally { + await client.close(); + } + } -Now You are all done Configuring MongoDB !!! 🎉 + run().catch(console.dir); + ``` + +Congratulations! You have successfully configured a MongoDB Atlas cluster and connected to it using the Node.js driver. You are now ready to build your MERN application. ## Building a API with Express.js -> An API is an acronym for a __Application Programming Interface__. An API is an interface which helps two services to communicate and interact with each other through requests and responses. +> Express.js is a minimal and flexible Node.js web application framework that provides a robust set of features for building web applications and APIs. It is widely used in the industry due to its simplicity and scalability. + +Let's get to building an API with Express.js. Follow these steps to create a simple API: + +1. **Create a Project Folder**: Create a new folder for your project and navigate to it in your terminal. + + ```bash + mkdir SimpleMernApp + cd SimpleMernApp + ``` + +2. **Initialize a New Node.js Project**: Run `npm init -y` to initialize a new Node.js project with default settings. + + ```bash + npm init -y + ``` + +3. **Install Express.js**: Run `npm install express` to install Express.js as a dependency for your project. + + ```bash + npm install express + ``` -Lets get to building an API !!!😁 +4. **Create an `app.js` File**: Create a new file called `app.js` in your project folder and add the following code to create a simple Express.js server. -First make the Project Folder + ```js title="app.js" + const express = require('express'); + const app = express(); + const PORT = process.env.PORT || 4000; -``` -mkdir SimpleMernApp -mkdir backend -cd backend -touch .env -npm init -y -npm install nodemon -g -``` + app.get('/', (req, res) => { + res.send('Hello, World!'); + }); -Lets install the dependencies + app.listen(PORT, () => { + console.log(`Server is running on http://localhost:${PORT}`); + }); + ``` -``` -npm install express mongoose dotenv cors express-async-errors -``` +5. **Start the Express.js Server**: Run `node app.js` to start the Express.js server. -Open your package.json file ( This file handles your dependencies ) and add the below code in under the scripts section + ```bash + node app.js + ``` -``` -"start": "node server.js", -"dev": "nodemon server.js" -``` +6. **Test the API Endpoint**: Open [http://localhost:4000/](http://localhost:4000/) in your browser to see the message "Hello, World!" displayed. This confirms that your Express.js server is running successfully. +7. **Create Additional Routes**: You can create additional routes and API endpoints by adding more `app.get()` or `app.post()` methods to handle different requests. -Create a _.env_ file and add your environment variables into it + ```js title="app.js" + app.get('/api/books', (req, res) => { + res.json({ message: 'Get all books' }); + }); -``` -MONGO_URI=mongodb+srv://:@cluster0.tpgdder.mongodb.net/?retryWrites=true&w=majority&appName=Cluster0 -PORT=6000 -``` + app.post('/api/books', (req, res) => { + res.json({ message: 'Add a new book' }); + }); -Create a file called db.js and paste the below code. This uses the mongoose module to connect to the _MongoDB Atlas_ Cluster with your mongo connection string. + app.put('/api/books/:id', (req, res) => { + res.json({ message: 'Update a book' }); + }); -``` -//Contents of db.js -const mongoose = require('mongoose'); -require('dotenv').config() //module for managing environment variables + app.delete('/api/books/:id', (req, res) => { + res.json({ message: 'Delete a book' }); + }); + ``` +8. **Install Additional Dependencies**: You can install additional dependencies like `mongoose` for MongoDB integration, `cors` for enabling CORS, and `dotenv` for managing environment variables. -const connection = async () => { - const connectionParams = { + ```bash + npm install mongoose cors dotenv + ``` + +9. **Create a `.env` File**: Create a new file called `.env` in your project folder and add your environment variables. + + ```plaintext + PORT=4000 + MONGODB_URI=mongodb+srv://:@cluster0.tpgdder.mongodb.net/mydatabase + ``` + +10. **Update the `app.js` File**: Update your `app.js` file to use the environment variables from the `.env` file. + + ```js title="app.js" + require('dotenv').config(); + const express = require('express'); + const mongoose = require('mongoose'); + const cors = require('cors'); + const app = express(); + const PORT = process.env.PORT || 4000; + const MONGODB_URI = process.env.MONGODB_URI; + + mongoose.connect(MONGODB_URI, { useNewUrlParser: true, useUnifiedTopology: true, - }; + }); + try { - await mongoose.connect(process.env.MONGO_URI,connectionParams); - console.log("Connected to Database"); + mongoose.connection.on('connected', () => { + console.log('Connected to MongoDB'); + }); } catch (error) { - console.log("Not Connected to Databse",error); + console.log('Error connecting to MongoDB:', error); } -} -module.exports = connection; -``` - -Create a model.js file and paste the code below. This file contains the MongoDB database schema, which defines the rules that each field in a document follows. In MongoDB, each record in a database is represented as a document. - -``` -//Contents of model.js -const mongoose = require('mongoose'); - -const Schema = mongoose.Schema - -const userSchema = new Schema({ - name: { - type: String, - required: true, - unique: true - }, - author: { - type: String, - required: true - }, - publication: { - type: String, - required: true - }, - series: { - type: String, - required: true - }, - borrowed: { - type: String, - default: null - }, - borrowed_on: { - type: Number, - default: null - } -}); - -const DataModel = mongoose.model('library_data',userSchema); - -module.exports = {DataModel}; -``` - -Create a route.js file and paste the below code. This file defines the Express routes and their respective controller functions. Controller functions are simply functions that define the action to be taken upon making an API request at that route. -``` -//Contents of route.js -const express = require('express'); -const {DataModel} = require('./model'); + app.use(cors()); + app.use(express.json()); -const router = express.Router() + app.get('/', (req, res) => { + res.send('Hello, World!'); + }); -router.get("/getbooks",async (req,res) => { - const data = await DataModel.find(); - res.status(200).send({"data":data}); -} ) + app.listen(PORT, () => { + console.log(`Server is running on http://localhost:${PORT}`); + }); + ``` -router.post("/addbook", async (req,res) => { - const body = await req.body; - const sendObj = await new DataModel({ - "name": body.name, - "author": body.author, - "publication": body.publication, - "series": body.series - }).save(); - res.status(200).send({"msg":"Book added"}); -}); +11. **Create a `models` Folder**: Create a new folder called `models` in your project folder to store your MongoDB models. -module.exports = router; -``` + ```bash + mkdir models + ``` +12. **Create a `Book` Model**: Create a new file called `Book.js` in the `models` folder and define your MongoDB model. -Create a file called server.js and paste the below code. This file runs the express server at the assigned “PORT”. + ```js title="models/Book.js" + const mongoose = require('mongoose'); -``` -//Contents of server.js -require('dotenv').config(); -require('express-async-errors'); -const express = require('express'); -const app = express(); -const connection = require('./db'); -const cors = require('cors'); //Takes care of cross-orign requests -const Routes = require('./route'); //Routes being imported from route.js + const bookSchema = new mongoose.Schema({ + name: { type: String, required: true }, + }); -connection(); + const Book = mongoose.model('Book', bookSchema); -app.use(express.json()); -app.use((req,res,next) => { - console.log(req.path,req.method) - next() -}) -app.use(cors()); + module.exports = Book; + ``` -app.use('/api',Routes); +13. **Update the `app.js` File**: Update your `app.js` file to use the `Book` model. -app.listen(process.env.PORT,() => { - console.log("Connected and listening on Port ",process.env.PORT); -}) -``` + ```js title="app.js" + const express = require('express'); + const mongoose = require('mongoose'); + const cors = require('cors'); + const Book = require('./models/Book'); + const app = express(); + const PORT = process.env.PORT || 4000; + const MONGODB_URI = process.env.MONGODB_URI; -> “npm run dev” runs nodemon server.js. This module helps speed up the development process. Trust me 🫡😌 + mongoose.connect(MONGODB_URI, { + useNewUrlParser: true, + useUnifiedTopology: true, + }); -Run the server ( during the developing phase ) with command. + try { + mongoose.connection.on('connected', () => { + console.log('Connected to MongoDB'); + }); + } catch (error) { + console.log('Error connecting to MongoDB:', error); + } -``` -npm run dev -``` + app.use(cors()); + app.use(express.json()); -Run the server ( during the production phase ) with command + app.get('/', (req, res) => { + res.send('Hello, World!'); + }); -``` -npm start -``` + app.get('/api/books', async (req, res) => { + try { + const books = await Book.find(); + res.json(books); + } catch (error) { + res.status(500).json({ message: error.message }); + } + }); -Running either of these commands, gets an _Express_ server running at port 6000 ready and waiting to receive requests. + app.post('/api/books', async (req, res) => { + const book = new Book({ + name: req.body.name, + }); -Also make sure to test out the API endpoints with an application like [POSTMAN](https://www.postman.com/downloads/), [Apache JMeter](https://jmeter.apache.org/download_jmeter.cgi) etc. + try { + const newBook = await book.save(); + res.status(201).json(newBook); + } catch (error) { + res.status(400).json({ message: error.message }); + } + }); + + app.listen(PORT, () => { + console.log(`Server is running on http://localhost:${PORT}`); + }); + ``` +14. **Test the API Endpoints**: Use Postman or a similar tool to test your API endpoints. You can send GET and POST requests to `/api/books` to get all books and add a new book, respectively. Make sure to check the response status codes and messages to ensure that your API is working correctly. +15. **Create Additional Models and Routes**: You can create additional models and routes for your API by following the same steps as above. Make sure to define your models, create routes to handle different requests, and test your API endpoints to ensure they are working as expected. +16. **Deploy Your API**: You can deploy your Express.js API to a cloud platform like Heroku, AWS, or Google Cloud Platform to make it accessible to the public. Make sure to configure your deployment settings, set up environment variables, and test your API in a production environment. + +:::note + +**Top Free Hosting Platforms for Node.js** + +- [Heroku](https://www.heroku.com/) *(Free tier available)* +- [Glitch](https://glitch.com/) *(Free tier available)* +- [Vercel](https://vercel.com/) *(Free tier available)* +- [Netlify](https://www.netlify.com/) *(Free tier available)* +- [GitHub Pages](https://pages.github.com/) *(Free for static sites)* +- [Render](https://render.com/) *(Free for static sites)* + +If you are new to Express.js, MongoDB, or Mongoose, I recommend checking out the official documentation for each technology to learn more about their features, capabilities, and best practices. + +- [Express.js Documentation](https://expressjs.com/) +- [MongoDB Documentation](https://docs.mongodb.com/) +- [Mongoose Documentation](https://mongoosejs.com/) +- [Node.js Documentation](https://nodejs.org/en/docs/) +- [npm Documentation](https://docs.npmjs.com/) +- [React Documentation](https://reactjs.org/docs/getting-started.html) +- [MongoDB Atlas Documentation](https://docs.atlas.mongodb.com/) +- [Postman Documentation](https://learning.postman.com/docs/getting-started/introduction/) +- [Visual Studio Code Documentation](https://code.visualstudio.com/docs) +- [GitHub Documentation](https://docs.github.com/) +- [Heroku Documentation](https://devcenter.heroku.com/categories/reference) +- [AWS Documentation](https://docs.aws.amazon.com/) +- [Google Cloud Platform Documentation](https://cloud.google.com/docs) +- [HTML Documentation](https://developer.mozilla.org/en-US/docs/Web/HTML) +- [CSS Documentation](https://developer.mozilla.org/en-US/docs/Web/CSS) +- [JavaScript Documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript) +- [Web Development Documentation](https://developer.mozilla.org/en-US/docs/Web) +- [Web Frameworks Documentation](https://developer.mozilla.org/en-US/docs/Web/Frameworks) + +::: + +Congratulations! You have successfully built an API with Express.js and connected it to a MongoDB database. You are now ready to create a frontend application using React.js. -Yahoo!!! You just Created an API🎉 ## Creating a React App -Let’s now get into some frontend, which will define how your website will behave and look. +> React.js is a JavaScript library for building user interfaces and single-page applications. It is widely used in the industry due to its component-based architecture, virtual DOM, and declarative syntax. + +Let's get started with creating a React app. Follow these steps to create a simple React app: + +1. **Create a New React App**: Run `npx create-react-app frontend` to create a new React app named `frontend`. + + ```bash + npx create-react-app frontend + ``` + +2. **Navigate to the React App**: Run `cd frontend` to navigate to the React app folder. + + ```bash + cd frontend + ``` +3. **Start the React App**: Run `npm start` to start the React app in development mode. + + ```bash + npm start + ``` + +4. **Open the React App**: Open [http://localhost:3000/](http://localhost:3000/) in your browser to see the React app running. + + +
+
+ logo +
+

+ Edit src/App.js and save to reload. +

+ + Learn React + +
+
+ -Type the below command to create a react app. Do this in the root folder. +5. **Create Additional Components**: You can create additional components in the `src/components` folder to organize your code and reuse components across your app. -``` -npx create-react-app frontend -``` + ```bash + mkdir src/components + ``` -This creates a react app named frontend ( You can name it anything you like ) +7. Now, create a new file called `Home.js` in the `src/components` folder and add the following code to create a simple home component. -Once it is complete, type the command + ```js title="src/components/Home.js" + import React from 'react'; -``` -npm install react-router-dom -npm start -``` + const Home = () => { + return ( +
+

Welcome to the Home Page

+
+ ); + }; -This will run the React App at port 3000. Navigate to _http://localhost:3000/_ + export default Home; + ``` -Check for a window similar to the below. If you do, then you have successfully installed a React App.🎉 +8. **Update the `App.js` File**: Update your `App.js` file to use the `Home` component. -![React start screen](./react.jpg) + ```js title="src/App.js" + import React from 'react'; + import Home from './components/Home'; + + function App() { + return ( +
+ +
+ ); + } -## Setting a Proxy from your Backend API server to the Frontend React App + export default App; + ``` -Type the below code in the package.json file of your frontend +9. Now, you can see the `Home` component displayed on browser window. -``` -"proxy": "http://localhost:6000" -``` + +
+

Welcome to the Home Page

+
+ -By doing this any request made to your development server (the one serving your frontend application) will be forwarded to `http://localhost:4000`. This is often used when you have a separate backend server running on `localhost:4000`, and you want to avoid issues related to cross-origin requests during development. +## Setting a Proxy from your Backend API server to the Frontend React App -Now, you can be sure that requests made on the frontend( React ) will be proxied( forwarded ) to the backend ( Express ). 😉 +> When you are developing a full-stack application with a separate frontend and backend, you might run into issues related to cross-origin requests. To avoid these issues during development, you can set up a proxy from your backend API server to your frontend React app. -## Styling and making Requests from the frontend +To set up a proxy, follow these steps: -Now let’s get on to styling 🎨 and make the frontend look Gooood…. - -Here 😼 is where good old CSS and HTML comes in - -This below is the frontend folder structure - -![Folder structure](./output3.png) - -Only the above files in the src folder is necessary for this project, the rest of the files can be removed like App.test.js, reportWebVitals.js etc. - -> Also check the repository, as I had made some changes to the index.js file. Also add the screw.png image to your img folder - -To use some custom fonts in my project, I downloaded the respective .ttf file and stored them in the fonts folder and copied the below code into the App.css file - -``` -@font-face { - font-family: "Old English"; /*Can be any text*/ - src: local("Old English"), - url("./fonts/OldeEnglish.ttf") format("truetype"); -} - -@font-face { - font-family: "Subway"; /*Can be any text*/ - src: local("Subway"), - url("./fonts/subway.ttf") format("truetype"); -} -w -@font-face { - font-family: "Quad Serif"; /*Can be any text*/ - src: local("Quad Serif Line"), - url("./fonts/QuadSerifLine.ttf") format("truetype"); -} - -@font-face { - font-family: "Krakoan"; /*Can be any text*/ - src: local("Krakoan"), - url("./fonts/Krakoan.ttf") format("truetype"); -} -``` - -The React framework is considered very developer-friendly because of its component-based architecture. Components in React are reusable and encapsulated pieces of code that can represent parts of a user interface, such as a button, form, or even entire sections or pages of a web application. By breaking down the UI into components, React promotes code organization, reusability, and maintainability, making it easier for developers to manage and scale their projects. - -> All the components in this project is added to the “components” folder - -``` -//Contents of addBook.js -import {useState} from 'react'; - -const AddBook = ({cardState,setCardState}) => { - const [name,setName] = useState(''); - const [author,setAuthor] = useState(''); - const [pub,setPub] = useState(''); - const [ser,setSer] = useState(''); - const [res,setRes] = useState(''); - - const handleClick = async () => { - const response = await fetch('/api/addbook', { - method: 'POST', - headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify({ - "name":name, - "author":author, - "publication":pub, - "series":ser - }) - }); +1. **Update the `package.json` File**: Update the `package.json` file in your React app to include a proxy setting that points to your backend API server. - if (!response.ok) { - console.log("Unable to add a book"); - return; - } + ```json title="frontend/package.json" + { + "name": "frontend", + "version": "0.1.0", + "private": true, + "proxy": "http://localhost:4000" + } + ``` +2. **Restart the React App**: Run `npm start` to restart the React app with the new proxy setting. + + ```bash + npm start + ``` +3. **Test the Proxy**: Make a request to your backend API server from your frontend React app using the proxy setting. + + ```js title="src/components/Home.js" + import React, { useEffect } from 'react'; + + const Home = () => { + useEffect(() => { + fetch('/api/books') + .then(response => response.json()) + .then(data => console.log(data)) + .catch(error => console.error(error)); + }, []); + + return ( +
+

Welcome to the Home Page

+
+ ); + }; - const data = await response.json(); - console.log(data.msg); - setRes(data.msg) - if(data.msg === "Book added") { - setCardState(0); + export default Home; + ``` + +4. **Check the Console**: Open the browser console to see the data fetched from your backend API server. This confirms that the proxy is working correctly. + + ```plaintext + [ { id: 1, title: 'Book 1' }, { id: 2, title: 'Book 2' }, { id: 3, title: 'Book 3' } ] + ``` +5. **Update the API Endpoints**: Update your API endpoints in the Express.js server to return data in JSON format. + + ```js title="app.js" + app.get('/api/books', async (req, res) => { + try { + const books = [ + { id: 1, title: 'Book 1' }, + { id: 2, title: 'Book 2' }, + { id: 3, title: 'Book 3' }, + ]; + res.json(books); + } catch (error) { + res.status(500).json({ message: error.message }); } + }); + ``` +6. **Test the API Endpoints**: Make a request to the `/api/books` endpoint from your frontend React app to fetch the data and display it on the browser window. + + ```js title="src/components/Home.js" + import React, { useEffect, useState } from 'react'; + + const Home = () => { + const [books, setBooks] = useState([]); + + useEffect(() => { + fetch('/api/books') + .then(response => response.json()) + .then(data => setBooks(data)) + .catch(error => console.error(error)); + }, []); + + return ( +
+

Welcome to the Home Page

+
    + {books.map(book => ( +
  • {book.title}
    • + ))} +
+
+ ); }; - return( -
- Book name: {setName(e.target.value)}} - value={name} - /> - Author: {setAuthor(e.target.value)}} - value={author} - /> - Publications: {setPub(e.target.value)}} - value={pub} - /> - Series: {setSer(e.target.value)}} - value={ser} - /> - -
{res ? res :

}
-
- ) -} - -export default AddBook; -``` - -``` -//Contents of nothBook.js -const NotBook = () => { - return( -

...

- ) -} - -export default NotBook; -``` - -``` -//Contents of home.js -import {useState} from 'react'; - -import AddBook from './addBook'; -import NotBook from './nothBook'; -import screw from '../img/screw.png' - -const Home = () => { - const [cardState,setCardState] = useState(0); - const cardList = [,] - return( -
-

Infino

-

keeper . of . the . books

-
-
setCardState(1)}>Add a book
-
setCardState(1)}>Borrow a book
-
setCardState(1)}>Return a book
-
setCardState(1)}>Delete a book
-
-
.
-
.
-
.
-
-
- s - s - s -
-
-
{cardList[cardState]}
-
made with ❣️ by  abhijith
-
- ) -} - -export default Home; -``` - -``` -/*Contents of index.css*/ -@import url('https://fonts.googleapis.com/css2?family=Poor+Story&display=swap'); - -body,html { - margin: 0px; - padding: 0px; - background: linear-gradient(to right,rgb(235, 232, 233),rgb(240, 233, 233)); -} - -.pages { - align-items: center; - text-align: center; -} - -.mainContainer { - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; -} - -.mainWrapper { - font-family: Quad Serif; - width: 20rem; - height: 20rem; - border: 3px solid brown; - position: relative; - margin-top: 5rem; - border-radius: 10px; - margin-bottom: 1rem; -} - -.mainHeading { - font-family: Quad Serif; - font-size: 6rem; - margin-bottom: 0; - margin-top: 5rem; -} - -.mainsubHead { - font-family: Quad Serif; - font-size: 1rem; -} - -.div1 { - position: absolute; - font-size: 2rem; - padding: 0.4rem; - width: 9rem; - height: 9rem; - border: 2px dashed black; - left: 0.5rem; - top: 0.5rem; - border-radius: 5px; - transform: scale(1); - transition: transform ease 0.5s; - background: linear-gradient(to right,rgb(235, 232, 233),rgb(230, 204, 204)); -} - -.div1:hover { - transform: scale(1.2); - cursor: pointer; -} - -.div2 { - position: absolute; - font-size: 1.2rem; - padding: 0.4rem; - width: 5rem; - height: 5rem; - border: 2px dashed black; - right: 0.5rem; - top: 0.5rem; - border-radius: 5px; - transform: scale(1); - transition: transform ease 0.5s; - background: linear-gradient(to right,rgb(235, 232, 233),rgb(230, 204, 204)); -} - -.div2:hover { - transform: scale(1.4); - cursor: pointer; -} - -.div3 { - position: absolute; - font-size: 1.5rem; - padding: 0.4rem; - width: 7rem; - height: 7rem; - border: 2px dashed black; - left: 0.5rem; - bottom: 0.5rem; - border-radius: 5px; - transform: scale(1); - transition: transform ease 0.5s; - background: linear-gradient(to right,rgb(235, 232, 233),rgb(230, 204, 204)); -} - -.div3:hover { - transform: scale(1.4); - cursor: pointer; -} - -.div4 { - position: absolute; - padding: 0.4rem; - font-size: 1.6rem; - width: 6rem; - height: 6rem; - border: 2px dashed black; - right: 0.5rem; - bottom: 0.5rem; - border-radius: 5px; - transform: scale(1); - transition: transform ease 0.5s; - background: linear-gradient(to right,rgb(235, 232, 233),rgb(232, 216, 216)); -} - -.div4:hover { - transform: scale(1.4); - cursor: pointer; -} - -.div5 { - position: absolute; - width: 1rem; - height: 3rem; - font-size: 2.3rem; - left: 56%; -} - -@keyframes flashColor1 { - 0% { - color: rgb(238, 215, 215); - } - 50% { - color: rgb(90, 68, 68); /* Change to the color you want during the flash */ - } - 100% { - color: rgb(155, 144, 144); - } -} - -@keyframes flashColor2 { - 0% { - color: rgb(155, 144, 144); - } - 50% { - color: rgb(238, 215, 215); /* Change to the color you want during the flash */ - } - 100% { - color: rgb(90, 68, 68); - } -} - -@keyframes flashColor3 { - 0% { - color: rgb(90, 68, 68); - } - 50% { - color: rgb(155, 144, 144); /* Change to the color you want during the flash */ - } - 100% { - color: rgb(238, 215, 215); - } -} - -.div5 .dot1 { - color: rgb(123, 104, 104); - font-family: 'Courier New', Courier, monospace; - animation: flashColor1 1s infinite alternate; -} - -.div5 .dot2 { - color: rgb(78, 58, 58); - font-family: 'Courier New', Courier, monospace; - animation: flashColor2 1s infinite alternate; -} - -.div5 .dot3 { - color: rgb(148, 129, 129); - font-family: 'Courier New', Courier, monospace; - animation: flashColor3 1s infinite alternate; -} - -.cardWrapper { - position: relative; - border: 4px solid black; - border-radius: 10px; - width: 20rem; - height: max-content; - background: linear-gradient(to right,rgb(247, 242, 242),rgb(242, 221, 221)); - margin-bottom: 5rem; -} - -.cardMainContainer { - display: flex; - flex-direction: column; - text-align: left; - padding: 0.8rem; -} - -.cardMainContainer .input1,.input2,.input3,.input4 { - width: 10rem; - height: 1.5rem; - border-radius: 5px; - margin-top: 0.5rem; - border-style: dashed; - margin-bottom: 0.2rem; -} - -.actionButton { - border: 2px dashed #767676; - border-radius: 5px; - width: max-content; - padding-left: 1rem; - padding-right: 1rem; - padding-top: 0.3rem; - padding-bottom: 0.3rem; - margin-top: 1rem; -} - -.actionButton:hover { - border-style: solid; - border-color: black; - cursor: pointer; -} - -.madeWithLove { - font-family: Poor Story; - text-align: right; - width: 100%; - font-size: 1.5rem; - padding: 1rem; - padding-right: 1.5rem; -} - -.madeWithLove span { - font-family: Krakoan; - letter-spacing: 0.2rem; - margin-right: 1rem; -} - -.screwComp { - display: flex; - flex-direction: column; - position: absolute; - right: 9rem; - bottom: 1rem; -} - -.screwComp img { - width: 1rem; - height: 1rem; - margin-bottom: 0.8rem; -} -``` - -Now lets talk about the most important file in React, which is the App.js. It is in this file where we control which component gets rendered for which route. - -``` -//Contents of App.js -import { BrowserRouter, Routes, Route} from 'react-router-dom'; -import "./App.css"; - -import Home from './components/home'; - -function App() { - return ( -
- -
- - } - /> - + export default Home; + ``` +7. **Check the Browser Window**: Open the browser window to see the list of books fetched from your backend API server and displayed on the screen. + + +
+

Welcome to the Home Page

+
    +
  • Book 1
    • +
  • Book 2
    • +
  • Book 3
    • +
- -
- ); -} + -export default App; -``` +By setting up a proxy from your backend API server to your frontend React app, you can avoid issues related to cross-origin requests during development. This allows you to focus on building your application without worrying about the underlying infrastructure. + +## Styling and making Requests from the frontend -Congrats you just completed your MERN Project 🎊🥳 +> Now that you have set up your backend API server and connected it to your frontend React app, it's time to style your app and make requests to the API endpoints. You can use CSS for styling and fetch API for making requests from the frontend. -## Lets have it working +Here is a simple guide to styling and making requests from the frontend: -Lets run it. Make sure you are in your root directory. Also make sure you have the .env file in your backend folder with the your environment variables. Now run these commands. +1. **Create a `styles.css` File**: Create a new file called `styles.css` in the `src` folder of your React app to add custom styles. -``` -cd backend/ -npm install -npm start -``` + ```css title="src/styles.css" + body { + font-family: 'Arial', sans-serif; + background-color: #f0f0f0; + margin: 0; + padding: 0; + } -The output is + .container { + max-width: 800px; + margin: 0 auto; + padding: 20px; + } -![npm start output on backend](./output2.png) + .heading { + font-size: 24px; + font-weight: bold; + margin-bottom: 20px; + } -Now open another terminal in the root directory. Run the below command + .list { + list-style-type: none; + padding: 0; + } -``` -cd frontend/ -npm install -npm start -``` + .item { + background-color: #fff; + border: 1px solid #ccc; + margin-bottom: 10px; + padding: 10px; + } + ``` +2. **Update the `App.js` File**: Update your `App.js` file to include the custom styles. + + ```js title="src/App.js" + import React, { useEffect, useState } from 'react'; + import './styles.css'; + + const App = () => { + const [books, setBooks] = useState([]); + + useEffect(() => { + fetch('/api/books') + .then(response => response.json()) + .then(data => setBooks(data)) + .catch(error => console.error(error)); + }, []); + + return ( +
+

Book List

+
    + {books.map(book => ( +
  • {book.title}
    • + ))} +
+
+ ); + }; -The output is + export default App; + ``` -![npm start on frontend](output1.png) +3. **Check the Browser Window**: Open the browser window to see the list of books displayed with the custom styles applied. -Open _http://localhost:3000_ to view your react application + +
+

Book List

+
    +
  • Book 1
    • +
  • Book 2
    • +
  • Book 3
    • +
+
+ -It will look like the below (The UI isn’t the best, I know 😅) +By adding custom styles to your React app and making requests to the API endpoints, you can create a visually appealing and interactive user interface. You can experiment with different styles, layouts, and components to enhance the user experience and make your app more engaging. -![Client side output](infino.jpg) +Once you have styled your app and made requests to the API endpoints, you can continue to add more features, functionality, and components to build a full-fledged web application. You can also explore other libraries, frameworks, and tools to further enhance your app and take it to the next level. -Only the addbook route has been written😅, so only the “Add A Book” feature works. Consider adding the following features - - Borrow a Book - - Return a Book - - Delete a Book -Good luck !! 😁👍 +:::tip +**Key Takeaways** +- The MERN stack consists of MongoDB, Express.js, React.js, and Node.js, which work together to build modern web applications. +- Express.js is a minimal and flexible Node.js web application framework that provides a robust set of features for building web applications and APIs. +- React.js is a JavaScript library for building user interfaces and single-page applications using a component-based architecture. +- By setting up a MongoDB Atlas cluster, building an API with Express.js, creating a React app, and connecting the frontend to the backend, you can build a simple MERN application. +- You can use CSS for styling your app and fetch API for making requests from the frontend to the backend. +- By following best practices, experimenting with different technologies, and continuously learning and improving your skills, you can become a proficient full-stack developer and build amazing web applications. +- Remember to have fun, stay curious, and keep exploring new ideas and technologies to expand your knowledge and grow as a developer. +- If you have any questions, feedback, or suggestions, feel free to reach out to the authors or the community for help and [support](https://codeharborhub.github.io/community/supports#-how-to-get-support). Happy coding! 🚀 +::: -Stay tuned and Do make sure to check out my articles [@ams_132](https://medium.com/@ams_132) !!! +## Conclusion -_Sayonara… Until next time_ \ No newline at end of file +In this blog post, we covered the basics of the MERN stack and walked you through the process of building a simple MERN application. We started by setting up a MongoDB Atlas cluster, building an API with Express.js, creating a React app, and connecting the frontend to the backend. We also covered styling and making requests from the frontend to the backend API server. diff --git a/blog/getting-started-with-mern/infino.jpg b/blog/getting-started-with-mern/infino.jpg deleted file mode 100644 index b17d7a6ec..000000000 Binary files a/blog/getting-started-with-mern/infino.jpg and /dev/null differ diff --git a/blog/getting-started-with-mern/output1.png b/blog/getting-started-with-mern/output1.png deleted file mode 100644 index 39d21c083..000000000 Binary files a/blog/getting-started-with-mern/output1.png and /dev/null differ diff --git a/blog/getting-started-with-mern/output2.png b/blog/getting-started-with-mern/output2.png deleted file mode 100644 index 9c948577a..000000000 Binary files a/blog/getting-started-with-mern/output2.png and /dev/null differ diff --git a/blog/getting-started-with-mern/output3.png b/blog/getting-started-with-mern/output3.png deleted file mode 100644 index 4d1dab703..000000000 Binary files a/blog/getting-started-with-mern/output3.png and /dev/null differ diff --git a/blog/getting-started-with-mern/react.jpg b/blog/getting-started-with-mern/react.jpg deleted file mode 100644 index 31d0009c6..000000000 Binary files a/blog/getting-started-with-mern/react.jpg and /dev/null differ diff --git a/blog/getting-started-with-microservices/index.md b/blog/getting-started-with-microservices/index.md index f7a79081b..7af56ea76 100644 --- a/blog/getting-started-with-microservices/index.md +++ b/blog/getting-started-with-microservices/index.md @@ -786,6 +786,8 @@ Now let’s see how we can develop an Api-gateway for our application. ![img14](./images/image14.png) -Throughout this journey, we explored the core concepts of microservices, compared them to monolithic architectures, to developing microservices. +That’s it! We have successfully developed a microservices architecture with a service registry, communication between microservices, and an API gateway. This modular approach to software design offers several benefits, including increased agility, scalability, and resilience. By breaking down complex applications into smaller, more manageable services, we can achieve faster development cycles, easier maintenance, and better scalability. Microservices architecture is a powerful design pattern that can help organizations adapt to changing business requirements and deliver innovative solutions to customers. -Thanks for taking the time to read our article. \ No newline at end of file +## Conclusion + +Microservices architecture is a design pattern that structures an application as a collection of small, loosely coupled services. Each service is self-contained, focused on a specific business functionality, and can be developed, deployed, and scaled independently. This modular approach to software design offers several benefits, including increased agility, scalability, and resilience. \ No newline at end of file diff --git a/docs/react/getting-started/getting-started.md b/docs/react/getting-started/getting-started.md index b1cd61e69..4d7aae8af 100644 --- a/docs/react/getting-started/getting-started.md +++ b/docs/react/getting-started/getting-started.md @@ -145,8 +145,8 @@ Runs the app in development mode. Open [http://localhost:3000](http://localhost:
-
- logo +
+ logo

Edit src/App.js and save to reload.