A ready to customize project to make a nice webapp using Node.js (Express.js) for the backend and React with Typescript and Redux for the frontend.

Last update: Mar 16, 2022

A nice boilerplate to start wit Node.js and React

Use this repository to build a webapp with Express.js (backend) and React+Redux (frontend).

This webapp uses RESTFULL APIs using HTTP Post messages. React app talk with the server using a Bkconnect Js file.

In this example I use Postgres for DB.

  1. Install backend env:

    • cd ./webserver/api/
      
    • cp .env.example .env
      
    • npm install
      
    • npm install '@pm2/io'
      
    • To test the CSV db API you can run npm test (it use mocha)
  2. Install frontend env:

    • cd ../client/
      
    • cp .env.example .env
      
    • adapt .env file to your backend ip address (if you run all in local you can leave 'localhost')
    • npm install
      
    • npm install -g serve
      
    • npm run build
      
  3. Run both applications: To run the applications you can do in different way:

    1. Using PM2 server manager there is a ecosystem.config.js, run it with this command in the root of the project:
      • Install pm2 with npm i -g pm2
      • Start ecosystem with pm2 start ecosystem.config.js
    2. Manually you can run both apps in this way:
      • Execute serve.sh script (it runs 'npm run start' on the backend and 'npm run serve' on the client)

Note:

The automated scripts must be executable with right permissions:

chmod +x ./install.sh
chmod +x ./serve.sh

use node -v to make shure to have the latest Node.js version.

In production mode:

Change webserver/client/.env file --> Comment Locallhost ip address and set it with your server public IP

GitHub

https://github.com/Elius94/Express_React_Redux_Boilerplate
You might also like...

Full Stack boilerplate with JWT Authentication - Built with React, Typescript, Node, Express, GraphQL, PostgreSQL, Redis, and Webpack

Full Stack boilerplate with JWT Authentication - Built with React, Typescript, Node, Express, GraphQL, PostgreSQL, Redis, and Webpack

Full Stack boilerplate with JWT Authentication - Built with React, Typescript, Node, Express, GraphQL, PostgreSQL, Redis, and Webpack

May 27, 2022

An Electron boilerplate featuring typescript, react, webpack, tailwind and redux - ready to use!

A secure, modular, and easy to use Electron Forge boilerplate featuring Typescript, React, Webpack, TailwindCSS, Redux and persistance (with redux-persist support)

Jun 23, 2022

Bash-prompt-generator - Easily customize bash prompt PS1 colors, written with React

Bash-prompt-generator - Easily customize bash prompt PS1 colors, written with React

Bash prompt generator This is a web app for helping you customize the colors in

Jun 18, 2022

Starter template using React on a website's frontend - without Node

Starter template using React on a website's frontend - without Node

React Frontend Quickstart ⚛️ 📦 Starter template using React on a website's frontend - without Node Preview Documentation License Released under MIT b

Nov 22, 2021

A growing collection of responsive Chakra UI Templates ready to drop into your React project.

A growing collection of responsive Chakra UI Templates ready to drop into your React project.

Jun 20, 2022

Dinos-nft-minting-dapp - A nice and easy way for linking an existing NFT smart contract to this minting dapp

Dinos-nft-minting-dapp - A nice and easy way for linking an existing NFT smart contract to this minting dapp

Welcome to HashLips 👄 All the code in these repos was created and explained by

Jan 6, 2022

Starter template for Vite with React (TypeScript). Supports Tailwind with CSS-Modules. Jest and @react/testing-library configured and ready to go. Also ESLint, Prettier, Husky, Commit-lint and Atomic Design for components.

Starter template for Vite with React (TypeScript). Supports Tailwind with CSS-Modules. Jest and @react/testing-library configured and ready to go. Also ESLint, Prettier, Husky, Commit-lint and Atomic Design for components.

Mocking up web app with Vital(speed) Live Demo Features ⚡️ React 17 🦾 TypeScript, of course 🫀 Jest - unitary testing made easy 🎨 Tailwind with JIT

Jun 20, 2022

Electron-app - A ready-to-go with a well-thought-out structure Electron app boilerplate with ReactJS, TypeScript

Electron-app - A ready-to-go with a well-thought-out structure Electron app boilerplate with ReactJS, TypeScript

Electron App 💅  A ready-to-go with a well-thought-out structure Electron app bo

Jun 17, 2022

This is a fully functional google search engine book it was created with Restful API and i refactored it to the GraphQL built with Apollo server with the use of the MERN stack with react front end MongoDB database, Node.js, Express and API

This is a fully functional google search engine book it was created with Restful API and i refactored it to the GraphQL built with Apollo server with the use of the MERN stack with react front end MongoDB database, Node.js, Express and API

Book Search Engine To checkout the live site on heroku. Table of Contents Description Installation Technologies Usage Contribution Questions Descripti

May 29, 2022
Full-stack React app built with Typescript, Bootstrap, Apollo client on the frontend, and NodeJS/Express, Typescript, Apollo server, and MongoDB/mongoose on the backend.

Event Scheduler App This project was bootstrapped with Create React App. Event Scheduler is a React app that allows users to create events. An event c

May 30, 2022
A starter boilerplate for a universal webapp using express, react, redux, webpack, and react-transform

React Redux Universal Hot Example About This is a starter boilerplate app I've put together using the following technologies: Isomorphic Universal ren

Jun 22, 2022
Jun 12, 2022
A demo repo to dockerize React Frontend(using Create React App) and Express Backend

This is a Demo Repository to dockerize a React frontend and an express backend in a single container. The two important files are: Dockerfile contains

Jun 3, 2022
CRUD App using MERN Stack, it uses ReactJS for Front-end, NodeJS, Express For the Backend and Mongo DB as database!
CRUD App using MERN Stack, it uses ReactJS for Front-end, NodeJS, Express For the Backend and Mongo DB as database!

Book Collection List ?? Demonstration of the application | Features | Technologies used | Application installation ?? Demonstration of the application

Jun 14, 2022
My Anime List : A web app which is bulit using react as a frontend and firebase as a backend
My Anime List : A web app which is bulit using react as a frontend and firebase as a backend

Firebase_My_Anime_List Deployed Project on firebase - https://myanimelist-e637e.web.app/ My_Anime_List is webapp which is bulit using react as a front

Jan 31, 2022
React-typescript-mini-project - Node Module Search With Typescript Reactjs and Redux
React-typescript-mini-project - Node Module Search With Typescript Reactjs and Redux

Node Module Search Getting Started It is project for freshers who want to learn

Jan 22, 2022
A well-structured production-ready frontend boilerplate for React and Next.js

superplate-core-plugins This is the source repository for superplate's core plugins. Plugins UI Frameworks Tailwind CSS React Bootstrap Chakra UI Ant

Jun 7, 2022
Boilerplate for building applications with a React frontend and a C++ gRPC backend

Boilerplate for building applications with a React frontend and a C++ gRPC backend. How To Run Backend Install Bazel Bazel is for building the backend

Feb 27, 2022