Nextjs

Monorepo p2 - The CI build and deploy

This is the second part of a series where I go through my monorepo setup with Github Actions deploying to Vercel. Links to all the articles in the series are at the bottom of the page.

In this article we will look closely at the build and deploy steps to the pipeline.

CI Pipeline

The main CI pipeline is handled by Turborepo. Any package which can be deployed defines a ci script within the package.json. This means that I can entrust Turborepo with only running changed applications as well as keeping the setup for each application encapsulated within.

Deploying a Monorepo to Vercel with Github Actions p1

I have recently added wasm-pack builds into my Soniq project but found that it is a nightmare trying to get rustup and cargo installed in the Vercel build alongside my yarn monorepo.

I have been planning to migrate my deployments to pure Github actions and this was the push to strap myself in and get my hands dirty.

So here is part 1 in a series where I will explain the steps I have taken to get my monorepo building and deploying efficiently with Github Actions using Turborepo and a few, key, architecture decisions.

Use WASM Compiled Golang Functions in NextJs

What if you are using Next.js for your website but want to make use of Golang functionality written to support your backend APIs? This is a quick look at the Tinygo WebAssembly guide and how I integrated the output with NextJs.

The Tinygo Guide

Here is the Tinygo guide I used. It gives you a very basic first step to building a wasm binary from Go. Getting Golang set up correctly on my system was the hardest part for me, but even that didn’t take too long.

How to Create a Single Page App with NextJs

NextJs is very useful for creating static websites but how do you configure it if you are building a single page application (SPA)? The setup isn’t immediately obvious.

The key thing here is we don’t want to build a page on the server when the path is dynamic.

Let’s take a look at how you can set it up, it’s actually pretty straight-forward.

Rewrites

The first piece of this puzzle is the rewrites function within next.config.js.

Adding Uniform to Create Next App

I have found it super easy to add Uniform Canvas to a bare-bones NextJs app. I thought I would show you what it takes to go from Zero to Hero with a very basic setup. This will then give a good foundation to add more things on top.

Create Next App

I’ll start with the familiar, I’ll use yarn create next-app --ts to generate a bare-bones NextJs application with TypeScript.

1
2
3
4
5
6
7
8

yarn create next-app --ts
...
✨  Done in 13.16s.

Initialized a git repository.

Success! Created zero-to-hero at /Users/davetayls/projects/test-projects/zero-to-hero
Inside that directory, you can run several commands:

Add some Uniform Packages

There are two packages I need to get started with a React application:

Create Global UI State with React Context

How do you implement some UI state which can be changed from different parts of your React application?

In this example I implement a menu which can be toggled using a central UI context. I’ve built it in such a way that a central Provider component controls how this context will be updated. By doing it this way you will keep your code easy to read and will reduce the complexity of any bugs you encounter in the future.

Transferring Less JavaScript with Next Dynamic

As your application grows you will want to separate out JavaScript from your main bundle. You will arrive at a point where the majority of the JavaScript you are serving is not being used on any particular page your user is on.

In this video I walk through how you can structure your NextJs application code to dynamically split out JavaScript based on modules.