Published on

Jamstack Kabarak Meetup - Talk

Authors

about-me

👋🏼 Hi am Eugene Musebe,

䷐ Twitter Handle : _musebe

✉️ Email : emusebe9@gmail.com

👷🏽‍♂️ Company : Cloudinary

🥑 Role : Developer Advocate


Sponsored by Mediajams

Follow MediaDevs on Twitter : MediaDevs

Join Mediajams Discord Server : Discord Server

Event Registration : Link


What is the Jamstack ?

Jamstack-breakdown

Jamstack is an architecture designed to make the web faster, more secure, and easier to scale. It builds on many of the tools and workflows which developers love, and which bring maximum productivity.

With Jamstack, the entire front end is prebuilt into highly optimized static pages and assets during a build process. This process of pre-rendering results in sites which can be served directly from a CDN, reducing the cost, complexity and risk, of dynamic servers as critical infrastructure.

Meetup Scope

We'll be deploying a Jamstack application (NextJS app) to the following platforms :

Netlify : Cloudflare pages

linus

Vercel Deployment

  • Create a Vercel account

  • Create a Cloudinary account

  • Clone/Fork the following Mediajam from Github. You can always go through the application development process on Mediajams

  • Pull project from Github


Netlify Deployment

  • Clone/Fork the following Mediajam from Github. You can always go through the application development process on Mediajams

  • Login to the Netlify dashboard

  • Pull project from github

  • Add env variables

  • Deploy site


Cloudflare Pages Deployment

Step 1: Creating a new Next.js app

Navigate to the directory you want to create the project in, then run the following:

yarn create next-app my-cloudflare-page
# or
npx create-next-app my-cloudflare-page

Note: feel free to replace my-cloudflare-page with the project name of your choice

Once it’s finished, navigate to your new directory, and start your development server:

yarn dev
# or
npm run dev

Step 2: Configuring Next.js to export a static website

By default, Next.js will take advantage of server-side processing to load the site. This happens locally automatically inside of node with the local server we spun up with Next.js.

If we were deploying this application to Vercel, that would be okay, because they handle that processing by default, but we’ll be deploying to Cloudflare Pages, which will host the site statically.

To configure our new application, we can head over to our package.json file, and instead of the build script, update it to the following:

"build": "next build && next export",

This will tell our application that whenever we want to build it, it will first build the application into a Next.js-specific configuration, but then we’ll also export it, which will compile that application into static files that by default will be placed in the out directory.

We can try this out ourselves in our terminal by running the build command:

npm run build

Step 3: Adding a Next.js project to a new GitHub repository and deploying to Cloudflare

With our Next.js app ready to go, we now want to set it up inside of GitHub as a new repository.

Note: for this step, you’ll need to have a GitHub account, which is free to create.

Next, Cloudflare is going to ask for a few details related to the project.

  • Project name: this will be whatever you want to name this project, which you can just leave “as is” which is prefilled with your repository name
  • Production Branch: the branch where Cloudflare deploys the main project from, only change this if you want to deploy from a different branch
  • Framework preset: the framework which was used to build the project in the repository, select Next.js or whatever project framework you’re using, Cloudflare will automatically fill in the rest of the fields
  • Build command: the command(s) used to build your project, you can either leave this field “as is” or if you’d like to maintain the build command from your package.json like we set up before, you can change this to yarn build
  • Build output directory: where the static files from the build command are output to, similar to the others, you can leave this as out, unless you changed the output directory You can ignore Root directory and Environment variables unless you’re working with an advanced configuration

Finally, hit Save and Deploy!

Cloudflare will now start up a new environment, clone the Git repository, build the application, and deploy it! You can follow along right on the Deployment Details page, it should only take a few minutes.

But once it’s finished, you’ll now see a URL at the top of the Deployment details section.

🎉🎉🥂🍾 Cheers on getting this far. Cant wait to see the platform you’ll use to deploy your Next application 😊