Create a Full-Stack Nuxt Application: A Twitch Journey

I finally did it!

After months of thinking about it, I finally started my first stream on Twitch, the 28th of April 2024. It's a very important step for me because I love sharing my knowledge and talking about what I'm doing.

When I was at school, I organized some lessons for my classmates to explain programming. I also joined a community to explain things about computers, I gave some talks, and recently, I started to write articles on my blog.

Twitch is just a new way to continue doing what I love!

For the coming weeks, I'll share with you my journey to build a full-stack Nuxt application, deployed on Cloudflare, called Orion. I'll explain how I built it, the choices I made, and the problems I encountered. My goal through this article is to give you an honest and realistic view of the pros and cons of building a full-stack application on the edge with Nuxt in May 2024 through the process of building a real-world application.

In this article, I'll share with you every step of this first series of streams. If you don't speak French (because streams are in French), if you missed a stream, or if you simply prefer to read, this article is for you!

Discovering NuxtHub and starting the full-stack Nuxt application

Orion is a full-stack application built with Nuxt and developed live on Twitch. You can see the replay on YouTube and the source code is open-source on GitHub.

This was my first stream, and to be honest, I was a bit stressed. The moment when you have to change the scene from the "Starting Soon" to the facecam is hard. But once I started to talk, everything went well. However, that doesn't mean it's the best stream you'll ever see. We're going to improve!

First, I introduce NuxtHub. It is a platform built by the Nuxt team to facilitate the deployment and management of Nuxt applications deployed on Cloudflare. In a few clicks, you can deploy your Nuxt application on Cloudflare. That's really magical! Thanks to a Nuxt module, you will be able to develop your application locally and then deploy it without tweaking your code. Everything, from the database to the blog storage, works seamlessly in both environments.

I tried to deploy a template from NuxtHub to show how easy it is to use the platform. I chose the Atinotes template. Unfortunately, this application produces a bundle bigger than 1MB, the limit for the free tier, so the deployment fails. Sad for a demonstration. After this fail, I was thinking about a way to prevent this and to tell users whether a template requires a paid plan or not. I raised an issue that was quickly fixed!. Demo will wait for later.

After this beautiful demo effect, we start coding the full-stack Nuxt application by adding authentication. To do so, we use the module nuxt-auth-utils from Sébastien Chopin. With a few lines of code, we add authentication. Here is the code we used:

export default oauth.githubEventHandler({
  config: {
    emailRequired: true,
  },
  async onSuccess(event, { user, tokens }) {
    await setUserSession(event, {
      user: {
        githubId: user.githubId,
      },
    })

    return sendRedirect(event, '/')
  },
})

That's really simple and it works like a charm, nicely integrated into a Nuxt application.

To finish the stream, I quickly set up NuxtHub into my application to show how easy it is to play with a database. I tried to use raw SQL, but the recipe to migrate the database was not working. I raised an issue about it and it's now fixed! After this second fail, I decided to start using Drizzle ORM, a simple but powerful ORM compatible with the workers of Cloudflare. In all cases, I should have to use Drizzle because managing everything with raw SQL is too much work.

During the live, someone asked how to apply migration to the production database. I have to admit that I didn't know the answer and nothing in the documentation was clear about it. I raised an issue about it that received an answer. You have to deploy your app and then start the local dev with a remote connection to run migrations Clearly, it's far from being good for the moment, but with the upcoming Nitro tasks, it should be easier in the near future. I really hope.

Globally, I'm so happy to have started this stream. Even if it's far from being good, but getting started is already a big step forward, and I know that future streams will only get easier to start.

I was so stressed that I went very fast in my explanations, so I decided that the next stream would be more talkative to re-explain different concepts.

The project is open-source and available on GitHub at orion

Discussion on Cloudflare, NuxtHub, and GitHub OAuth

Orion is a full-stack application built with Nuxt and developed live on Twitch. You can see the replay on YouTube and the source code is open-source on GitHub.

I was frustrated by my first live stream. With the stress, I didn't explain things like what is Cloudflare, what is the edge and how NuxtHub is related to Cloudflare. But I know it's important to explain these concepts since it's new technologies and not everyone knows them.

At StrasbourgJS or Devoxx, I talked about UnJS and problems solved by the ecosystem. Many people, during or after, ask me about the edge. What is it? Why do we need it? Where does it come from?