Connect Front to Back - MERN Stack Project

This repository contains a MERN (MongoDB, Express, React, Node) stack project that demonstrates how to connect a front-end React application to a back-end Node/Express API. It can serve as a boilerplate project for a MERN stack application, providing a solid foundation for building scalable and maintainable applications. The project is based on the following tutorial I wrote: Setting up a Full Stack React & Node.js Project: A Comprehensive Cheat Sheet.

Table of Contents

• Connect Front to Back - MERN Stack Project
  • Table of Contents
    • Prerequisites
    • Setup
    • Running the Application
    • Contributing
  • License

Prerequisites

Before you start, ensure you have the following installed:

• Node.js (v14.x or later)
• npm (v7.x or later)
• yarn (v1.x or later)

Setup

To set up the project, follow these steps:

1. Clone the repository:

git clone https://github.com/obrm/connect-front-to-back.git

2. Install the necessary dependencies:

npm install

3. Create a config.env file in the config directory:

cd config
touch config.env

4. Add the following lines to your config.env file:

NODE_ENV=development
PORT=5000

6. Navigate to the client directory:

cd ..
cd client

7. Install the necessary dependencies¹:

yarn

Running the Application

To run the application, in the root directory, start the Node/Express server and the react application concurrently:

npm run dev

The server will be running on http://localhost:5000 and the React Vite application will be running on http://localhost:5173.

Now you have both the front-end and back-end servers running. You can interact with the application through the browser on http://localhost:5173 and see how the front-end React app communicates with the back-end Node/Express API.

Contributing

We welcome contributions to this project. To contribute, follow these steps:

1. Fork the repository.
2. Create a new branch: git checkout -b <branch_name>.
3. Make your changes and commit them: git commit -m '<commit_message>'.
4. Push the changes to the new branch: git push origin <branch_name>.
5. Create a pull request.

Please ensure your code adheres to the existing style and that you properly document your changes.

License

This project is licensed under the MIT License.

Footnotes

1. If you don't have yarn installed on your machine, then first run: npm install -g yarn. ↩