Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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

This repository contains a MERN stack project that demonstrates how to connect a front-end React application created with Vite 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.
https://github.com/obrm/connect-front-to-back-vite

boilerplate dotenv express full-stack mongoose react vite

Last synced: 5 days ago
JSON representation

Host: GitHub
URL: https://github.com/obrm/connect-front-to-back-vite
Owner: obrm
Created: 2023-03-18T17:13:40.000Z (over 1 year ago)
Default Branch: master
Last Pushed: 2023-12-03T09:37:42.000Z (12 months ago)
Last Synced: 2023-12-03T10:26:15.783Z (12 months ago)
Topics: boilerplate, dotenv, express, full-stack, mongoose, react, vite
Language: JavaScript
Homepage:
Size: 56.6 KB
Stars: 9
Watchers: 2
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# 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.](https://medium.com/@obrm770/setting-up-a-full-stack-react-node-js-project-a-comprehensive-cheat-sheet-ee326576c21a)

## Table of Contents

- [Connect Front to Back - MERN Stack Project](#connect-front-to-back---mern-stack-project)
- [Table of Contents](#table-of-contents)
- [Prerequisites](#prerequisites)
- [Setup](#setup)
- [Running the Application](#running-the-application)
- [Contributing](#contributing)
- [License](#license)

#### Prerequisites

Before you start, ensure you have the following installed:

* [Node.js](https://nodejs.org/en/download) (v14.x or later)
* [npm](https://www.npmjs.com/get-npm) (v7.x or later)
* [yarn](https://classic.yarnpkg.com/lang/en/docs/install) (v1.x or later)

#### Setup

To set up the project, follow these steps:

1. Clone the repository:

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

2. Install the necessary dependencies:

```bash
npm install
```

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

```bash
cd config
touch config.env
```
4. Add the following lines to your config.env file:
```env
NODE_ENV=development
PORT=5000
```

6. Navigate to the client directory:
```bash
cd ..
cd client
```
7. Install the necessary dependencies[^1]:
```bash
yarn
```

#### Running the Application

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

```bash
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 `.
3. Make your changes and commit them: `git commit -m ''`.
4. Push the changes to the new branch: `git push origin `.
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.

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