Why Deploying React Apps is Easier Than Ever, Thanks to Netlify
If, like me, you hadn’t really heard about Netlify then let me share my experience with you. It is a serverless platform where you can build and deploy. When put like that it sounds pretty basic, doesn’t it? But it offers a lot more.
Why I tried to avoid using any kind of server at first
I like writing code — no I love writing code. This does not mean I like having to deal with servers and config and annoying stuff like that. I understand it; I just don’t like it. I have used AWS, I even have an AWS certification! Still don’t like having to deal with it though.
Due to the dislike I have for server configuration, I decided to avoid it. My app didn’t need any backend code especially as I utilised the power of WebAssembly (see my article about WebAssembly with React here). I started by creating an Electron app using React. I had also thought this would save me money, as serving up any kind of webapp costs money right? More on cost later.
This was all fine until people actually used my app. As soon as the installer was distributed, it was out of my control, it was gone. My users also told me they’d like to use the app on mobile. This led me down the route of converting to a webapp.
Investigating server options
As many of us use AWS in our working day, it feels like a natural go-to platform for any work we are doing on our hobby project, but we also know that you can unknowingly accrue costs. For example, I had my own personal AWS account that I used to familiarise myself with AWS. I thought I’d stopped everything and cleared everything. I thought the bill that was coming through would be empty because I didn’t have anything there…. or so I thought. A few months later I checked it and I had a couple of pence on the bill. I went to look, and there in an S3 bucket, I found a random image of Eevee. (You know, the best pokemon).
I was a bit burned by Eevee, so I wanted something that I knew would be free, free until at least I had plenty of visitors and it could pay for itself. I went on a little investigating journey.
I didn’t want to jump in with both feet
I’d heard a little about Netlify, I’d also heard I could have a site up and running in minutes. I didn’t believe it, so I read around it and looked into many options. I was really hesitant to just try something without understanding it. In the end, it seemed like the best way to understand something was just to jump in.
I tried the easy way first, I signed up for a Netlify account and following the instructions, I pointed to my private GitHub repo, granting Netlify access. I had thought because I had used webpack and not create-react-app, that I would run into more problems. I was fearful that using WebAssembly in my app was going to somehow be a troublesome area. After pressing what felt like just 2 clicks, I was given a default URL for my app. I clicked it, not expecting it to work because servers are hard right? Always some tweak you have to make here and there. There was no way this was going to work the first time. My mouth dropped open when I instantly had a fully working app served on Netlify. I ran around my living room proclaiming that Netlify was black magic. At that point, I felt naive to think it wouldn’t work.
I’m not going to share any notes on how to get it working because it’s just too simple. It’s literally “point at GitHub, make sure the build command is correct, go”. (Didn’t I just say I wasn’t going to do that?)
Deploying changes
I’m not even sure this needs its own section? You push your changes to GitHub, Netlify picks it up and without any hassle your changes are live. Oh no there’s a bug! You can make a previous build the published one in a second. Want to test your new changes from a branch? Create a PR, new URL created, test. Like I say this is just pure magic.
P.S. I love Vercel too
For a short while, I had both Netlify and Vercel running the same code at the same time and picking up the same changes from the same repo, to compare which I liked more. Vercel is just as easy as Netlify, although maybe you need 3 clicks instead of 2 to set it up. I didn’t want to maintain two different platforms, so one had to go. It was the tiniest thing that made me go for Netlify, so tiny I can’t remember what it was.
How much does it cost?
On the hobby tier, you are given 300 build minutes. My app takes a minute to build. I think I’d have to try quite hard to go over that 300-minute mark. You also get 100 GB of bandwidth. I’ve used about 100 MB. The answer is free for your hobby project. I could have just lead with that I guess.
What else can I do with Netlify?
I quickly realised my dream of having a front end only app was about to end when I wanted to offer the ability to share information between users. I just wanted a simple URL that users could pass around between each other, and share on social media to get other people to look at it. I had at first just wanted to stuff all the data in the URL but turns out I had way too much data. (You are all now recalling that tech interview you had to do for URL shortening now aren’t you?)
I wanted a free database and a free backend server. Free stuff!! Turns out fauna is pretty simple to use and works really well with Netlify serverless functions. On top of that basic CRUD functions can be generated for you. Yay for less typing! I now feel like one of those commercials that starts to say “not only do you get this free but this, this, this and this”. And you can also run this stack locally with the help of Netlify tools.
What else? I hear you cry excitedly
You can create a feedback form pretty quickly. Just put some magic fields in and magic stuff happens. There’s so much more which I’ve yet to explore but I know one thing, it won’t take long to do.
Are you still wondering why I love Netlify?
I think I can summarise that in one sentence: It has taken away my fear of server config. Correction, it’s helped me type less, which I’m now making up for by typing this article.
Oh! We are at the end of the article, thank you for reading! I am told at this point I need a call to action. I don’t have one, so why don’t you go and check out my hobby site running on Netlify. This link will call a serverless function on load. Also, you could fill out the feedback form, which only took about 10 lines of code (I honestly don’t know how many lines of code because I blinked and it was done like magic.)
