CODEWITHSUNDEEP
reactjsdeploymentfrontend
Алекс
Алекс

Reputation: 17

How to deploy react's app, which use API-server?

I have frontend-app, written using React, which use api-server https://koalerplate-xxxxxxx.now.sh".

//package.json

{
     ...
      "dependencies": {
        "bulma": "^0.7.1",
        "react": "^16.4.1",
        "react-dom": "^16.4.1",
        "react-redux": "^5.0.7",
        "react-scripts": "1.1.4",
        "redux": "^4.0.0",
        "redux-saga": "^0.16.0"
      },
      "scripts": {
        "start": "react-scripts start",
      },
      "proxy": "https://koalerplate-xxxxxxx.now.sh"
    }

"npm start", then in browser opening "localhost:3000" and all working correctly. How can I deploy this app ? How I must apply "proxy": "https://koalerplate-xxxxxxx.now.sh" ? I tried use webpack for build, got index.html + bundle.js, and upload this 2 files to static server, but not working.. and in file bundle.js I can't find this proxy "koalerplate-xxxxxxx.now.sh"

Upvotes: 0

Views: 1380

Answers (2)

erichardson30
erichardson30

Reputation: 5044

Create-react-app allows you to use environment variables. You can find more info defined here : https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-custom-environment-variables

When you run npm run build it generates static html/css/js files and does not use the package.json any longer so the proxy will not apply. You need to define an environment variable like the documentation shows and when you do a build, it will apply the value of the environment variable to your application.

Upvotes: 1

yoursweater
yoursweater

Reputation: 2041

You're going to use npm run build to create a static file, and then you can host that using any static file server you want (for example, Node/Express). However, things get more complicated if you're using React-Router.

Here's the link to the complete guide on this subject: Deployment Instructions

It's very thorough and should answer all your questions.

Upvotes: 0

Related Questions