GitHub Actions + React JS+ Azure Web App

Photo by Vijayasimha BR on Unsplash

So, I figured out how to deploy, static web app with GitHub Actions with Azure Web App. I thought, how hard can react js be? Well, it’s very hard.

as usual, the full code, is here.

GitHub - Jay-study-nildana/GitHubActionsReactJS: a github actions azure web app example for React…

So, let’s go.

make sure you have a react project ready. You can find several, react projects that are alive and running, here.

FrontEndForStudents/ReactJSForStudents at main · Jay-study-nildana/FrontEndForStudents

Also, you may want to read the more simpler, GitHub Actions activity with a static web app. Just to get you warmed up.

GitHub Actions + Vanilla JS Bootstrap + Azure Web App

Okay, so, with all that preparation, let’s begin.

First up, get your YAML file ready. And, of course, an azure web app should be ready too.

the YAML, would look something like this.

So, that is mostly self explanatory. Two things, I wish to emphasize.

this step will cut down about 40 minutes from your ‘build’ step.

run: zip release.zip ./* -r

and this step, will ensure that your react web app, actually runs.

AZURE_WEBAPP_PACKAGE_PATH: 'build'

and, here are some general notes to remember.

1. even if your app runs just fine, locally, you will get a lot of problems when you deploy.
2. make sure, the env values are updated immediately to match your azure web app.
3. I had to use “build”: “CI=false && react-scripts build”. usually, the “CI=false” is not neccessary, if your react code is perfect and has zero warnings. mine has a lot of warnings, and I did not want to fix it.
4. unit tests. I did not want any unit tests to run. so, I removed the ‘test’ section from package.json.
5. now, even after all this, you will not have build errors. but, you will still get plenty of deployment errors.
6. timeouts can happen.
7. the target web app might not be powerful enough, storage, RAM, network bandwidth on azure, to perform the deployment. so, you may have to use a higher level, more expensive web app.
8. the deployment step can take anywhere from 10 to 20 minutes.

And, that’s, that. happy deploying.

I work as a full-time freelance coding tutor. Hire me at UpWork or Fiverr or Stack Overflow or GitHub. see my personal website. see my photography art hobby at Behance and Unsplash and ArtStation. Also, podcast about life. podcast about movies. and Twitch. and YouTube Channel. If you are a student, join my discord server.