Create-react-app: Question: How to proxy requests in production?

[patwalls]

I feel like an idiot...

I have create-react-app and a Rails 5 API. All requests should hit the rails server, and I was able to use the proxy feature in package.json, which is awesome!

"proxy": "http://localhost:3001"

But how do I do this in production? In production my rails server can't live at the same domain as my create-react-app right, unless I am missing something?

Thanks for your help.

[Timer]

@patwalls hi! You need to set this up yourself; most likely on the rails side.
You can make rails serve the static assets so they're on the same domain, or you can prefix all of your api calls with the API-server URL and control it via an env var (/ in dev, http://api.example.com/ in production).

Even if rails only serves the index.html, you can configure the production build to reference a CDN/different url.
Checkout the PUBLIC_URL env var.

[Timer]

You might find this blog post really handy.

x-ref: #1358

[Timer]

Closing this as answered. Let us know if you have more problems!

[patwalls]

Sorry I didn't respond. I went with the latter option you explained.

I used the rack-cors gem for rails and prefixed all my API calls. I did this in prod and dev, and just got rid of the proxy in the package.json

I'm curious, do you know of any good boilerplate that has rails backend, create-react-app frontend built into one repo and maybe even have a good heroku/AWS buildpack ready to go? Would be interested to take a look.

[cbartram]

Im not sure what your stack is but something which is working for me in development and in productions is to use the / route in your NodeJS Server to serve the static assets made by react from npm run build so in your Express Server you could do something like this app.use('/', express.static('build')); That way you can have both the production build client and server running on the same domain with no need for a proxy!

[aislanmaia]

In my case, I have an phoenix backend hosted on Heroku and a react app static build on S3. I'm pretending to use create-react-app for my frontend to get its benefits (I'm using old configs with webpack v1). How can I make requests to it without hardcode the Endpoint url string on the "fetch" function, preserving the call like this fetch('/api/foo', ...)

[mjsisley]

Make I an environment variable something like process.env.REACT_APP_API_DOMAIN. Make sure it is set when you build (Netfliy let’s you set env vars, of building locally can use cross-env or dotenv

[patwalls]

Netlify has been great for me for hosting create-react-app, I second @mjsisley.

[aislanmaia]

Thanks @mjsisley and @patwalls . In my webpack v1 config, I'm using an API_HOST variable configured through the webpack's Define Plugin, it exposes globally in my js files the variable, so that I'm using my fetch functions like: fetch(${API_HOST}/api/foo/...) . Is there a way to avoid the concatenation, maintaining the call like this fetch('/api/foo') ? This will clean up a little bit my code when making requests to the server.

[arushijain45]

In my case, I am having java backend hosted on AWS EB and a react app on S3. After concatenating my requests with API-server URL, I am getting an empty response. Why is so? Is there an issue of CORS?