🔏
PexpA
  • Home
  • Knowledge
    • Design Pattern
    • RxJS
    • Computer Graphics
      • Phép biến đổi hình học
    • Javascript
      • Generator function và Yield trong javascript
      • Asynchronous và Synchronous
    • GraphQL
      • Core Concepts
      • Xây dựng GraphQL sử dụng NodeJS
    • Analysis and System Design
    • SEO
    • Database
      • NoSQL
        • MongoDB
      • SQL
    • ReactJS
      • React Fragment
      • Lifecycle trong component
      • HOCs
      • What is Ref ?
      • Context API
      • React Hooks
        • useState Hook
        • useEffect Hook
        • useLayoutEffect Hook
        • Khi nào dùng useLayoutEffect và useEffect
        • useContext Hook
        • useReducer Hook
        • useCallback Hook
        • useMemo Hook
        • useRef Hook
        • Building Your Own Hooks
      • Redux
    • React Native
      • Animations
    • Angular
    • Python
      • Object Oriented Programming
      • Decorator
      • Multi Threading
      • Generators
      • Iterators
    • Java
    • Blockchain
      • Ethereum Development Overview
      • Solidity Document
      • JSON RPC Protocol
  • Package
    • React Router V4
    • API Documentation
      • API Blueprint
      • Swagger
    • Lazyload image
    • React Helmet
    • React Spring
    • React Apollo
    • ImmerJS
    • Styled components
  • Experience
    • Sử dụng Latex trên VSCode
    • Linked List in C++
    • How to using Date, Time, TimeStamp for Java to connect Database
    • Pass props to a component rendered by React Router v4
    • Forking Workflow
  • Deploy
    • Heroku
      • How to deploy React App with Express
      • How to deploy React App with Python
      • How to deploy React App with Java
  • About me
Powered by GitBook
On this page
  • Create new React app and Express app
  • Configuration for package.json in my-server

Was this helpful?

  1. Deploy
  2. Heroku

How to deploy React App with Express

PreviousHerokuNextHow to deploy React App with Python

Last updated 4 years ago

Was this helpful?

Hey guy, Today I write a little tutorial for deploy project in React app and Express

Create new React app and Express app

create-react-app my-app
express my-server

After create project, we will change a little in folder my-server

  • Add folder client with purpose using for insert project my-app

So Architecture directory should be

|--- bin
|--- client
     |--- public
     |--- src 
     |--- .gitignore
     |--- package.json
|--- public/stylesheets
|--- routes
|--- views
|--- app.js
|--- package.json
|--- .gitignore

Configuration for package.json in my-server

{
  "name": "server",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "nodemon ./bin/www",
    "heroku-postbuild": "cd client && npm install && npm run build"
  },
  "dependencies": {
    "cookie-parser": "~1.4.4",
    "debug": "~2.6.9",
    "express": "~4.16.1",
    "http-errors": "~1.6.3",
    "jade": "~1.11.0",
    "morgan": "~1.9.1",
    "nodemon": "^1.19.3"
  }
}

I hope post will useful with you

😁