How to deploy Angular with PHP backend to Heroku

170
July 30, 2017, at 10:34 AM

So I am really struggling getting my head around the best way to create a full web application using Heroku. I have just tried to use my knowledge as best as I can to make what I know but it's starting to get a bit complicated so some guidance on best practices would be appreciated.

I have created an Angular app that makes a call to a mySQL database through PHP scripts which in turn returns JSON. I have it all setup working locally with the PHP files and the database running on a WAMP server and this is running fine.

I have now tried to get my basic prototype online using heroku. Firstly I tried creating a PHP app on Heroku. I set it up and dropped in my PHP files and when I accessed them using (heroku-address)/phpfile.php it ran one of the specific PHP file requests (One of the PHP files makes a request to the runescape API using a cURL request. So I then built my Angular app using ng build and added it to Heroku App but I could not work out how to make it run correctly.

Fast forward a few hours and currently I have switched the server to run Node and now my Angular app works but the PHP files do not run.

What I am looking for is a way to have Heroku run my Angular app front-end and then the PHP files be accessible backend to make the cURL requests or access a database. Currently when I run my app and Angular makes a request to a php file I get the error 404, cannot GET/ file.php. Or when I try to access it directly via the URL I get the same error. The buildpack for PHP and Node is installed already.

Sorry for the vague question but I've watched tutorial after tutorial and I keep going in circles and Heroku has no guidance on this situation.

Structure of app

#Main #node_modules #public (contains the built angular app) #vendor composer.json (list of my .php files) index.js package.json procfile

composer.json
{
}
index.js
var express = require('express');
var path = require('path');
var app = express();
const port = process.env.PORT || '5000';
app.set('port', port);
app.use(express.static(__dirname + '/public'));
app.get('/[^\.]+$', function(req, res) {
    res.set('Content-Type', 'text/html')
        .sendFile(path.join(__dirname, '/public/index.html'))
});
app.listen(app.get('port'), function() {
    console.log("Node app is running at localhost:" + app.get('port'))
});
package.json
{
    "name": "osduel-test",
    "versions": "1.0.0",
    "main": "index.js",
    "engines": {
        "node": "5.9.1"
    },
    "dependencies": {
        "ejs":"2.4.1",
        "express":"4.13.3",
        "path": "0.12.7",
        "mongoose": "4.9.3",
        "body-parser": "1.17.1",
        "compression": "1.6.2"
    }
}
procfile
web: node index.js vendor/bin/heroku-php-apache2 web/
READ ALSO
How can I handle DOM events that happens in a sequence(one after the another)?

How can I handle DOM events that happens in a sequence(one after the another)?

For example if there are two buttons on the screen that has to be pressed in a sequence for a certain function to run how can I write the code? I am trying to make a menu app where when a user clicks the size of drink and the type of drink in a sequence...

177
Python stdin not flushing after Nodejs process had added to it.

Python stdin not flushing after Nodejs process had added to it.

I am currently building an image processing application in node that takes images, uploads them, then sends an array of names of the files to a Python child process which then processes them and sends back a result

181
upload file in nodejs

upload file in nodejs

I am tring to upload a file with NodeJs here is my code

295
How to let the user add markers in Google maps and save them Android

How to let the user add markers in Google maps and save them Android

I have a Map of Google integrated in my app, where I added 4 markers for testing purposesAll's fine

201