none
[Node.js][Web Apps] Deploying Angular SPA application & Node server through Github continuous integration. RRS feed

Answers

  • Your Node.js application should have an 'app.js' or a 'server.js' in the root of the application.

    It should use serve-static (npm package) to serve up static content - the serve-static area should be mounted on / and serve up your angular application.

    If your application needs to be built (beyond doing a "npm install --production"), then you will need to create a deployment script and add an npm build.  I've written a blog about this process before here: https://shellmonger.com/2015/08/29/continuous-deployment-nodejs-and-microsoft-azure/


    Thursday, March 3, 2016 1:21 AM
  • My testing here seems to corroborate @Adrian Hall (MSFT)'s answer, that Node.js application 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. E.G

    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.

     
    Thursday, March 3, 2016 5:13 AM
    Moderator

All replies

  • Is there even documentation for this?
    Wednesday, March 2, 2016 8:16 PM
  • Where is there any documentation for this? This is just flailing around in the dark. Why is this so obscure?
    Wednesday, March 2, 2016 11:52 PM
  • Well, adjusted the virtual directory at `/` to the physical directory where my `index.html` lives, but this didn't do anything.
    Thursday, March 3, 2016 12:01 AM
  • Your Node.js application should have an 'app.js' or a 'server.js' in the root of the application.

    It should use serve-static (npm package) to serve up static content - the serve-static area should be mounted on / and serve up your angular application.

    If your application needs to be built (beyond doing a "npm install --production"), then you will need to create a deployment script and add an npm build.  I've written a blog about this process before here: https://shellmonger.com/2015/08/29/continuous-deployment-nodejs-and-microsoft-azure/


    Thursday, March 3, 2016 1:21 AM
  • Thanks for the NPM build information. What about doing them both alongside eachother? The Node app isn't serving any Jade files, it's just an API server, so it's a little different than another article I've found. I need it to run the API server and serve index.html not through a jade route.
    Thursday, March 3, 2016 5:11 AM
  • My testing here seems to corroborate @Adrian Hall (MSFT)'s answer, that Node.js application 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. E.G

    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.

     
    Thursday, March 3, 2016 5:13 AM
    Moderator
  • Hmmmm - that seems to have timed out. I have a call with customer service tomorrow, I'll figure it out there & reconvene here.
    Thursday, March 3, 2016 5:48 AM
  • I did *sort of* get it to work using the webconfig in this blog here & adjusting it to the path.

    https://blogs.msdn.microsoft.com/azureossds/2015/11/28/creating-an-angularjs-single-page-application-with-routes-on-azure-webapps/

    The title of the app was loading in the tab on my browser. But there was a new problem. It was saying there was an unexpected token in my bundle.js. I use browsersync to bundle everything up & it seems to be having problems there... there is some HTML in there. 

    Thursday, March 3, 2016 6:22 AM
  • The link you provided cannot make the expressjs app server run successfully in a single Azure Web Apps service. You need two Web Apps services for this approach.

    And about the browsersync, do you have bundled all scripts in bundle.js in your original repository or you bundle those in deployment task?

     
    Thursday, March 3, 2016 7:42 AM
    Moderator