Deploying ReactJS application in production (with nodeJS backend)

前端 未结 3 767
清酒与你
清酒与你 2021-02-11 05:28

our project is now over, we only have two weeks to give back the project for our final year\'s studies at University. Our teacher told us that now that development phase was ove

相关标签:
3条回答
  • 2021-02-11 05:59

    To deploy a react app build with the cli create-react-app , first you need to set the host in your package.json , so in your package.json added this line

    "homepage":"http://localhost/" ,assuming you will host your app on the root directory of your webserver 
    

    your package.json will look something like this

    {
      "name": "nameofyourapp",
      "version": "0.1.0",
      "private": true,
      "homepage":"http://localhost/",
      "dependencies": {
        .....
      },
      "scripts": {
      ......
      }
    }
    

    then inside your app folder run this commande

    npm run build
    

    then copy what inside your build folder and paste it in the root directory of your serveur you will ended up with files like this

    httdocs //root directory of your webserver
      |
      |-static
      |
      |-index.html
      |-serviceworker.js
    

    after that you cant access your webserver from your browser : http://localhost/

    0 讨论(0)
  • 2021-02-11 06:01

    In 2019 this does work for me:

    in node.js server:

    app.use('/react',   express.static(path.join(__dirname, '../client/build')));
    

    in package.json react

    http://localhost:server-port/client 
    

    and in browser just type

    http://localhost:server-port/client .
    

    You should see react homepage now. Hopefully helpful for somebody.

    0 讨论(0)
  • 2021-02-11 06:02

    I assumed you used create-react-app to generate your react project. My folder structure is like:

    • client (it is my react app)
    • config
    • controllers
    • routes
    • models
    • index.js (express app is in index.js)
    • package.json

    Following step that I used to deployed my app to Heroku:

    1. In package.json, added this line to the scripts "heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client".

    2. Then added this "engines": { "node" : "[your node version]" } after scripts.

    3. In index.js, put the following code after your routes set up

      if (process.env.NODE_ENV === "production") {
        app.use(express.static("client/build"));
        const path = require("path");
        app.get("*", (req, res) => {
          res.sendFile(path.resolve(__dirname, "client", "build", "index.html"));
        });
      }
      
    4. I assume that you use git for version control and already install heroku. Open your terminal, then heroku login -> heroku create -> git push heroku master. If you do not get any error, you are success to deploy your app.

    This is my GitHub https://github.com/dnp1204/instagrom that I deployed my app to Heroku. I hope it will give you some idea how to do so

    Hope you will get it to work!

    0 讨论(0)
提交回复
热议问题