(A Japanese translation is available here.)

There was a case that I wanted to create multiple Vercel deployments with different configurations from a single GitHub repo.

The motivation is that I want to deploy photo-data-viewer repo as 1) a standalone web app called Photo Data Viewer and 2) a feature in an Electron app called Photo Location Map.

Implementation-wise, webpack's target needs to be different:

• Web app needs target === 'web' (default)
• Photo Location Map feature needs target === 'electron-renderer'

How to configure

1. From photo-data-viewer repo, create 2 Vercel projects.
   • At first, I had an assumption that only 1 Vercel project can be created per GitHub repo. It took a while to recognize that this is wrong...
2. Set different environment variables for different Vercel projects.
3. Reference the environment variables in the code.
   • In next.config.js, when environment variable PDV_IN_PLM is set to 'True', config.taget = 'electron-renderer' is set.
   • Code

Deployments

The 2 Vercel projects are deployed as follows:

Note that https://pdv-in-plm.vercel.app/ does not work in the web browser. It is built for Electron renderer process, so it works well when it is opened from Electron renderer process like Photo Location Map.

Reference

https://github.com/vercel/vercel/discussions/4879#discussioncomment-356114