I've been working to deploy a nodejs/react application to Azure but I seem to be having some issues getting things up and running. I have tried lots of different approaches (see below) but I just wanted to confirm a few things to make sure I'm on the right track - I am an experienced dev but have only recently started to work with nodejs/react/Azure and the build process in general. I just wanted to check that I have setup my project correctly with regards to the production build and basic hosting setup for Azure.
Apologies if these seem like pretty basic (an obvious) questions, this is my first exposure to cloud services and hosting express/React .. I have done lots of research but found so many answers that appear to contradict each other I just want to get a definitive answer from the community so thanks in advance.
My application consists of a React application with an express API backend. Both projects use typescript. My build folder is currently as follows ..
client build static index.html .. other files server index.js .. other files node_modules package.json web.config
My package.json only contains the start command "node server/index.js" My application has client-side rooting that should be handled by React. My web.config is as follows ..
<?xml version="1.0"?>
<configuration>
<system.webServer>
<handlers>
<add name="iisnode" path="index.js" verb="*" modules="iisnode" />
</handlers>
<rewrite>
<rules>
<rule name="Client Routes" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
<add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
</conditions>
<action type="Rewrite" url="/" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>
The site is being hosted by a Windows App service in Azure. Virtual applications and directories setup
**Vitrual Path Physical Type**
/ site\wwroot Application
/application site\wwroot\client\build Directory (React
homepage=/application)
I am using visual studio code to deploy the build folder to the app service, application setting SCM_DO_BUILD_DURNG_DEPLOYMENT = false (VM does not have enough memory to build on deployment)
So, Firstly I wanted to confirm if Azure requires a specific folder structure to host this type of application. I have read various posts where the files in the server folder (index.js/server.js) appear at the web site root (wwwroot). Is this mandatory or, is this not important as long as the configuration of site root in Azure points to the wwroot/server folder?
This leads to my second question. Does Azure expect the nodejs server application to have a specific name (i.e. server.js)? Most examples I have seen have named the file server.js so I'm just wondering if if this is a requirement of Azure/app service or, if I would need to add any additional config in the Azure app server to use index.js.
Where should my web.config file be placed, in the website root (wwwroot) or the application root (wwwroot/server)? Again, most posts I have read suggest the web site root however, if my application root (virtual path) is wwwroot\server does this affect where the web.config file should be placed? Or, is this file required to live in the web site root?
In my Virtual applications and directories setup in Azure I have set the application root '/' to point to the wwwroot folder however, my index.js file resides in the wwwroot\server folder. My React app homepage is set to '/application' .. I assumed I would need to configure a virtual folder for this? Or, should this route be handled by my application route '/' (i.e. remove the virtual directory).
Note: the React app hosted at '/application' does display the static content (index.html) however, routing does not appear to be working (i.e. '/application/api/..').
- Lastly, I just want to understand Azure/nodejs setup. I have set my node version in Azure and I confirmed that the named version is installed. I have included a handler for iisnode in my web.config. I assumed this handler will execute my index.js file and handle routing however, when I access the root of my application 'mysite/' I see the contents of the index.js file - the file is displayed rather than executed? Does this mean that the handler is not working or, have I misconfigured/misunderstood the setup (here or above)?
Thanks.
In short I have tried various virtual application/folder settings and site configuration options for the Windows app service in Azure, confirmed node version, setup iisnode handler, tried deploying the site as a docker container image, and tried using various versions of the web.config.
When I publish the site I seem to be able to access the static content linked to a virtual folder (/application) but the application routes are not accessible (i.e. /application/api/..). When accessing the site route '/' the contents of index.js are displayed (instead of executed) - this also happens when I try to access my API routes - the requests seem to be correctly redirected to the server application but the routes are not resolved.
