(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
- 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...
- Set different environment variables for different Vercel projects.
- Reference the environment variables in the code.
- In
next.config.js, when environment variablePDV_IN_PLMis set to'True',config.taget = 'electron-renderer'is set. - Code
- In
Deployments
The 2 Vercel projects are deployed as follows:
| Vercel project | URL |
|---|---|
| Web app | https://photo-data-viewer.vercel.app |
| Photo Location Map | https://pdv-in-plm.vercel.app |
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
Top comments (0)