How to run ReactJS app on Azure function? - azure

I created a Azure function and deployed my build ReactJS app on it:
I can find all the files in my /wwwroot folder:
When I visit the URL I see:
What do I need to do to run my React app on Azure Function?

I guess your goal is to run a static website in a serverless way. While it is possible to serve files from Functions, a better way is to store the website files in Blob Storage static website hosting. A reference architecture is available from Microsoft's documentation.
This video explains how to create a pipeline to deploy your files to Blob Storage.
You can then use Functions as a proxy to the files in Storage.

Related

What's the best way to set up my Azure Node.js app service with an Azure Storage/Blob service

I have an Azure node.js "App Service" already set up and running, working just fine. It's connected to an Azure DB, all that works great.
What I don't have is any sort of Storage / Blob service on my account whatsoever, and I'm having trouble finding documentation about the best way to set Blob Storage up to work with my App Service.
My goal is to be able to store and retrieve files, including primarily image files (.png, .jpg) and pdfs. I think Blob storage is what I'm looking for, and I'll want to set up an API on my node.js App Service for web clients to be able to upload and download files on the Storage service.
There are 2 Azure Storage blob npm packages you can use and add to your project dependencies:
azure-storage https://www.npmjs.com/package/azure-storage
#azure/storage-blob https://www.npmjs.com/package/#azure/storage-blob
The 1st package is the most widely used azure-storage Node.js SDK. Supports blob/queue/file/table.
The 2nd package is the latest released package for blob, more lightweight and based on the latest Azure Storage architecture. Supports async methods, promise and HTTP pipeline injection.
You can go to their npm package or GitHub page for their samples.

How wwwroot folder managed by Azure Web Sites?

Where does the wwwroot folder go when I use "Publish" inside Visual Studio to deploy to Azure Web Apps?
When new instances are created, where does wwwroot folder comes from?
Is wwwroot referenced inside Azure Storage or is it in the local storage of each instance?
How to serve wwwroot files from Azure CDN instead of serving from Azure Web Apps?
As described here in the Kudu docs: https://github.com/projectkudu/kudu/wiki/Understanding-the-Azure-App-Service-file-system:
The storage is shared across your instances. Azure Storage is used behind the scenes for this.
The storage is also persistent.
As for setting up the CDN to serve files from your Web App, you can refer to documentation here: https://learn.microsoft.com/en-us/azure/app-service/app-service-web-tutorial-content-delivery-network?toc=%2fazure%2fcdn%2ftoc.json.
If you setup the origin hostname as yourapp.azurewebsites.net, then content that would be accessed via yourapp.azurewebsites.net/myimage.png can then be accessed via CDN from yourcdn.azureedge.net/myimage.png.

How to deploy NodeJS project to Azure websites?

We have a NodeJs project we are building with TeamCity, then using FTP, uploading the built files to our Azure web app (.azurewebsites). The project contains thousands of files, so the FTP upload times are very slow (takes a very long time). We would prefer to package the build as a ZIP file, then upload the ZIP with FTP (much faster). However, how do we unzip the ZIP file on Azure using script?
Or is there a better way to deploy our build to our Azure web app?
NOTES:
This is an Azure web app service, does not live on a VM
Our process needs to be automated with script to support CI/CD
Deployments with Git and other repos are not feasible
You can use the Kudu API or MsBuild to deploy an app (web app or Function) to Azure App service. The deployment is usually done in 2 parts:
Deploy the app service using ARM templates
Deploy the code/App using one of these methods
If you're using VSTS, there are templates for both steps and make it a 2min process to setup. If you're not using VSTS, the Kudu API is he best way to solve the problem.
You can find more information here : https://github.com/projectkudu/kudu/wiki/REST-API
You can also use the Azure PowerShell Management cmdlets to achieve the same. However, this is at the moment only supported on Windows

Deploying Single Page app from appveyor to azure

I'm trying to figure out how to continuously deploy a single page application from appveyor to an azure website. I'm in a bit of a bind because I don't have access to the azure directly, so I'm trying to figure out as many details before contacting the admin, but the appveyor/azure documentation is leaving me with some questions.
My Goals:
Deploy a static site after it's built or trigger azure to do a deployment after a successful build. The app is written in typescript with angular and a bunch of other dependencies that get compiled and bundled into a static site.
I do not want the end user to ever know a deployment is taking place, so any incremental copying to a live environment is out.
I do not want to check in derived files or builds into the repo.
I currently have a build system that bundles the static site it in a zip archive. So my questions are:
Will using the WebDeploy provider meet my goals? Will there be any downtime during deployments if I deploy the zip archive as an artifact?
Is there another approach that would work better?
Is there a way to do this with azure automated deployments? For example, trigger azure to deploy after a successful build. If so, can kudu handle cloning a private submodule as part of the deployment process. I saw that they have submodule support, but I couldn't figure out from the docs if there would be any authentication issues with private submodules.
FYI, the build system is 100% NodeJS driven and independent of the windows ecosystem.
AppVeyor will will automatically deploy to an Azure website. Use the website below to setup your deployment.
http://www.appveyor.com/docs/deployment/web-deploy
Users are going to notice the change if the static files are not cached in their browsers or if they do a hard reload. Regardless of the implementation method, It is advisable to use a CDN (content delivery network). Connect the CDN endpoints to your app service and have the DNS point to the CDN instead of app service. The CDN will serve the static files to the end user instead of the app service itself. The CDN caches the last deployed files and continues serving them to end user until you purge them. Hence, you can keep deploying to your app service and the end user doesn't get affected by your deployments at all since they are accessing your site via CDN instead of app service. Once you have a stable deployment, you can purge your CDN and the latest code will be cached to the CDN again from your app service.
To answer your question about deploying the code, Regardless of the CI/CD system you use, FTP deployment from azure CLI can be one of the methods. Click here for details. However, WebDeploy is the most standard methods of all when you deploy to an app service.

Accessing Web App Files by Cloud Service

I have deployed my web app and the cloud service on windows azure. Web app saved some of the image files on its own directory lets say on root of the website there is folder name "Content" and web app save the image files on this folder. is there a way a cloud service can access files inside that folder? cloud service is separate project and hence has its own url and hosted on windows azure portal.
AFAIK, it is not possible to share files stored in a web app with a cloud service. What you should do instead is save the files in Blob Storage. That way both Web App and Cloud service can have access to the files.
Another option you have is Azure File Services, you will have the chance to used as a network shared location.
take a look at this here:
https://azure.microsoft.com/en-us/documentation/articles/storage-dotnet-how-to-use-files/

Resources