How do I deploy a React Webpack web app to Azure App Service?

4
votes

My Azure web app deployment from Dropbox does not work.

I have an App service running. I am trying to deploy my React Webpack app. I have tried deploy from my Bitbucket repo, but that whole project is loaded into D:\home\site\wwwroot and just sits there since Kudu apparently thinks it is a node.js app. From what I've read Kudu does that with any git deployment with a package.json file. So I tried to deploy from Dropbox instead. I set up my app's source correctly to my Dropbox/Apps/Azure/ directory and then clicked Sync. I got the following result:

Title Synchronization Request Submitted Description The repository for web app is being updated. Status Informational Timestamp Wed Nov 23 2016 08:44:09 GMT-0500 (Eastern Standard Time) UTC Timestamp Wed, 23 Nov 2016 13:44:09 GMT Correlation IDs 447bf0d0-a533-49dd-898a-57b5be6b5738 Percent Completed 100

But the bits at D:\home\site\wwwroot still show the code from the old git repo deploys. At my Dropbox page I have the bits that I want to deploy, namely from the build folder after a Webpack build run. They have index.html at the root, so I expect it would be served correctly if just copied over to Azure.

I am quite new at this whole Azure thing, can someone help?

EDITED WITH MORE INFORMATION BELOW.

To be clear, I am not deploying any code like app.js/server.js contained in a wwwroot folder. I have copied only the results from a Webpack build run over to the Dropbox folder that is specified to Azure as the source. That Dropbox folder looks like this:

asset-manifest.json
favicon.ico
index.html
splash.css
static
    css
        main.63e4d058.css
        main.63e4d058.css.map
    js
        main.68797484.js
        main.68797484.js.map
    media
        dell-300-426.b435b6bd.png
        duck.1d942aad.svg
        example1.9443ef49.png
        icon_question.3672f035.png
        ipad-montecarlo-demo.2d964854.png
        moneyplan-imac-300-552-new.8814ce0f.png
web.config

The index.html file has a script tag with code that points to the main.68797484.js file, which is the bundled app code.

But in Azure Deployment options, after clicking Sync, the result reads "No deployments found", even though there was a notification that "The repository for web app is being updated."

2
reactjswebpackazure-web-app-service

2 Answers

4
votes

I created a repo that should solve this problem with automatic deploys.

https://github.com/ulrikaugustsson/azure-appservice-static

In short it will build the project and then copy the build folder to wwwroot.

2
votes

Per my experience, if app.js/server.js is contained in wwwroot floder, then Kudu will think it is a node.js app and generate the web.config. So if your app is not node.js app, the wwwroot floder should not cover neither app.js nor server.js.

For your reference, I wrote the react & webpack hello world project and successfully deployed to Azure. Below is the concrete steps, could you please have a try?

  1. Put your project to GitHub repo which is similar to Bitbucket. And both of them offer great Git services, here you can use Bitbuket instead.

  2. In your app's menu blade in the Azure portal, click APP DEPLOYMENT > Deployment options. Click Choose Source, then select the deployment source. enter image description here

  3. In the Deployment source blade, choose the project and branch to deploy from. When you're done, click OK. enter image description here

  4. In the Azure portal, click APP DEPLOYMENT > Deployment options. Then click Sync in the blade. enter image description here
  5. Set your entry HTML file in the Default documents as below:enter image description here
  6. Eventually, browse your website and you will see something like this:enter image description here