💻 Dev Challenge: Pick a Framework

Hey everybody, Kristian Freeman here, Developer Advocate for Cloudflare Workers and Cloudflare Pages and today in this session I'm going to be walking you through the second day of our Developer Challenge series. So all of this week we have challenges going on in our Discord, which I'll put a link to right here somewhere, and if you haven't started yet you can go check them out, you can maybe even catch up. In this session I'm just going to show you how to, you know, complete one of these challenges. This should be pretty straightforward and we'll also talk through, you know, different decisions you can make, how to get started with pages, and all kinds of other things as we go through the next half an hour. So we're going to be focusing on challenge number two for our new users and this is going to be picking a framework and deploying to Cloudflare Pages with it. So there are many, many frameworks you can choose from, you know, Gatsby, Nuxt, Vue, Create React App, Hugo, Zola, Jekyll, a million different things you could pick from, and the challenge for today is just to take one of those frameworks, learn how to run it locally, and then deploy it to Cloudflare Pages. And in this challenge we'll build probably something like a blog of some kind, and it doesn't have to be super fancy, we can just use lorem ipsum or something to kind of fill out content if you don't have existing blog posts that you want to implement. And once we've done that we're going to obviously build it locally and get it working and then we're going to deploy it to Cloudflare Pages. And so we'll be complete with the challenge when we have a URL that we can actually look at, you know, in browser or post in the Discord and see, you know, what other people's blogs look like and stuff like that. It's worth mentioning that we do have a example tutorial in our docs for building a blog using Nuxt.js, which is a Vue-based static site generator, and then using Sanity.io, which is a headless CMS tool. So it's kind of a batteries included, really nice way to manage both your content and then the front end of your application as well. And so if you're interested in that, there's a link in the Discord for today's challenge you can go check out. But for us, we'll probably start from scratch and do something a little bit different because this is kind of, you know, tells you all of the answers, whereas we could do something interesting. Maybe I'll find a framework that I haven't used much yet and kind of get started with it. The last thing I'll mention is that if you aren't yet familiar with Cloudflare Pages, it is a Jamstack platform for deploying your front end applications, things like Gatsby or React or basically anything that you wanted to deploy to Cloudflare's Edge. So Cloudflare Workers is where you can put your serverless functions right on our Edge network all over the world. So really fast load time for your users and really close to your users geographically. Pages is the same thing, but for your Jamstack applications. So believe it or not, I actually don't have a ton of experience with Next.js, which is probably one of the most popular static site tools out there. So I thought it might be interesting to try out this Next.js starter blog template that is on GitHub. I'll link it here below as well. It's Next.js starter blog. And so basically it's Next using Tailwind CSS, which is a framework that I like a lot. And it has all of the stuff that you need to get started writing blog posts. So we're going to do is set up our own version of this locally, make sure it works, maybe write a couple example blog posts, and then we will deploy it to Cloudflare Pages. And I'll talk about how that whole process works. So if you don't know what Next.js is, it's probably worth kind of reiterating how Next.js and how static site tools generally work, how kind of the whole Jamstack ecosystem plays together. So Next.js is basically React, which is a JavaScript framework that a lot of people know for writing user interfaces on the front end, right? So React is your front end. And Next.js is a bunch of tooling around that for a lot of stuff that you don't want to figure out yourself, that's really complicated. Things like routing, things like, you know, static site building and stuff like that. The idea is that Next.js will take care of all of that for you so that what you get at the end is basically some combination of your data. So in this case, that would be our blog posts that we've already written out, and then a front end to, you know, look at and potentially interact with that data. Okay, so if I have my blog posts, I've written them out, I don't want them to have to like re -render a React front end every single time that I, you know, have someone come to my website or something like that. Instead, I can take that data and I can take my React application, I can combine them, I can build them one time at build time, right? There's no at compile time stuff here. And I just have this big folder of static assets, so HTML, CSS, and JavaScript that I can deploy up to pages. And every time that someone visits my blog, I know it's just going to be cached using Cloudflare CDN. So there's no latency or lag or anything like that as I'm trying to access my blog. It's always just statically built. And so it makes it really easy to think about and also really easy to deploy. Okay, so I'm here on GitHub and you can actually come check out this template if you want. It's github.com slash JoseRFelix slash Next.js starter blog. So it's just called the Next.js blog starter. Like I said, it comes to things like Tailwind, even has customizable typography using Tailwind typography, which I've actually never even heard of before. That looks cool. Never heard of that before, but seems really useful. Automatic image preview and optimization. So things like building optimized versions of the images that you provide for different screen sizes, another great performance thing here. Looks like you can write in markdown, you can get code syntax highlighting and all kinds of stuff. Dark mode, very important. And, you know, all kinds of stuff here that are just kind of the things that you would want to have in a blog that you sometimes don't want to build yourself. So let's start with this. And what I'm going to do is I'm going to click this use this template button here. This is going to make a new repository on GitHub based on this project. So I'll just call this my Next.js blog. And I can give it a description here. I'll say like my new cool Next.js blog running on Cloudflare pages. And I'll just make this a public repo. You can make it private if you want. If you don't want people to be able to view your code, it's totally up to you. So yeah, I'll create this repository from template. And once it's finished generating, you can see I have github.com slash signal nerve slash my Next.js blog, you can go check that out on GitHub if you want. Again, I'll have all the links down here at the bottom, you can go check out. And so now we need to do is we need to take this and clone it down, right? So we have it on GitHub. Now we need to have it on our local machine. So we can actually develop with it and make sure it looks like we would expect. By the way, if you don't want to use this template, you want to just start from say, like the Next.js starter app or something like that. I'll also put a link to the documentation here. It's just Next.js dot org slash docs. So you could create an application yourself, you could do everything in terms of getting all the setup done. If you want to, you don't have to use a template. But you know, in my case, I have a very short amount of time, just 30 minutes. So I want to make sure that I get something out the door that looks pretty good. But yeah, it's totally up to you. I'll put the docs link in the in the video as well. So you can check out whichever one you think is better suited for your needs. Okay, so to actually clone this down, I'm going to come to this code here, and I'm going to copy this SSH URL. So this is this is like my GitHub, you know, URL. And then what I'm gonna do is open VS code. So let me just do a new shell here, I'm going to come into my source directory and say get clone, and then paste in that my Next.js blog. So that's going to clone the entire repository down. And now I'll open it in its own VS code window. Okay, so this is open. And now what I need to do is let's come in the readme here and just kind of understand how to get this running. So it looks like we need to run npm run dev to start it and then we'll be able to look at localhost 3000. I'm going to guess that I probably need to run yarn real quick, I can see a yarn lock here on the side. So it'll just grab those packages, it'll install everything. And then instead of npm run dev, since we're in yarn, I should just be able to run yarn dev to start up the local development server. Okay, so now that's done yarn dev that will start our server here, right. So start server on 000 3000. Let's open that URL up. And now you can see that it loaded here, it actually looks a lot like the Gatsby blog template, if you've ever seen that before, you can see just as Next.js starter blog, it has a little author bio here, and then a few posts here. So we now have is running locally, which means that if I, for instance, open up index dot j s here, which is the default page, right, so pages slash index dot j s, I can change any of the stuff that I would want. Maybe a great place to start would be, let's see, how about we'll change this Next.js starter blog. So let's come in our components here, I'm going to guess this would be layout, probably index or no layout dot j s will come down here. Okay, and this is going to be Christians blog. So I'll change that. You can see it should auto refresh here automatically. So now says Christians blog, that's just set right here in this large title component. Same thing here, it looks like this is a smaller one. Before I save that, I'm going to guess this is probably going to be if I resize this, maybe not, not actually sure where that comes from. Either way, I'll replace it. And then the next thing I want to do is change this bio here. So let's go to bio dot j s. And this is going to be author name, author summary, and then a Twitter link here. So there, where's this coming from? So get site metadata. So to find that we can go into our config folder here and just find seo dot json. This is a bunch of site metadata that has, you know, all kinds of information about the site. So I'm just going to update this real quick. Christians blog, name is Christian Freeman. And I'll just say developer advocate at Cloudflare. And then I'll change my Twitter here as well. Okay, so if I save that, and then I refresh here, you can see it just updated. So there's a Twitter link here, I just need to change this picture real quick. So let me go and find that. It's probably so content, and then assets, I'm going to guess profile dot png here, right? So this is that. Let's open that up in our Explorer real quick. And then what I'm going to do is just replace that with my own picture. Okay, so I've replaced that with profile dot jpeg. So it's slightly different instead of a png is now a jpeg. So let's come in here to bio dot j s. And I'm just going to change these to jpeg. And hopefully it'll be smart enough to just restart it, though I may have to. Oh, yeah, it totally worked. So there you go. So now written by Christian Freeman, developer advocate at Cloudflare, follow him on Twitter. Let me add just two things here. So first, that should be a capital T, then this should have a period at the end. Yep. So that looks a little bit better. So now we have these parts done. Let's actually look at these posts. How do these work? So if we click one here, we can see that it's going to load real quick. And so it took just a sec, what happened there is actually just compiled it. So now if I refresh, you can see it works automatically. If I come back here, again, you know, you can jump back and forth. So it's doing a kind of initial compilation of that page. Now that we actually can click on them, things happen to be a little bit faster. You can see that each of these has kind of different content here. So this one is kind of layout, that previous one was coding, this one has more layout stuff, and then a picture. And each of these has a URL structure of post slash first post. And the way that this works is if we come into our let's make this a little bit bigger, become into our content folder here, right where our profile picture was, and we look at posts. So this is a folder containing multiple posts, each inside of their own folder, right? So coding post.md, first post.md. And the way that this works is that there is a corresponding page here. So pages slash posts, and then there's this slug dot j s. And notice that it's wrapped in, you know, straight brackets. Is that what that's called? I don't know what the exact term for those are. So it's just this slug dot j s. And what happens here is that we basically are getting the file for this corresponding slug race. So if we come into, so if we come into utils slash post dot j s, you can see that it actually goes and makes a, like an FS read, which is the file system package and known. So it goes and looks for slash content slash posts, and then gets all of the folders out of that out of that post folder. So that's, that's all of the content that we've written. And then for each of those, it sets up a new post, which we can use as data when our next j s application actually builds out. What that means is that for each of these, uh, or for each of these posts here, so coding post, first post, long post, uh, a page is generated matching the slug that is this, you know, URL right here, or this like coding dash post, there is a new page that's generated using this react code for each of those posts. Every static site generator kind of does this differently. This is how next works. And actually the newest version of Gatsby ends up doing something a lot like this. They've kind of changed to match how next does it. Um, but you can think of it as basically like, you know, this, uh, component is going to be used to build every single post, um, as the static site tool builds out a static version of your site. Okay. So now let's actually look at what one of these posts looks like. So this is just the first post here. It has a title, a description, and a date. And this is all inside of, uh, what's called front matter. So that's this, uh, three dash, uh, kind of section here in the markdown that indicates sort of properties or like, um, configuration, I guess you could say for this post, this will not be rendered out to the screen. And it's just used to tell the framework a little bit about what this post is. So let's make a new, uh, post here. I'll just say my first post. Actually, I'm going to do a little trick here and I'm going to say my first post slash my first post.md. And that's going to make a new folder called my first post and then makes the file inside of it. So let's delete these old folders here. I'm not going to use any of these existing posts. So just delete all of these real quick. And then what we need to do is make our first post. So I'll say title, my first post description. This is my first post. And then I think it was date. And we'll just say, what's the date today? We'll just give it a timestamp of, uh, April 8th. And then I'll just put some content here. This is my first post. I'm really enjoying next JS and can't wait to deploy this on Cloudflare pages. Okay. So now if I save that, we'll see if I refresh here, if it will correctly sort of handle things, it looks like it did. So my first post, I click on that. It looks like it set the date correctly too. And here is my very first blog post. Um, let's make another one just as an example. So I'll say posts and then let's make this cloud flare pages dot MD. I'm going to actually copy this front matter over. Did that work? There we go. So announcing Cloudflare pages and then, uh, our, let's see, jam stack platform is here. And I'll just say, we're super excited to announce cloud flare pages, learn more below. And then what I'm gonna do is just go grab a tweet that I wrote about pages and we'll just embed it in there. So I'll grab this one here. Uh, let's see, I guess I want to share tweet. Nope. That doesn't work. How do I embed? There we go. So embed tweet, and then I'll copy this code here and then I will just paste it into this markdown file. So now if I come back here and I say, announcing Cloudflare pages, you can see that it embedded this tweet here, and now you can click at any of these links and any of this kind of stuff. Okay. So I think that's probably good in terms of the content for this. Now let's look at how the build process for this works. So I still have my console open here, which I'll just show again, make it a little bit bigger. You can see it's been compiling things. It's been giving me errors when they couldn't find things. This has all been running locally, right? And so now what I need to do is close that. I'll just say control C and now it's time to actually build this out into a static site. So we can get a hint of how to do that by looking at our package JSON here. So I just said cat package.json. And in our scripts here, you can see that there is a script here called build. And that just corresponds to next build. So if I run that, I just say yarn build, you can see that what it's going to do is it's going to use my combination of content. So that's all of my posts, as well as my front end, which is all of the components that have already been created in this case with this template, but you know, we just as easily could have written ourselves. And it's going to turn all of that into a production build. And that's just going to be static HTML that we can deploy to Cloudflare pages. So after about 30 seconds, it does the build, which is great. But with next, there's actually one more step we need to do, which is we need to export this build into static HTML. So what I'm going to do to do that is I'm going to go into my package JSON. And I'm actually going to update the build script. And I'm going to make it next build and next export. So it'll rebuild everything out. As you can see, it does the same sort of thing here again, where it builds all of these routes and things like that. But then it also exports it into static HTML. So it says files written to home slash Christian slash source, but you know, etc, etc, slash out. And so if I look at out here, that is going to be just a plain HTML, static, you know, CSS, JavaScript, no dynamic stuff at all. This is our built production jam stack application. And if I go to post here, so if I say ls out slash post, you can see that it's also generated my two posts, Cloudflare pages, HTML, and my first post dot HTML. So that's awesome. And basically, what we need to know here is that in the future, when we deploy this to Cloudflare pages, we're ready to, you know, actually ship it out onto an actual website, we just need to run yarn build. And that will do all the build stuff that we needed to do. And then we need to tell Cloudflare pages, hey, go look for this out directory. And that's going to be where all of our content is. Okay, so now that we have all of that figured out, how do we actually deploy to Cloudflare pages? Well, we've been working with GitHub this entire time. So if I say get status, you can see that there are all of these changes that we've made since we first created the new project based on our template. What I'm going to do here is I'm just going to add all of it. And I'm going to say get commit, made changes to blog. And so that's going to be a commit that represents all of the changes, you know, the new posts, updating the bio, updating the profile picture. And now what I need to do is just run get push do. So now if I come back to GitHub here, and I refresh, I can see it says made changes to blog. So my GitHub repo is up to date with everything that I've made, you know, changes and stuff like that, locally. So now we need to do is actually add it using pages. It's really easy to do that. So I'll just go to pages.Cloudflare.com. I'm going to click the sign up button here. And I'm already logged in. So you can see I have all of my own websites here. And I'm just going to go to pages. And here in the pages UI, you can see all of these other things that I've deployed. But for now, I'm going to go to create a project. If you haven't done this yet, it's going to have you sign into your GitHub account, I can already see my GitHub repos here. But you may have that little step in between. That's going to be what allows pages to you know, get this list of repositories and figure out what it should be deploying. Of course, the one I want here is my next JS blog. So let's select that and say begin setup. And now I can just give it a name. So this is going to be the project name, you also see it says this name will be used to generate a permanent host name on pages.dev. Let's call this Christian next JS. And then it has a section down here for build settings. So I'm going to go to framework preset, and I'm going to select next JS static HTML export. And you can see it actually fills all of this out for me, right? I remember next build and next export is the command that both builds our next application and then exports it to static HTML. And then our output directory is out here. In this case, I already have this command set up, I'm going to say yarn build. And I'm just going to, you know, use the thing I've already set up. The other two options here, root directory and environment variables are for more special setups. So if you have your project in a specific directory, inside of your repository, or you have environment variables that you need to set, which we do not, you can set those here. But let's just go and save and deploy. And we'll get started with our first pages deploy. What this is going to do basically is pull the GitHub repository much like we did locally, right? So it's just going to clone that repo down, it's going to install all of your dependencies. And then it's just going to run that yarn build command that we gave it, it's not going to do really anything different than what we did locally, right? It's running the exact same command, it's going to build the next application, and then it's going to export it into static HTML. Once that's done, pages is going to take all of that and then deploy it to Cloudflare's network. And we'll come back when that is done. Okay, you can see success, your site was built and deployed to Christian next.js .pages.dev. Let's look at that. So click the link and you can see my blog is deployed. And if I click I can see all of my you know, all my posts here. It's super fast as well. Let's take a look at what our lighthouse score is. So I'm just gonna open up my Chrome tools, and just run a lighthouse report. So I'm going to get this URL that I can deploy new code to and I can also in the future set up custom domains, let's say I want to do blog .christian.com or something like that. I could set that up using pages as well. And I'll show you what that looks like here right at the very end. So, you know, my site has been deployed, this looks great. If I come down here and I go to continue to project, I now have my site dashboard. So any future changes that I make to this project would show up here. So if I push to my master branch, I'm going to get a new build each time that I push code there. And then any pull requests that I push are going to get their own special deploy previews that you can check out as well. So there's also custom domains here. I could set that up if I want. If you're doing the challenge and you end up deploying something that you really like, maybe consider setting up a custom domain. And then there's some settings here for things like access management and all of that kind of stuff. So if you end up making something that you really like, you can share it in the Discord. I'd love to see it and I bet everyone else would too. Thanks for watching the session. I hope you're enjoying your Cloudflare Developer Week and I'll see you on the Discord. We've been collaborating on improving the protocols that help secure connections between browsers and websites. Mozilla and Cloudflare have collaborated on a wide range of technologies. The first place we really collaborated was the new TLS 1.3 protocol, and then we followed that up with QUIC and DNS server HTTPS, and most recently, the new Firefox private network. DNS is core to the way that everything on the Internet works. It's a very old protocol and it's also in plain text, meaning that it's not encrypted. And this is something that a lot of people don't realize. You can be using SSL and connecting securely to websites, but your DNS traffic may still be unencrypted. When Mozilla was looking for a partner for providing encrypted DNS, Cloudflare was a natural fit. The idea was that Cloudflare would run the server piece of it and Mozilla would run the client piece of it, and the consequence would be that we protect DNS traffic for anybody who used Firefox. Cloudflare was a great partner with this because they were really willing early on to implement the protocol, stand up a trusted recursive resolver, and create this experience for users. They were strong supporters of it. One of the great things about working with Cloudflare is their engineers are crazy fast. So the time between we decide to do something and we write down the barest protocol sketch and they have it running in their infrastructure is a matter of days to weeks, not a matter of months to years. There's a difference between standing up a service that one person can use or 10 people can use and a service that everybody on the Internet can use. When we talk about bringing new protocols to the web, we're talking about bringing it not to millions, not to tens of millions, we're talking about hundreds of millions to billions of people. Cloudflare has been an amazing partner in the privacy front. They've been willing to be extremely transparent about the data that they are collecting and why they're using it, and they've also been willing to throw those logs away. Really, users are getting two classes of benefits out of our partnership with Cloudflare. The first is direct benefits. That is, we're offering services to the user that make them more secure and we're offering them via Cloudflare. So that's like an immediate benefit these users are getting. The indirect benefit these users are getting is that we're developing the next generation of security and privacy technology and Cloudflare is helping us do it. And that will ultimately benefit every user, both Firefox users and every user of the Internet. We're really excited to work with an organization like Mozilla that is aligned with the user's interests and in taking the Internet and moving it in a direction that is more private, more secure, and is aligned with what we think the Internet should be. Nonprofits are made for crisis to step in and help in whatever sector you're in. And so this is that moment for them to lean into it and provide that relief. Did you ever think you'd be doing an interview this way? No. My name is Chris Mexner and I'm one of the founding members of Raised Donors. We work closely with nonprofits to give them a flexible yet very simple fundraising platform. That way, they have the funding to go out and achieve their mission. What types of threats and security risks do your customers face? These bad actors, these hackers just purchased 10,000 stolen credit cards. Well, they're probably not going to go to a major online retailer and go through a checkout process and input these cards to see if they work. They want to find a very low barrier type of a system, i.e. a donation page that is intentionally designed to be simple to use. And so how do we lessen those attacks? Because all of those declines also cost the nonprofit money. Cloudflare has been amazing in helping us identify these threats. So as threats are happening in real time, we can then be aware of what country they're originating from, what kind of threat that that is, and then share that information with our customers. And the beauty in that is it's not taking up bandwidth or resources on our side. How does Raise Donors help make things easier for your customers? Just last week, we had a customer send out a massive newsletter, but they put in the wrong URL. So what are they going to do about that? Well, in that case, we use the Edge Workers so that when the request comes in, we can actually manipulate that URL and have it actually complete as it was intended to. They were so thankful that Raise Donors was able to step in and help quickly and easily, and we were able to do that all because of Cloudflare, which was phenomenal. What advice would you give to all the nonprofits that are out there coping and trying to stay afloat right now? But if it is something you love to do and you're failing, well, you're learning, and it's only going to help you even more so. So be bold, don't be shy, jump in headfirst, and go for it.