Publish multiple projects on a Monorepo on Cloudflare Pages
Emmanuel Gautier / June 29, 2022
3 min read
All the tooling provided by service providers is great and makes the developer's life much easier. Usually, those providers connect one git repository to an application (or a project depending on the provider naming). It works fine but it is not so easy when you work on a monorepo or if you want to make multiple deployments for more than one locale from only one source code.
This is the case for Cloudflare Pages. For now, you can not connect one Github repository to multiple Cloudflare Pages projects. In my case, this blog is available in English and French and linked to two domain names. So I have to make two deployments from the same source code. Hopefully, there are solutions.
Direct Upload with Continous integration
The first solution is to deploy with Direct Uploads, a way to upload files directly to Cloudflare without having to build on Cloudflare build environment. One month ago, Cloudflare announced that the deployment on Cloudflare Pages with Direct Uploads is available. So, it is now possible to build multiple versions of a website and make multiple uploads for each project.
Here I am using it for one project having multiple Cloudflare Pages projects. This solution can be used the same way when you have multiple packages on monorepo and you want to publish the different websites on Cloudflare Pages.
Getting started with Direct Uploads
The publishing can be done with the Wrangler CLI developed by Cloudflare with the command npx wrangler pages publish <directory>
. That is pretty simple, isn't it?
The build and publish should be delegated to a software responsible for CI/CD like Github Actions or Travis CI. Cloudflare provided some support for some of them. Check out the Cloudflare Documentation for more informations. If you use software not mentioned in this documentation like Jenkins, you still can use the wrangler command directly which will make the same action at the end as using existing tooling.
Here you can find one Github Actions workflow example deploying one project on different Cloudflare Pages projects and using the cloudflare/pages-action
action.
name: Publish
on:
push:
branches:
- main
jobs:
publish:
runs-on: ubuntu-latest
permissions:
contents: read
deployments: write
strategy:
matrix:
include:
- projectName: 'project-en'
googleAnalyticsId: 'G-XXXXXXXXXX'
- projectName: 'project-fr'
googleAnalyticsId: 'G-XXXXXXXXXX'
steps:
- name: Checkout 🛎
uses: actions/[email protected]
- name: Setup node env 🏗
uses: actions/setup-[email protected]
with:
node-version: lts/gallium
cache: 'yarn'
- name: Install dependencies 👨🏻💻
run: yarn --frozen-lockfile --silent
- name: Run build
run: yarn build
env:
NEXT_PUBLIC_GA_ID: ${{ matrix.googleAnalyticsId }}
- name: Export
run: yarn export
env:
NEXT_PUBLIC_GA_ID: ${{ matrix.googleAnalyticsId }}
- name: Publish
uses: cloudflare/pages-[email protected]
with:
apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
projectName: ${{ matrix.projectName }}
directory: ./out
gitHubToken: ${{ secrets.GITHUB_TOKEN }}
Mirroring GIT Repository
Another solution that can be used as a workaround to the limitation of having only one project per GIT repository is to create multiple GIT repositories. It can be quite painful to maintain multiple repositories so it is possible to configure automatic synchronization. You can find one example with Github Actions on the Github Action for mirroring repositories snippet.
This solution can be used not only for Cloudflare but also with Vercel.
Comments
Related Posts
Publish on Cloudflare Pages with unsupported language versions
It may happen that a version of Node is not supported yet by Cloudflare and will remain not supported for some weeks. That can happen even if it is a Long Term Support (LTS) version. Here how to build even if cloudflare does not support the version.
Publish on Cloudflare Pages with unsupported language versions
It may happen that a version of Node is not supported yet by Cloudflare and will remain not supported for some weeks. That can happen even if it is a Long Term Support (LTS) version. Here how to build even if cloudflare does not support the version.
Publish on Cloudflare Pages with unsupported language versions
It may happen that a version of Node is not supported yet by Cloudflare and will remain not supported for some weeks. That can happen even if it is a Long Term Support (LTS) version. Here how to build even if cloudflare does not support the version.
Featured Posts
How to deal with Docker Hub rate limit on AWS
Since 2020, DockerHub has been limited to only 200 container image pull requests per six hours. This article will help you to deal with this limitation on AWS.
How to enable Python type checking in VSCode
Python now has support for type hints. In this article, we will see how to enable better IntelliSense and type checking analysis in VSCode.
How to manage Internationalization with NextJS SSG
Staticaly generating a website with the NextJS framework in different languages is not so obvious.