AZURE Web Apps: deploying Angular SPA & Node Express server from Github repository

Question

I have a webapp in a Github repository that has an Angular client and a Node Express backend server. I have no idea how to deploy these simultaneously to an Azure webapp. None of the tutorials cover this. The only thing they tell you to do is to have an index.html or a server.js in a root directory, which isn't how my app is structured.

But I did try moving the server to a server.js in the root directory, and then nothing happened there.

I have no idea where to start with this. Thank you very much for any help.

Tell me what more information you need because I have no idea and there is zero documentation for this.

Update: None of this appears to be working. I tried switching the virtual path for / to the dist folder where index.html lives, but this didn't do anything.

Answer 1

As it seems you also open a thread on MSDN with this issue at https://social.msdn.microsoft.com/Forums/azure/en-US/a6cbc494-dc42-4962-99c7-947cee7ff25a/nodejs-deploying-angular-spa-application-node-server-through-github-continuous-integration?forum=windowsazurewebsitespreview .

Node.js application on Azure should have an app.js or a server.js in the root of the application.

So Here is a workaround, if you want your angular app in dist folder acts as the frontend of your web application and the expressjs application acts as the backend service.

You can deploy the express js application in the root directory and the angular app folder in the same root directory too. Then you can configure the angular app in the exrepssjs routes. EG

assume your angular app entrance is index.html in dist folder in root directory:

app.get('/', function(req, res) {
    res.sendfile(__dirname+'/dist/index.html')

}); 

Which will route "/" to your angular app.

Answer 2

To solve your issue I recommend viewing the shayne boyer and john papas course on pluralsight. They explain this topic very well. play-by-play-angular-2-app-deployment .

I myself started for there, but had to make some adjustments to get it working fully.

The trick is to build your files locally and commit the build files into a seperate folder (dist).

Also you will need to add:

1. server.js file. Gist to server.js (like you mentioned)
2. package.json file. Gist to pacakge.json . This is tell azure which node and npm versions to use.
3. add web.config. Gist to web.config

If you want your app to get deployed automatically on commit, you need to setup up a githook . Click the link for instructions. Also for githook to work you will need to have a APP-settings variabele declare in your azure web app named 'Project' with value equal to your build folder (=dist in my case.).

I have a ng2 repo with a working demo in azure. Ng2a.Frontend . You can find the dist folder in there.