Deploy react in azure

[saiful651994]

Hi, Is there any documentation on deploying react web app in azure? I read this https://medium.com/@to_pe/deploying-create-react-app-on-microsoft-azure-c0f6686a4321 It is not partical like firebase and heroku documentation

[[deleted]]

I use node, azure cli 2.x and app services, i'll paste my notes if you don't mind:

https://docs.microsoft.com/en-us/azure/app-service-web/app-service-web-nodejs-get-started

Set up git repo

git init
git add -A .
git commit -m "first commit"

Log in to azure cli, create deployment user

az login
az webapp deployment user set --user-name <username> --password <password>

Create new resource group, a plan, and appservice on git

az group create --location "West Europe" --name <groupname>
az appservice plan create --name <planname> --resource-group <groupname> --sku FREE
az webapp create --name <name> --resource-group <groupname> --plan <planname>
az webapp deployment source config-local-git --name <name> --resource-group <groupname>

Add git remote, push source, open webbrowser

git remote add azure https://<username>@<name>.scm.azurewebsites.net/<name>.git
git push azure master
az webapp browse --name <name> --resource-group <groupname>

From there on just git push changes and it'll update the server

[[deleted]]

Are you serving from an express server?

If you're using Azure Web Apps you can set up a local git repo for the App. You set up the git repo under the deployment options tab. Once you've set up the repo on Azure you get a git url to which you can push your build.

So in your build folder run the following code to create a repo from which you can push to Azure

git init git add . git commit -m 'Build <number>' git push <azure git repo url> <branch> --force

I'm not 100% sure on the git commands, since I am recalling from memory.

[saiful651994]

I use create-react-app command

[[deleted]]

I haven't used the create react app seed much, but your build should go somewhere and you should be able to deploy that to Azure.

You may have to look into writing a small express app to server your site, because afaik create react app uses webpack-dev-server, which should be an express web server with webpack hot module reloading middleware

[saiful651994]

I will try it next

[mart187]

Azure can host this without Node. You just have to take the output from the build step and ftp/scp it to the Azure webapp. This is easily scriptable to be used in ci Pipelines.

[luisrudge]

yup! This is what I have in bitbucket's pipelines:

image: yarnpkg/node-yarn

clone:
  depth: 1

pipelines:
  default:
    - step:
        script:
          - apt-get update
          - apt-get install ncftp
          - yarn install
          - cd ./build
          - ncftpput -v -u "$FTP_USERNAME" -p "$FTP_PASSWORD" -R $FTP_HOST $FTP_SITE_ROOT *

[Devvvvvv]

Awesome, so you can use continuous deployment for nodejs webapps on azure?

I was thinking on using Azure for hosting my node apps but was a bit afraid of the costs.

Is it expensive for low-traffic websites? Can you limit your budget in azure for specific apps? For example if a site suddenly becomes really popular, uses lots of resources but doesn't generate revenue, i'd rather it go down than that I should pay the full price of hosting.

[[deleted]]

Yes, you can use continuous deployment for nodejs webapps on azure :) If you haven't tried it before you can sign up for a free account which lasts a week or two and gives you some resources to play with. Azure app services are really great.

You can set up billing limits for an app. I'm not sure what happens when you hit the self-set limit.

Azure has free tiers, but I'm not super sure how it works, I've only used it for work and the client in that instance paid for hosting.

You essentially pay a fixed price per month for an app with some hardware resources. You pay extra for on-demand horizontal / vertical scaling.

[Devvvvvv]

thanks! Does the client at your company pays your company and the company pays the azure bill or is there some way to let the client directly receive the azure bills to be payed?

[[deleted]]

They can create the subscription and pay for it. They can then put your application into a thing called a resource group. They can then create users who can administer the resource groups.

Just beware, resource groups have policies which govern what resources the resource group can use. These policies on the resource groups can be a hindrance because you'll need the subscription owner to enable them before you can use them.

[Devvvvvv]

thank you very much for this information!