💻 Introducing NuxtHub

Welcome, everyone. My name is Peter Saulitis. I'm on the Developer Marketing Team at Cloudflare. I am beyond excited. It is long overdue that we are showcasing Nuxt Hub within the Cloudflare community. In the spirit of Developer Week, we are on day four and all the amazing product announcements that we've been making over the past few days. We are beyond honored to have one of the best builders around, Sébastien Chopin, to talk about how he's leveraged many of the products that we have actually GA'd this week to build Nuxt Hub. Séb, do you mind introducing yourself to the audience on Cloudflare TV? Hello, everyone. I'm Sébastien Chopin. I'm author of Nuxt and CEO at Nuxt Labs. I like fancy shirts, playing basketball, taking care of my kid, traveling with my wife, and most of all, coding with Nuxt and building on top of Cloudflare is my new hobby now. Awesome. We also have Adam Murray, who is the Senior Product Manager on the Workers Platform. Adam, I know you've been on CFTV before, but do you mind reintroducing yourself for any of the new viewers on today? Yeah. Hi, my name is Adam Murray. Like Peter said, I am a PM that specifically focuses on workers authoring and testing. So if you've used Wrangler before, if you've used this new pages Wrangler Tomo config file that we just introduced before, those are the kinds of things that my team is building. We just built a new vTest integration, and we are constantly building things that help platform builders like Séb get onto our Cloudflare developer platform. So I'm really excited to be here to talk to you more about this today. Awesome. Yeah. And before we talk about Nuxt, Séb, there's a great question my colleague Craig Dennis just loves to ask. Just to get to know, where did you get your start as a developer? Do you remember what your very first line of code was? That's a tough one. Well, I came from a modest family, and we had one computer at home for a family of six. And I think it was a Compaq PC Tower. I don't know if you know this brand. Okay. So that was a Compaq Tower. And I think I was 13 years old, and I had a group of friends where we played basketball every day. So we wanted to have a website, and I built one using another website. It was a website builder, but it was a long time ago. And I wanted to add a chat to this website, and I had to learn. I had to embed HTML code, so I didn't know what it was. So that's how I started to get into programming, learning HTML, CSS, and then PHP. And I just fell in love, and I started to make PHP games. And here I am, 17 years old later, talking about a web framework I've made for other developers. Wow. From the black tops to coding. That's amazing. What inspired Nuxt? And a funny question we have. Does Nuxt always autocorrect to Next? Is that maddening for you? Does that happen all the time? Well, for me, when I write Next, it's autocorrected to Next on my computer. What inspired Nuxt? Yeah. Well, in 2016, I was working on an e-commerce website with Vue.js and server-side rendering. I always loved the single-page application feeling when you navigate between the page. It feels faster. And the server-side rendering was also a good way to improve the user experience by avoiding having a blank page with a spinner while loading the JavaScript. And we also know the benefits of having server-side rendering for search engine optimization, or for some people who disable JavaScript. So, I was a big fan of Node.js. I've been using Node.js since 2010. I was following Guillaume on Twitter, since he made socket .io and other popular Node library. And I saw his article and his announcement with Zeit, when he was before Vercel, about Next.js in October 2016. And since I was a Vue developer and had experience with server-side rendering, I gave myself the challenge to create Next.js for Vue. And a week later, I had a prototype and open -sourced it. That's how Nuxt was born. It was a mix of Next.js and Vue. It's the Vue in Nuxt. Wow. One week later, our shipping timelines have now moved up. Nuxt has quite literally blown up since. And I mean, at this point, are you even surprised by how big Nuxt is? And feel free to drop any NPM stats or anything else that you have to kind of illustrate. Has this been surprising, how big the Nuxt community has grown? I didn't expect this. That is for sure, when I open-sourced the repo. It was a great feeling recently when Nuxt reached 50,000 stars on GitHub. But you get used to it somehow. Suddenly, I wish to be surprised every day by just looking at what we have. But I get used to it. When I checked the downloads, it's downloaded half a million a time each week on NPM. And when I looked on the telemetry, it's used by hundreds of thousands of developers and companies over the world. And according to BuildWith, a website that references the technologies, well, they found 600,000 websites, live public websites made with Nuxt today. For comparison, Nuxt.js, I think you've heard of it as a popular React framework, is on 1.2 million public websites, so the double. So that's a pretty solid stat. And I also saw on Cloudflare Radar review reports last year that Nuxt was on the top three JavaScript framework, the top 5,000 domains. Are there any sites on that list? I was over at your site on nuxt.com. There's an impressive list of company logos there. Any of those sites or web apps that have been built on Nuxt where you go, wow, I just can't believe that this team is building with Nuxt? The most recent one I discovered, I was very pleased, was OpenAI, main website, not the chat, but the main website when you go to openai.com, it's made with Nuxt, and Nuxt 3 on top of it. So that's cool. And when I go to some website, I can have this feeling that it might be done with Nuxt, and when I check and I discover it's made with Nuxt. This, I think, is one of the best feeling to discover a website using your technology. That's awesome. And what's the reason that Nuxt has taken off? I guess when you're a front-end developer just starting out and evaluating different frameworks, you mentioned Next, Svelte, other front-end frameworks that you can use. As the author, I know you're maybe a little bit biased, but what would be your guiding words to someone? Why would you tell a young developer to get started with Nuxt? That's a tough one. I would say that what made Nuxt attractive and quite popular is the developer experience we offer. We work hard on finding the right directory structure, so you don't have to think about configuring anything. We also have this Nuxt DevTools that is a new of its kind, and we have seen other people getting inspired from it. I think view, in my point of view, is the most intuitive front-end JavaScript framework I found. I tried React. Back then, I was using Backbone.js and GQuery. I tried all of them, and view was the closest one to HTML, CSS, and JavaScript, and I really loved the .view file. Since then, I haven't looked at others. They all have great pros and cons. I would say just test and see if you like the feeling of making websites with Nuxt. We have seen a very big community and keep growing that loves our philosophy of making websites. I would say just try. Yeah, I love that answer, because there are so many frameworks out there, but just try it and see what resonates with you. It's a really good piece of advice. To your point about loving to see people building on top of you, you've recently come out with this Nuxt Hub. You've built on top of the success of Nuxt, and now you're taking it to the next level with Nuxt Hub and building it on top of FileFlare, which we'll talk a little bit more about later. For one, our team is extremely excited about this. We've been talking to you for a little bit about it, and just to see all the things that are coming out there. You're just continually pushing this thing forward, and it's just so cool. Can you tell us a little bit more about what's the mission of Nuxt Hub? What problems do you see it solving for the Nuxt community? You know, those kinds of things. So I started as a full-stack developer. Then I've built APIs, REST APIs using Express, MongoDB, Elasticsearch, so a strong background in Node.js on the full-stack area. And then when I created Nuxt, it was very oriented on the front-end part. The back-end was only for server-side rendering, so I kind of missed these back-end capabilities in Nuxt 1 and Nuxt 2. And when we worked on Nuxt 3, we gave ourselves a mission with Pouya to have a hot module replacement on the server part, so we could start creating API routes with this same feeling of hot module replacement on the front -end, but on the back-end parts without having to restart your own Nuxt server. We achieved this with Nitro, which is the main server engine of Nuxt. And on top of this, when we were working on Nuxt 3, you guys announced Cloudflare Workers, and it was a new concept which was a bit hard to understand at first. And when you get it, it's hard to not think about it. So we also worked on Nitro to make the Nuxt server so optimized and so on without any external dependency. So when you build your Nuxt application, it's less than one megabyte with the front-end, back-end, everything inside. So we traced the dependency to make sure the final output can be running inside a worker. And since then, I've been just crazy about the idea of having a full-stack framework capable of running on the edge. So I've been experimenting for a while on some small example using Nuxt plus D1, Nuxt plus KV, made some demo, and deploying them on my Cloudflare account. But it was too much configuration. And since I'm a guy that loves zero config, I started building Nuxt Hub to give this possibility to ship full -stack application with zero configuration. I love it. And that's, I mean, you're going to demo it here in a little bit, but that's exactly what you get out of this. It's one of the core tenets that comes through every time I've used Nuxt Hub. Thank you. What I try to, let's demo, I guess. Yeah. So let's go ahead. The only sensible thing to do here is to show how it works. And it was funny with you, Seb, saying, we could record the session. Let's do it live. So yeah, if you wanted to switch to, we'll confirm when we can see your screen, you wanted to switch to demo mode. All right. So I guess you can see my screen. Yeah. Okay. So that's hub.nuxt.com is the main website. And it's the documentation of our open source repository, which is called Nuxt Hub Core. And Nuxt Hub Core gives you access to the SQL database, the D1 database using hub database in your API routes. We have access to the key value storage from Kotfair using hub KV, hub blob for R2. And we also configure the cache automatically. So we can, you can cache API routes on a KV bucket. We have the documentation here if you want to use the database. So this is the same as the binding. But what we do is we use a regular proxy to emulate a D1 KV and blob in development. So you have the same experience as in production. So what I can do is let's create a project. So I'm going to quick start Nuxt Hub project. And let's use burn for this one. So Nuxt is working with burn as well, since the burn 1.0. And let's open my app. So this is a normal Nuxt project where I installed the Nuxt Hub Core module. So in Nuxt, we have a modules ecosystem, which are like plugin. So you can add features, you can have several routes, you can add components, you can do anything on top of your Nuxt project. So what do I have here is a Nuxt project running on localhost 3000 with three sections, one image, one server redirect, and one message. If I take a look at the image gallery, I can see my HTML with a form to upload an image. And the upload image will call my API route to upload. And if I take a look at my API route to upload, I'm reading the form data, getting the image, which is a file. We have a utility called ensure blob that makes sure the image here is eight mega maximum. And I am calling upload.put. So let's upload an image of a fake family here. And we got our image, which is uploaded and displayed. If we take a look at this image, we can see the route image pixel, which corresponds to this server route, which is serving our blob directly from the bus or the route to my web app. We also have something when you installed Nuxt Hub in your Nuxt application is the ability to access your database, your KV, or your blob, which is R2 in that case. So if I upload another image here and I refresh my application, I can see my other image. So we also have an admin panel directly for your application. And here is the same. If I add a message, I will see my message in my database browser powered by Drizzle Studio. So now let's deploy our application. And the server redirects is using KV, but I think we don't have to showcase here. So what I can do at first in order to deploy is to connect to the admin, to the Nuxt Hub admin. So that's what I'm going to do. Right now we are in private alpha, but you can sign in and we are sending invites every week. One thing to note is you don't have to use the admin to deploy your project. You can self-host your Nuxt application using Nuxt Hub on Cloudflare. You simply have to configure some bindings and it's working automatically. But since I'm lazy and I don't want to do this configuration, let's deploy our application. So what I can do is making sure I'm logged in and then I'm running the Nuxt Hub deploy command. I can select one of my teams here, creating a new project, Cloudflare TV live. I can select a region for the storage. This is mostly used for D1 and R2 and they are Cloudflare regions. So let's deploy. So it will build my project. What I didn't show you at first is I'm not going to deploy your project to our Cloudflare account. I want you to own your project. So once I'm connected, the first thing we will ask here is to link your Cloudflare account. So for this, you create a token with the required permission. Thank you guys for doing this because otherwise it would have been quite difficult. So you can select your account, continue to summary and then paste your token here. And that's it. That's all you need in order to deploy your project. So what happened here is we deployed the project to production. So we built your app. As you can see, the dist is like this. We have our public images and we have this dot worker and all of this is your Nuxt application and the Nuxt server compact into this minimal dist directory, which is about half a megabyte. And it takes a bit of time for the DNS to propagate, but we can see here that I have the website ready. We also add a custom Nuxt.dev domain. So you guys can check out it live. I can upload an image live. Say hello. And inside my admin, I can take a look at the database, the production database that responds for you. I can click here and check it out on my Cloudflare account directly. And we can see that I have the same database. And we have our blob here. KV, we don't use it right now. I can also connect and have access to the production log here. So log on message. And I will be able to see the logs in real time. We also automatically generate your API documentation using Scala. So we can see all my API routes I created in my project. You can manage environment variables, domains, and other settings. If you want to say that this is linked to a GitHub repository, you can. And we have a preview mode. So when you click on preview mode, you can manage your environment variable or preview. And if you deploy your project in another branch, the main will automatically create a preview deployment. Or you can also force a preview deployment like this. And this is what I can do here. By saying preview, no build, because I didn't change anything. And it will deploy my project to preview. And it will automatically create the necessary resources like D1 blob and KV. So we can see that this is ready. And I have my database now, which is empty because I didn't add any message on this new preview URL, which is not ready yet. I need to wait a little bit to become available. In the meantime, I can show you the remote storage. So what is nice is the ability with Nuxt Hub to connect to your remote database locally. So all you have to do is once you link your project, is to run npm run dev. So here, next there, dash dash remote. It will get the production or preview link, the latest one, and connect to the remote storage. So here it's saying that database Git VM blob are available. We are soon going to add the option to disable some of the features you don't want to use. And let's open localhost here and also open production. So what do I have here is my local. This is production. And I can interact between the two because they use the same. And this is exactly what we are explaining in this section about the remote storage. Yeah, that's really important. Go ahead. Yeah. No, it's really I was just going to ask real quick about remote storage. Can you just talk for just a second about what's the importance of using that remote storage locally for users? Yeah. Basically, for us, we are working on Nuxt Hub using Nuxt Hub. And it's very cool to share the same database in development with all your team. So we use the preview that since we work on the dev branch, we all work on the preview database, KVM blob, and it saves us a lot of time. Same if we want to run migrations. So far, we don't support running migration in production. But what I do is I connect locally to my remote storage, run the migration, run the script, and that's it. And what we are also working on is the ability to lock or unlock access to your production database with one click. And what is nice as well is on Nuxt Hub, we work with teams. So I don't need to give them access to my Cloudflare account. They just need to have access to my team. They can link the project and they can use the remote access. We are going to work later on on adding access control to say this user cannot write on the database, et cetera. So it's nice to deploy with the Nuxt Hub deploy commands. But you guys made a beautiful CICD platform. So we thought about leveraging directly what you guys have done. So you can clone a template. So we have some templates. Todo is using the database. Image Gallery is using blob. This is the starter I've shown you. And this one is using KV. So let's use this template. This is quite ugly today. We are still working on it. This is an alpha. But I can click I think that family gallery. Let's make it private. So once the repository is created, I can go back to the admin, import my repository. So we just added support for GitLab since you support GitLab as well. And I can link my repository, if I don't find it, using your Cloudflare application. And we're using your API under the hood. And let's select the family gallery. Select the storage, like in the console. Import repository. So this is going to import my repository, create it on Cloudflare pages, create the resource needed in order to work. We are going to add very soon the required environment variables before deployment. This is not the case right now, but maybe tomorrow or next week. And here we have the Cloudflare CI building our application. We can fetch the logs within the interface, which are Cloudflare CI logs. I can take a look at the environment variables. This is not deployed yet, of course, because we have the first deployment. And I can quickly add a random password, which is required for this demo. Yeah. And just to kind of jump in, because we're getting, oh, I'm sorry, Seb. I know. We're getting kind of short on time. Yeah, yeah. So I just want to jump in real quick and just say, this is amazing. I mean, this is just a taste, you know, so users and people can see, this is just a taste of what, Nuxtub is. And like you said, it's currently in, is OpenAlpha right now or what? Or not OpenAlpha, sorry, but in- It's PrivateAlpha. PrivateAlpha, sorry. But we are opening, we are sending invites every week. And we plan to have the open beta end of this month. End of this month. And you can see, I mean, you all are constantly adding new features. You're constantly, I mean, you're just, and you're talking about that. So I would, it's amazing to see this platform built on top of developer platform. You've kind of mentioned it a handful of times, but, you know, can you just really quickly, why did you kind of decide to build this on top of the Cloudflare developer platform? One thing before you answer that, I love how you've kind of merged the two and you can be super flexible. You can be in Nuxtub as much as you want to. You've also given access as you need it to the Cloudflare admin dashboard. And that's a really cool, something I haven't seen before personally. And I really liked that and the way that you've done that. So what was it about Cloudflare that when you're thinking about these primitives and you're thinking about this platform that you said, yeah, we weren't a bet on that. We're going to build on top of it. Well, I think you guys are building the best platform out there. You are real competition to AWS and people option as well. I've been using Cloudflare for, I don't, I can't remember. I was very young when I started. I've been always fond of what you guys have been building. Your API is also easy to use. I was like, let's try. It didn't prevent us later on to add other providers for database if you want to use NEON or others. But so far I'm building something that I'm using and I think other people might use. So far you guys are doing a great job on this. That's a great answer. Yep. Yeah. I think first of all, we're just Florida. Thank you for the demo. It went smoothly. We went live, it went smooth. So before we wrap up, because we have a minute left, I just want to give you the quick opportunity because this stream is going to be cut, but we are going to follow up. We want to understand what's next, what's on the product roadmap, what are your ambitions for Nuxt Hub? How is it going to evolve? I want to know about the templates that you just launched. We're going to follow up with a blog post about Nuxt Hub. So the stream will cut. We will have links to get started. But Seb, before it cuts out, maybe you can squeeze in a couple of links to get folks started on Nuxt Hub. Let's go to hub.nuxt.com. We have everything to get started. Awesome. Well, cool. Thanks so much, Seb. We are honored to have you on. Thank you, Adam, for jumping on. Super excited to hear your thoughts on the rest of the GA launches and everything that's going on in developer week. But yes, we will be following up with everybody who's watching the stream, attending the stream, hub.nuxt .com, and happy building. Thanks so much, Seb. Thank you for having me. Thanks. Bye, guys.