Deploy Your Web App

A web app that only runs on your computer is not an app. It is a file.

This lesson gets your app live on the internet on a shareable link, accessible to anyone in the world, working exactly as it does on your machine.

Web apps deploy the same way as websites

If you completed Tracks 3 and 4 you already know how to deploy. Web apps built with HTML, CSS, and JavaScript are static. They do not need a server to run because they run entirely in the visitor's browser.

Netlify handles this perfectly. The same drag-and-drop approach that deployed your website works for your web app.

Step 1: Pre-deploy checklist

Before deploying, confirm all four of these.

The app works correctly in your browser. Run through every test from the previous lesson covering core function, edge cases, and mobile view. Fix anything that fails before deploying.

No console errors on any test. Open the browser console using F12 and then the Console tab. Clear any old messages. Run through the app. There should be zero red errors before you deploy.

The app folder is clean. Your folder should contain exactly these files:

your-app-folder/

├── index.html
├── style.css
├── app.js
└── CLAUDE.md (this will not affect the live site — it is only for Claude Code)

No temporary files, no test files, and no duplicate files.

Step 2: Deploy to Netlify

Go to app.netlify.com/drop. Drag your entire project folder into the drop zone. Not just the files inside but the whole folder. Netlify processes the files and you receive a live URL in under 60 seconds.

The URL looks something like this: https://curious-giraffe-12345.netlify.app

Copy it. Open it in a new browser tab and test the app on the live version immediately.

Step 3: Test the live version

The live version is not automatically identical to your local version. Test it fresh on the live URL.

Run through the complete test from the previous lesson. Test the core calculation or quiz with valid inputs. Test empty submission to confirm validation works. Test on a real phone and not just Chrome developer tools. If you used localStorage, refresh the page and confirm data persists.

Step 4: Keep your URL permanently

Without a Netlify account the deployed site expires after 24 hours.

To keep it permanently, go to app.netlify.com and create a free account with your email and password. After logging in you will see your recently deployed site listed. Click "Claim site" to attach it to your account. The site is now permanent and completely free.

You can also rename the URL from the random string to something cleaner. Go to your site in the Netlify dashboard, then Site Configuration, then Change site name. Set it to something like my-calculator-app.netlify.app.

Updating your app after deployment

When you make changes locally and want to push the update live, go back to app.netlify.com/drop and drag the updated folder into the same drop zone. Netlify replaces the previous version at the same URL with the new content.

If you are logged in Netlify will recognise the site and ask if you want to update the existing deployment. Click yes.

Common deployment issues

If the app looks different on the live site, this sometimes happens with Google Fonts failing to load. Check the live console for errors by pressing F12 on the live URL. If fonts are not loading send Claude this:

• On the live deployed version the fonts are not loading from Google Fonts.
• Ensure the link tag for Google Fonts in index.html uses https and not http
• and does not have any trailing characters or formatting errors.

If localStorage does not work on the live site, note that localStorage works on live sites but not across different domains. If you were testing on localhost and are now on Netlify they have separate localStorage. Test localStorage behaviour specifically on the live URL.

If the app works on desktop but fails on mobile, open the live URL on a real phone. Describe what you see and tell Claude to fix the CSS for that specific issue.

If JavaScript errors only appear on the live site and not locally, open the console on the live site using F12 on desktop and paste any errors directly to Claude.

After deployment: connect it to your landing page

A deployed web app has maximum value when combined with a landing page.

Your calculator or quiz becomes the lead magnet. Your landing page collects emails in exchange for access. There are two ways to connect them.

Option A is a direct link where the CTA on your landing page links directly to the app URL with no email gate, giving free access and high volume.

Option B is an email gate where the landing page collects the email first and after submitting the thank-you page contains the link to the app. This captures leads before they access the tool.

Option C generates more leads. Option A generates more usage and brand awareness. Both are valid depending on your goal.

Your action right now

Run the pre-deploy checklist. Deploy to app.netlify.com/drop. Test the live version on a real phone. Create a free Netlify account to claim the site permanently. Copy the live URL because you need it for the homework in the next lesson.