Deploy to Vercel

Deploying this Nuxt app follows the same broad process as Next.js: push to GitHub, import the repository, and set environment variables. Production authentication also requires a GitHub OAuth callback URL that matches the deployed domain.

Outcome

Deploy the Hot Springs Finder to Vercel with working authentication.

Fast Track

1. Push the code to a GitHub repository
2. Import the project in Vercel and set environment variables
3. Update the GitHub OAuth callback URL for production

Hands-on exercise 5.4

Deploy the app and configure production authentication.

Requirements:

1. Push your code to a GitHub repository
2. Import the repo in Vercel (vercel.com/new)
3. Set the three environment variables: NUXT_OAUTH_GITHUB_CLIENT_ID, NUXT_OAUTH_GITHUB_CLIENT_SECRET, NUXT_SESSION_PASSWORD
4. Deploy and verify the app loads
5. Update the GitHub OAuth app's callback URL to your production domain
6. Test login on the deployed app

Implementation hints:

• Vercel auto-detects Nuxt and configures the build settings. No custom configuration needed
• Set environment variables in the Vercel dashboard under Project Settings > Environment Variables
• The GitHub OAuth callback URL must exactly match your production URL: https://your-app.vercel.app/auth/github
• You can add both localhost and production callback URLs to the same GitHub OAuth app, or create a separate one for production

Push your code to GitHub if you haven't already:

git remote add origin https://github.com/your-username/hot-springs-finder.git
git push -u origin main

Go to vercel.com/new and import the repository. Vercel detects the Nuxt framework and sets the build command (nuxt build) and output directory automatically.

Before deploying, add the environment variables:

Click Deploy. Vercel runs nuxt build with the Nitro Vercel preset, producing serverless functions for server routes and static files for prerendered pages.

The deployment receives a URL such as https://hot-springs-finder.vercel.app. Public pages should work immediately, but login requires updating GitHub's callback URL from localhost to the deployed domain.

Update the GitHub OAuth app:

1. Go to GitHub Settings > Developer settings > OAuth Apps
2. Find your Hot Springs Finder app
3. Update the Authorization callback URL to https://your-app.vercel.app/auth/github

If you want both local development and production to work with the same OAuth app, GitHub lets you add multiple callback URLs. Add your production URL on a new line.

Try It

1. Visit your deployed URL. The home page should load with "Find your next soak"
2. Click "Browse Hot Springs." All 17 springs should appear
3. Click a spring to see the detail page
4. Click "Log in." You should be redirected to GitHub for authorization
5. After authorization, you should land on the springs page, logged in
6. Favorite a spring. Visit /favorites. Your favorite should appear
7. Leave a review. Refresh the page. The review should persist

If login fails, double-check the callback URL in your GitHub OAuth app settings. It must exactly match your Vercel URL, including the https:// prefix.

Commit

No code changes needed for deployment. If you added routeRules in the previous lesson, that's already committed.

Done-When

• The app is deployed and accessible at a Vercel URL
• The browse page loads with all 17 hot springs
• GitHub OAuth login works on the production URL
• Favorites, visited, and reviews work on the deployed app
• Environment variables are set in the Vercel dashboard, not committed to the repo

Solution

No code changes. The deployment steps are:

1. Push to GitHub
2. Import in Vercel at vercel.com/new
3. Set environment variables in the Vercel dashboard
4. Deploy
5. Update the GitHub OAuth callback URL to your production domain