My first experience with React, NodeJS and Azure

This is my first ever publication describing my first ever experience with commercial NodeJS, React and Azure. It has been a very fun journey understanding how all those pieces work together.

A bit of context

I started this project because I wanted to find a better and more comfortable way for my colleagues and myself to work.
Right now we are working with only a master branch that holds the latest version of the code on our whole code base.
This is a problem in two ways. First, we can't work independently on each project in our code base because they are all in the same git repo. Secondly, having only a master branch that we build from and publish to our environment means that if there is a live issue, we can't come back in time to tags and make hot fixes unless no one has merged any work in since the last release (spoiler alert, this never happens when you have a team working on the repo). I have been thinking about those problems for a long time and after some research and failed experiments I finally got my chance.

The company decided that it was time for us to have an API which means a complete rewrite of our client website. I was ecstatic! It was finally the time to split our code base in multiple projects and have a completely independent client that could be developed, built and deployed on its own side.
I took a look around and tried building applications with AngularJs, Vue.js and React. I know there are more solutions out there but the idea was to find a solution that would suit my main criteria: my colleagues comfort.

I had no experience with those framework before which was a good point to judge of the ease to learn and readability of each of these with very little experience. The story of my choice should probably be another blog post but I ended up choosing React and more precisely create-react-app to manage my project. The ease of building the client website and the ease of having a development environment with auto reload was a big plus.

Why Azure, and how good is it?

Currently our whole stack is using .Net MVC, so my first choice was to try to deploy my NodeJs client using Azure. I used this very detailed tutorial to do so. I was charmed right away by the fact that you could trigger the deploy script by pushing to a branch and also the fact it was a very scalable solution.

I decided that I would try to make a full proof of concept website using React and create a deployment flow with a development, a staging and a production environment.

Make everything work together

This was the point I hit the part where I am the less experienced. And where I struggled the most. Because on one side I had a React project using create-react-app and on the other I had the test project using Microsoft tutorial and I wanted to make my Azure WebApp serve my client.

I decided to recreate a React app in my Microsoft project. I now had a client directory where I could run npm run start but most importantly I could run npm run build and get a static website in the build folder.
From there I could easily setup my express instance to only serve the index.html from the build directory.

A rapid test on my local machine confirmed that after building I was serving the right thing.

And now the fun part - Update the build script

At this point I was amazed by how everything went fine all the way through the development of this POC. So the last part was to make sure that when pushing to my Azure branch the website would build before being deployed.
And this is when the things got a little bit more complicated. All the solution that I found were not was I was looking for.

• This one was talking about copying the build directory using FTP. An easy solution but not at all good for a team of more than... 1 person.
• I found one that was talking about using Gulp to create the build and run it by modifying the deployment script.

And this was almost all I could find (with countless re-blog), the other solutions I would find would be outdated or would not use create-react-app. So I decided to create a custom solution using the Gulp solution as a wire frame for my own.

What I had to do was to change the deploy script triggered after each push to the Azure branch. Those scripts can be downloaded at this address: [your-webapp-name].scm.azurewebsites.net in Tools -> Download Deployment Script. Those scripts need to be added to your root directory and will be executed instead of the default ones.

You want at this point to be aware that when we call npm run build in a create-react-app application it calls an npm package called react-scripts that is used to build the application.

It took a while to find the right way to do it. Obviously using create-react-app command line was impossible as you can't install global command line on a WebApp. I then tried to get react-scripts in my root project in order to use the react-scripts.cmd build command from my root project but you can't pass a context to this command which means that my first functional version was doing this:

• Run npm install in the root project, that would install react-scripts
• Move to the client directory
• Run call ..\node_modules\.bin\react-scripts.cmd build

This worked for my first very simple react app because I had everything needed to build the application in my root package.json. But as soon as I introduced new packages in my client application I realised that my build would fail.
So I tuned my script a bit to install all the packages for the client and not include react-scripts in my root packages.json because it is not needed by the express app and should not be installed. And here is the current deployment script.

On top of that I ended up creating two more WebApp instances to prove this also works if we have different staging environment.

Conclusion

I am very happy with the way this proof of concept ended up looking. It was an interesting experience to discover all those new technologies and way to deploy applications.
Azure WebApp are (at least for this usage) a very good and efficient way to deploy applications.
On top of that I manage to reach all my objectives: Have a totally independent client code base, an easy way to manage staging environment using git branching strategies, while keeping everything easy to use and work with for my colleagues.

TL;DR: You can make your React app served by Express running on Microsoft Azure Wep App using this deployment script.

I hope this was interesting. As this is my first blog post, please feel free to make comments on the form of this post as well so I can improve it!