You’re building an app. It needs to store some data. What do you do?
Put it in local storage.
You can read
'item' next time users visit your app. Yay.
Unless they’re on a different computer. Or browser. Or need to share between users.
Time to add a backend. How hard can it be?
Start a RubyOnRails project, create a model for your data, add routes for reading and writing, add some glue code in your controller, install the JBuilder gem, write a JSON view, create a migration file, run the Postgres database locally, start your Rails app and you’re ready to test.
Then you go to AWS, create a new EC2 instance, pick from a billion Linux distributions, set up an HTTP server like Nginx, run your Rails app, add a cronjob to restart the app when it dies, buy a new domain on Namecheap, set up its DNS servers, wait a few hours, point the domain to your server …
… and you still need the production database.
You now have a virtual server and database running 24/7. Unless they die.
You’re in charge of keeping them up, maintaining configuration, waking up at 3am if something goes wrong, and paying for every second of every day even if nobody uses your app.
Just to store some data.
Yes, services like Heroku make it easier. Docker gives you pre-configured Linux machines, and Kubernetes does whatever Kubernetes does. Helps keep your servers alive? Maybe improve deployments?
Did I mention you still have to host your webapp somewhere?
It’s a lot of work.
Weeks of engineering time at my day job. 😅
There’s a better way, my friend. Serverless for the backend, JAMStack for the frontend.
Serverless for the backend
The simplest serverless backends look just like functions.
That’s all it takes. That’s a server 😍
I like to use TypeScript for the backend so I make fewer mistakes. That’s where the
APIGatewayEvent part comes from.
We talked about GraphQL last week, so let’s see what it takes to build a basic GraphQL API with serverless.
You need just 2 files:
- an infrastructure definition
- a lambda function that creates your GraphQL server
infrastructure as code
This might look scary, but imagine doing it by hand. Eeeevery time you want to make a small change.
It’s your whole infrastructure. Defines your runtime environment, API endpoints, even creates a database using DynamoDB. And it hooks everything up on its own.
Your infrastructure becomes code.
That way you always know what’s running in production. Every branch of your project can use a different setup, every feature can add what it needs. Never mess around by hand ever again. ✌️
We go into more detail in my new course, ServerlessReact.Dev
a small GraphQL server
And you’re done.
In those 50 lines of code, you’ve defined the shape of your API with a GraphQL schema, mapped it to resolver functions, and created a server. It even comes with a playground so you can test your API.
Heck, here’s a link 👉 try this basic API
GraphQL machinery handles data transformations and understanding queries. Serverless machinery sets up your servers, keeps them running, and exposes a URL to the world.
You’ll learn this in more detail with ServerlessReact.dev
Serverless runs only when it needs to
Serverless keeps your code ready, but not running. You only pay what you use.
That’s why I’m so ready to host that example above and give you a link. Costs me nothing. Server only runs when you hit the link.
You visit the URL and that’s when the magic happens.
Serverless wakes up a server, creates a new instance, routes the URL to your function, and calls your code. Code talks to a database, gets the data, and returns. Just like a normal function.
All within milliseconds.
👉 simple servers, running simple functions; on demand. It’s brilliant.
JAMStack to host the frontend
That’s your backend then. What about the webapp?
Well, there’s a bunch of startups solving that problem. The industry looked at how hard this was and thought “Nah, we can fix this”
And they did!
Netlify is great because it’s popular. But Zeit’s my favorite. Just because of how slick it is.
Go into your webapp folder and run
That’s it. You have a globally deployed webapp with a public URL, CDN configuration, static builds at deploy, and everything else a modern app needs.
Don’t know about you, my friend, but this is the most excited I’ve been about web development since I discovered React in 2015.
PS: yes both Netlify and Zeit added support for cloud functions in the latter parts of 2019. As much as I love the bleeding edge, I think staying a year or two behind the curve is best. They both use AWS Lambda under the hood anyway 🙂
PPS: don’t forget, ServerlessReact.Dev that teaches you this wonderful new stack in detail is $100 off just this week
Learned something new? Want to improve your skills?
Join over 10,000 engineers just like you already improving their skills!
Here's how it works 👇
PS: You should also follow me on twitter 👉 here.
It's where I go to shoot the shit about programming.