# Deployment, Discovery,
and Optimization

You should be able to do all of this already — flag an instructor if not:

• A working web application
• A GitHub repository containing the application
• Basic Git and GitHub knowledge
• A working Firebase configuration
• Authentication working locally
• Persistent data working locally
• Familiarity with browser Developer Tools
• Experience using Codex or Claude Code

An app working on localhost doesn't mean it's ready for real users. Production brings its own considerations: hosting, domains, DNS, environment variables, external services, security, performance, accessibility, and search engine discovery.

• Localhost is your environment; production is everyone's
• Configuration can differ between the two environments
• Environment variables may need to be set up separately for production
• External services (like Firebase) can behave differently in production
• Production must be tested independently — never assume it "just works"

Vercel connects directly to your GitHub repository and builds/deploys your app automatically. That gives you a simple, repeatable workflow:

• Connect the correct repository
• Understand your build settings
• Configure environment variables in Vercel
• Read deployment logs when something goes wrong
• Know the difference between a successful and a failed deployment
• Verify the deployed app actually works — don't just trust the green checkmark
• Future GitHub pushes can automatically trigger new deployments
• A successful deployment doesn't guarantee your app is correct

Hosting and domains solve two different problems. Vercel hosts your app. Your domain is the human-readable address. DNS tells the internet where that domain should actually point — and Cloudflare is where you manage that.

Once deployed, test your app again — in production, not just locally.

• Test navigation and important routes
• Test authentication, sign-up, and sign-in
• Test Firestore reads and writes
• Test refresh behavior
• Test on more than one screen size
• Inspect the browser console
• Check for failed network requests
• Verify environment variables actually loaded
• Check for broken assets
• Verify HTTPS is working
• Test in a fresh/private browser session when useful
• Test the final custom domain, not only the temporary Vercel URL

Publishing a site doesn't automatically make it appear in search results. Search engines have to discover, crawl, understand, and index your pages first.

• Crawling & indexing
• Page titles & meta descriptions
• Semantic HTML
• robots.txt
• Sitemap
• Internal navigation
• Publicly accessible pages
• Search engine webmaster tools

These tools let you tell search engines about your site directly, and let you inspect how they see it.

• Add or verify your website
• Verify domain ownership when required
• Submit a sitemap
• Inspect specific URLs
• Review indexing information
• Identify crawl or indexing issues

A website shouldn't just function — it should be usable. PageSpeed Insights surfaces opportunities across performance, accessibility, best practices, and SEO.

• Test the production URL, not localhost
• Review mobile results (and desktop when useful)
• Identify high-impact problems first
• Understand a recommendation before changing any code
• Don't blindly apply every suggestion
• Make one meaningful improvement at a time
• Redeploy, then retest

Production problems follow the same evidence-based process you already know — with one extra step.

• Read Vercel build logs
• Inspect browser errors and network requests
• Verify environment configuration
• Verify DNS
• Verify Firebase behavior specifically in production
• Isolate which layer is actually failing
• Give Codex or Claude Code specific evidence
• Test locally when appropriate, then test again in production after deploying

Copy these into Codex or Claude Code and fill in the bracketed fields.

The instructor will continue the Study Task Tracker from Day 2 and take it through the full production journey: from GitHub to a public custom-domain application that has been verified, prepared for discovery, measured, and improved.

1. Open the completed Day 2 application and confirm it's pushed to GitHub.
2. Connect the repository to Vercel.
3. Review the project's deployment configuration.
4. Configure required environment variables.
5. Deploy the application.
6. Open the Vercel production URL and test key functionality, including Firebase auth and data.
7. Review the production browser console.
8. Add a custom domain to the Vercel project.
9. Open Cloudflare DNS management and configure the required records (which records you add depends on whether the site is hosted on Vercel or GitHub Pages — see the comparison below).
10. Verify the domain connects, then open the app using the custom domain.
11. Verify HTTPS and re-test app functionality.
12. Review robots.txt and the sitemap.
13. Walk through Google Search Console and Bing Webmaster Tools.
14. Demonstrate sitemap submission or URL inspection.
15. Run the production URL through PageSpeed Insights and review the report.
16. Pick one meaningful improvement, implement, test locally, commit, and push.
17. Let Vercel redeploy, verify the change in production, and rerun PageSpeed Insights to compare.

Deploy the application on Vercel

Choose where the site is hosted before touching DNS

Vercel is not the only option. A repository can also be published straight from GitHub with GitHub Pages, and both routes can sit behind the same Cloudflare domain. The DNS records you add are different for each one, so decide the host first, then add only that host's records.

Path A — hosting on Vercel

Path B — hosting on GitHub Pages

Verify the live domain (both paths)

Make the site discoverable

Measure, improve, redeploy

Continue the Campus Event Board from Days 1 and 2 and take it through the same production journey.

Steps

1. Verify the application works locally, then commit and push any working changes.
2. Connect the repository to Vercel and configure required environment variables.
3. Deploy the application, then open the production URL.
4. Test the app's critical functionality, Firebase authentication, and persistent data.
5. Inspect the browser console for production errors.
6. Configure your assigned domain or subdomain, and the required Cloudflare DNS records.
7. Verify the domain connects successfully and that HTTPS works.
8. Test the app again using the custom domain.
9. Verify basic page metadata, and create/verify robots.txt and a sitemap where appropriate.
10. Configure Google Search Console and Bing Webmaster Tools; submit or verify your sitemap.
11. Run the production URL through PageSpeed Insights and review the results.
12. Identify one meaningful improvement, implement and test it, then commit and push.
13. Verify the new Vercel deployment, retest production, and document your final production URL.

You're done when...

• Your application is deployed through Vercel and loads successfully
• Required environment variables are configured
• Firebase authentication and persistent data both work in production
• Your custom domain or assigned subdomain resolves correctly, over HTTPS
• Critical app functionality has been tested in production
• Basic search engine discovery requirements have been reviewed
• Google Search Console and Bing Webmaster Tools have been configured
• Your production site has been analyzed with PageSpeed Insights
• At least one meaningful improvement has been identified and made
• Your final production URL is ready to share
• Your final working production checkpoint is committed to GitHub

Hit one of these? Work through it before asking for help.

Can you tick all of these? If not, flag an instructor before the session ends.

• A working Vercel production deployment
• A connected custom domain or assigned subdomain
• Correct DNS configuration
• HTTPS access
• Working authentication in production
• Working persistent data in production
• Successful production functionality testing
• An understanding of robots.txt and sitemaps
• An understanding of Google Search Console and Bing Webmaster Tools
• A PageSpeed Insights report for your production website
• At least one identified improvement
• The ability to investigate a production failure using evidence
• A final production URL you can share with others