How to run Laravel and Angular app on the same development host?

I had to build a quick demo using Angular. I decided to use Laravel as back end for my app.

Setup

Setup went easy. I used angular2-seed for Angular. Cloned it using git.

$ git clone https://github.com/angular/angular2-seed.git my-demo-app-gui

With command "npm start" after "npm install" in the "my-demo-app-gui" folder I got my angular application running locally - http://localhost:3000.

To create a new Laravel project I used following command line command: "laravel new my-demo-app-web" to create PHP server side for my project.
In folder I just created, I executed following command: "php -S localhost:8000 -t public" to start local back end server -  http://localhost:8000.

So far everything went smoothly. So I started build something amazing, like script of Laravel is suggesting before it is finishing its job.

Since the goal for me was to build a web application that will get its data from the back end of the same host I didn't want to hard code the URL-s of my requests like this..

...
  findAll(): Promise<Entity[]> {
    return this.http
      .get('http://localhost:8000/api/entities')
      .toPromise()
      .then(response => {
        return response.json() as Entity[];
      })
      .catch(MyAmazingService.handleError)
  }
...

URL for that request should be just "/api/entities". How to solve this using my set up? Using a proxy of course..

Set up a proxy

So I opened the file named "webpack.config.js" in my Angular application folder and under "devServer" block added following lines..

...
devServer: {
    proxy: {
      '/api': 'http://localhost:8000'
    },
    ...
  }, 
...

From now on I can use URLs in my app like I described before, without specifying host and port.
I wanted to continue with development, but when I opened my browser to just see if my proxy changes were correct and everything is running I saw an error message in console of my browser..

...
EXCEPTION: Uncaught (in promise): Response with status: 504 Gateway Timeout for URL: http://localhost:3000/api/entities
...

And if I opened the terminal window where my angular app is running I could see..

...
[HPM] Error occurred while trying to proxy request /api/entities from localhost:3000 to http://localhost:8000 (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors_common_system_errors)
...

Now what?

Solution

After trying many things I started my Laravel PHP back end on a slightly "different" host..

php -S 0.0.0.0:8000 -t public

And I could continue to build something amazing.. :)

Have fun!