18

I have a frontend running for example on int.myapp.com and it's backend on int.backend.myapp.com. I thought I can do the proxing with the proxy.config.json like this:

 "/api": {
    "target": "https://int.backend.myapp.com",
    "secure": true,
    "changeOrigin": true
  }

And in my package.json file

"start": "ng serve --proxy-config proxy.conf.json"

Everything works on my dev environment.

But when I build for production :

ng build --prod

and deploy on firebase

firebase deploy

The web application is not able to communicate with the API

How can I do to fix it ?

tobias47n9e
  • 2,233
  • 3
  • 28
  • 54
Franky
  • 902
  • 2
  • 11
  • 28
  • 2
    Firebase Hosting is for hosting static assets (HTML, client-side JS files, images, etc) only. It cannot be used to run node.js scripts (or any other server-side code). See http://stackoverflow.com/questions/32026032/firebase-hosting-issues – Frank van Puffelen Dec 06 '16 at 15:29
  • I am going to assume from some context here that this is angular2, and remove the tag for AngularJs, which this question wouldn't apply to. – Claies Dec 06 '16 at 15:32
  • 2
    I'd like an answer to this as well irrespective of Firebase hosting. From what I can see thus far, using --proxy-config only seems to be for development. My research hasn't indicated anything concerning the Angular 2 CLI supporting this kind of proxy config into a PROD-distributable asset that will run node/express or anything on the server to provide this proxy. – Justin N Feb 21 '17 at 17:44
  • I am trying to figure out something very similar, angular4 app, need proxy setup in production on IIS. Here is my question: https://stackoverflow.com/questions/46122687/hosting-a-website-in-iis-8-with-proxy-settings – user2347528 Sep 08 '17 at 20:32
  • Franky - did get any solution on this? I also stuck at this point. I build the code using "ng-build" and copied the "dist" folder to apache server. But my rest api's which are configured using "proxy-config" are not working. – Vijay Shegokar Nov 14 '17 at 05:35
  • @VijayShegokar i have the same problem did you found any solution for this please ?! – ZINE Mahmoud Jun 10 '22 at 15:35

2 Answers2

5

In case anybody else run into this problem, I found a workaround in case you still want to run locally your production angular application, use the http-server application: 

npm install -g http-server

Build your production application:

ng build --prod

Go to your dist/[YOUR_APP_NAME_FOLDER] folder: 

cd dist/[YOUR_APP_NAME_FOLDER]

Run the http-server application and pass the Proxy option (--proxy or -P) with the backend proxy you would like to point to: 

 http-server -c-1 -P http://localhost:3000 .
vhbazan
  • 1,240
  • 1
  • 17
  • 26
0

During deploying your app to production: Configure the server to redirect requests for missing files to index.html. Learn more about server-side redirects here https://angular-doc.ru/guide/deployment#fallback.

Basic deployment to a remote server

For the simplest deployment, create a production build and copy the output directory to a web server.

Start with the production build:

content_copy ng build --prod Copy everything within the output folder (dist/ by default) to a folder on the server.

Configure the server to redirect requests for missing files to index.html. Learn more about server-side redirects below.

source https://angular-doc.ru/guide/deployment

Alexander Kuzichkin
  • 111
  • 1
  • 2