Deploy Leptos CSR Apps to Vercel

Step 1: Set Up Vercel

In the Vercel Web UI...

1. Create a new project
2. Ensure

• Build command is left empty with Override on
• Output directory is changed to dist (which is the default output directory for Trunk builds)

Step 2: Add Vercel Credentials for GitHub Actions

Both of these actions will need your Vercel credentials setup in GitHub secrets

1. Retrieve your Vercel Access Token by going to "Account Settings" > "Tokens" and creating a new token - save the token to use in sub-step 5, below.

2. Install the Vercel CLI using the npm i -g vercel command, then run vercel login to login to your acccount.

3. Inside your folder, run vercel link to create a new Vercel project; in the CLI, you will be asked to 'Link to an existing project?' - answer yes, then enter the name you created in step 1. A new .vercel folder will be created for you.

4. Inside the generated .vercel folder, open the the project.json file and save the "projectId" and "orgId" for the next step.

5. Inside GitHub, go the repo's "Settings" > "Secrets and Variables" > "Actions" and add the following as Repository secrets:

• save your Vercel Access Token (from sub-step 1) as the VERCEL_TOKEN secret
• from the .vercel/project.json add "projectID" as VERCEL_PROJECT_ID
• from the .vercel/project.json add "orgId" as VERCEL_ORG_ID

Instructions from https://vercel.com/guides/how-can-i-use-github-actions-with-vercel

Step 3: Add Github Action Scripts

Finally, you're ready to simply copy and paste the two files in .github/workflows/ into your own gh workflows folder - then, on your next commit or PR you can just sit back and watch the magic happen!