What if I told you modern tools let you build and launch a small webapp in 30 minutes? Complete with SSL, a .com domain, a database, a documented API, CDN hosting, fast static initial loads, and a hydrated SPA?

That's the challenge I posed at Silicon Valley Code Camp this weekend. The audience didn't believe me, so it was time to perform some magic. 🧙

Here's the app 👉 ishotdogtaco.com

And the code 👉 Swizec/hot-dog-taco

Like all magicians, I cheated on stage. Had some code snippets prepared, knew what I was building, and how. Like Penn & Teller once said:

Sometimes, magic is just someone spending more time on something than anyone else might reasonably expect.

The real build, from scratch, while figuring it out ... that takes 70min.

Click through for source

Click through for source

It's all about the stack. A new paradigm for building webapps that's emerging.

You build the application logic, platforms take care of the rest. Focus on the part that makes your idea special.

Your app comes in two parts:

server for sharing and persisting data between clients, heavy slow operations, data analysis, etc.

for sharing and persisting data between clients, heavy slow operations, data analysis, etc. web/mobile for user-facing UI, single user logic, etc.

You use serverless technologies to host your server. A few lines of configuration, some javascript code, and you're ready to accept requests. Plus it's scalable.

No need to deal with Kubernetes and Dockers and setting up your own DNS configs and dev environments and whatnot. It's pretty neat.

For the frontend, you use the JAMstack. Loosely. Create a single page app, use Gatsby or Next to get fast static initial loads, talk to your backend via API – a GraphQL API.

Since your frontend and backend are decoupled, you can host them separately. Let serverless deal with just your API and data, host everything else as a static page on a CDN.

Your app is live, fast, and scales well.

I encourage you to look at github for the full code. Here's a couple interesting bits.

Hot Dog Taco is a small app so the backend is simple: A graphql server that handles one API endpoint serving all queries.

Bigger graphql servers still have just a single API, but their type definitions and query resolvers are bigger :)

Click through for source

Those 56 or so lines are all it took. Apollo GraphQL libraries do most of the heavy lifting.

We write a type definition for our GraphQL schema – the types, queries, and mutations – and a bunch of resolvers that say "When this query comes in, run this function to get or save data to the database"

The database is DynamoDB because that's quickest to set up.

Oh and I promised a documented API. Apollo takes care of that when you open the GraphQL playground.

The web side is a bunch of React components using Apollo hooks to run queries and fetch data. No central authority, no setup for global state, just components getting what they need when they need.

You can see the webapp code on github

Apollo caching takes care of speed and performance behind the scenes, I think. Haven't dug into that very deep yet to be honest.

Here's how the webapp works:

Click through for source

We've got a couple of GraphQL queries defined as constants, and two important React components:

<VoteButton> is a button that votes Yes or No when clicked. Runs a GraphQL mutation and waits for a response. <Votes> pokes our GraphQL API with a query and returns the results. This is where we see whether a hot dog is a taco.

Notice how each component handles its own API communication internally? No need to bother the whole app with global state and other weird complications.

It's like edge computing but for React components 🤔

The rest is Gatsby machinery handling all the hard stuff. Compiles to a static build at deploy, gives us routing, basic page layout, even a little bit of CSS defaults.

Host it with Netlify or Zeit and voila: A live webapp with SSL and fast CDN setup.

Because the Cube Rule is an amazing unified theory of food identification.

But also to show that it can be done.

You can launch an app with little effort these days. The web stack has never been so productive and I'm excited as heck to see what happens next.

I'm expecting a cambrian explosion of indie startups. Small apps solving real problems, making their creators rich.

You excited?

Cheers, ~Swizec

Did you enjoy this article? 👎 👍

Published on October 21st, 2019 in Back End, Front End, Technical

Learned something new?

Want to become a high value JavaScript expert? Here's how it works 👇 Leave your email and I'll send you an Interactive Modern JavaScript Cheatsheet 📖right away. After that you'll get thoughtfully written emails every week about React, JavaScript, and your career. Lessons learned over my 20 years in the industry working with companies ranging from tiny startups to Fortune5 behemoths. Start with an interactive cheatsheet 📖 Then get thoughtful letters 💌 on mindsets, tactics, and technical skills for your career. "Man, love your simple writing! Yours is the only email I open from marketers and only blog that I give a fuck to read & scroll till the end. And wow always take away lessons with me. Inspiring! And very relatable. 👌" ~ Ashish Kumar Your Name Your Email Your Address Subscribe & Become an expert 💌 Join over 10,000 engineers just like you already improving their JS careers with my letters, workshops, courses, and talks. ✌️

Have a burning question that you think I can answer? I don't have all of the answers, but I have some! Hit me up on twitter or book a 30min ama for in-depth help.

Ready to Stop copy pasting D3 examples and create data visualizations of your own? Learn how to build scalable dataviz components your whole team can understand with React for Data Visualization

Curious about Serverless and the modern backend? Check out Serverless Handbook, modern backend for the frontend engineer.

Ready to learn how it all fits together and build a modern webapp from scratch? Learn how to launch a webapp and make your first 💰 on the side with ServerlessReact.Dev

Want to brush up on your modern JavaScript syntax? Check out my interactive cheatsheet: es6cheatsheet.com

By the way, just in case no one has told you it yet today: I love and appreciate you for who you are ❤️