MERN-Stack Setup in vs code for ubuntu (linux)

The MERN stack, a combination of MongoDB, Express.js, React.js, and Node.js, has revolutionized web development by offering a comprehensive JavaScript-based solution for building powerful and scalable web applications. If you're an Ubuntu user and prefer VS Code as your code editor, this guide will assist you in setting up a MERN development environment on your system.

In this step-by-step tutorial, I will walk you through the process of configuring your Ubuntu OS to create a robust MERN development environment in VS Code. We will cover the installation of Node.js and npm, setup and configuration of MongoDB, project initialization, and the integration of Express.js for server-side development, as well as React.js

By the end of this guide, you'll have a fully functional MERN development setup, enabling you to build dynamic web applications that leverage the power of MongoDB for data storage, Express.js for server-side logic, React.js for interactive user interfaces, and Node.js for seamless connectivity.

Let's embark on this exciting journey of MERN stack development on Ubuntu OS with VS Code, and unlock the potential to create modern and feature-rich web applications!

Prerequisites: Before getting started, ensure you have the following prerequisites:

1. Ubuntu OS is installed on your machine.

2. VS Code is also installed in Ubuntu.

   Step 1: Installing Node.js and npm

1. Open the Terminal in Ubuntu.

2. Run the following command to update the package repository:

   sudo apt update

3. Install Node.js and npm using the following command:

   sudo apt install nodejs npm

4. Verify the installation by command:

   node --v

   npm --v

   Step 2: Installing and Configuring MongoDB

5. Install MongoDB by running the following commands:

   wget -qO - https://www.mongodb.org/static/pgp/server-4.4.asc | sudo apt-key add - echo "deb [ arch=amd64,arm64 ] https://repo.mongodb.org/apt/ubuntu focal/mongodb-org/4.4 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb-org-4.4.list sudo apt update sudo apt install mongodb-org

6. Start the MongoDB service:

   sudo systemctl start mongod

7. Verify that MongoDB is running:

   sudo systemctl status mongod

   Step 3: Creating a New MERN Project

8. Create a new folder for your project and open it in VS Code.

9. Open the integrated Terminal in VS Code.

10. Initialize a new Node.js project by running the following command:

    npm init -y

11. Install the required dependencies by executing the following command:

    npm install express react react-dom mongoose concurrently

12. Create a new file named server.js in the project root directory.

    touch server.js

13. Open server.js and import the necessary modules:

    const express = require('express');
    const mongoose = require('mongoose');
    

14. Configure the Express app and establish a connection with MongoDB:

    const app = express();
    
    mongoose.connect('mongodb://localhost:27017/mydatabase', {
      useNewUrlParser: true,
      useUnifiedTopology: true
    })
    .then(() => console.log('Connected to MongoDB'))
    .catch(err => console.error('Failed to connect to MongoDB', err));
    

15. Add a sample route in server.js:

    app.get('/', (req, res) => {
      res.send('Hello MERN Stack!');
    });
    
    app.listen(5000, () => {
      console.log('Server is running on port 5000');
    });
    

    Step 4: Setting Up React.js

16. Create a new directory called client inside your project's root directory:

    mkdir client

17. Change to the client directory:

    cd client

18. Initialize a new React.js project:

    npx create-react-app .

19. Start the React development server:

    npm start

    Conclusion:

    Congratulations! You have successfully established a robust MERN stack development environment on Ubuntu OS using Visual Studio Code. By following this guide, you have installed the necessary components, configured your project structure, and gained the ability to build dynamic web applications with MongoDB, Express.js, React.js, and Node.js.

    With this solid foundation in place, you are now equipped to embark on an exciting journey of creating modern and scalable web applications. The MERN stack's flexibility, coupled with the power of Ubuntu and the convenience of VS Code, provides you with a versatile toolkit to bring your web development ideas to life.

    Remember to continue exploring the vast possibilities offered by the MERN stack, leveraging its rich ecosystem of libraries, frameworks, and community resources. Stay curious, keep learning, and let your creativity flourish as you build innovative solutions using the MERN stack.

    Happy coding and best of luck on your MERN stack development endeavors!