aautioaautio
24

React Express Postgres Heroku

screenshot of React Express Postgres Heroku

Boilerplate for Create React App with Express API and Postgres hosted in Heroku

Github

Overview

If you're looking to streamline your web application development, this boilerplate for a React frontend with an Express API backend and Postgres database is an excellent choice. It simplifies the process of starting projects, especially for those who want to deploy on Heroku. This setup not only provides a solid foundation but also ensures that best practices in development and deployment are followed, making it a fantastic option for both beginners and seasoned developers.

With its built-in features that support effective local development and easy deployment, this boilerplate can help you set up a robust full-stack application without getting overwhelmed by the complexities often associated with configuring these technologies.

Features

  • NPM Scripts for Easy Management: Comes with predefined scripts that simplify local development and streamline Heroku deployments, allowing for efficient project management.

  • Create React App Integration: Leverages Create React App in the react-ui folder for faster setup and development of the frontend, equipped with live reloading to enhance user experience.

  • Express API Backend: Features a well-structured Express API in the server folder with request logging capabilities, facilitating debugging and monitoring.

  • Postgres Database Access: Provides access to a Postgres database using pg-promise, ensuring seamless communication between the application and the database.

  • Database Setup and Migration: Utilizes postgrator for simple database setup and migrations, allowing you to manage your database schema effortlessly.

  • Secure HTTPS on Heroku: Automatically configures HTTPS for secure communication when deployed on Heroku, enhancing the security of your application.

  • Local Development Connection Setup: Offers a straightforward guide to configuring your Postgres connection string, making it easy to establish a local development environment.

  • Live Reload and Auto-reloading: Implements live reload capabilities in the Create React App and uses nodemon for reloading the API server, ensuring that changes are immediately reflected during development.