Deployment - lesson 2 | HackIndia Skills

Key point

Build before deploy

Your host will not run your dev server. It will usually install packages, run a build command, then serve the generated output.

The one idea: if it fails on your laptop with the production build, it will likely fail on the host too.

Dev is forgiving

npm run dev is for coding. It can hide issues that only appear when the app is bundled for production.

Common surprises are wrong import casing, unused broken code, missing assets, TypeScript errors, and environment variables used during build.

Your to-do

Find your build command

Do each one yourself, then tap it to tick it off. The ticks are only a checklist for you: they are not marked or scored.

Open package.json in your project root.
Look inside scripts for build and start or preview.
Use the exact build command your host will use.
If there is no build script, add the correct one for your framework.
Commit package.json and your lock file after any change.

0 of 5 done

Example

Package scripts

For a Vite React app, your scripts may look like this. The build creates the production files. The preview command lets you test them locally.

{
  "scripts": {
    "dev": "vite --host 0.0.0.0",
    "build": "vite build",
    "preview": "vite preview --host 0.0.0.0"
  }
}

Your to-do

Test it locally

Do each one yourself, then tap it to tick it off. The ticks are only a checklist for you: they are not marked or scored.

Stop the dev server if it is running.
Run the build command from the project root.
Fix every error shown in the terminal.
Run the preview command after a successful build.
Open the preview URL and test the main user flow.

0 of 5 done

npm run build
npm run preview

Common mistake

Do not deploy junk

Do not commit generated build folders unless your framework specifically requires it for your setup. For most React, Vue, Next, and Vite apps, the host builds from source.

Do not ignore build warnings blindly. A warning about a missing dependency or browser issue may become a broken page after deploy.

Tip

Ask AI carefully

Paste your build error into ChatGPT, Gemini, or Claude and ask for the smallest fix. Also paste your package.json if the error is about scripts or dependencies.

Check the answer before applying it. Make sure it does not remove important code, downgrade random packages, or add secrets into files.

Prompt:
My npm run build fails for this Vite React app. Give the smallest safe fix.
Here is the terminal error:
[paste error]
Here is package.json:
[paste package.json]

Your to-do

Do this now

Do each one yourself, then tap it to tick it off. The ticks are only a checklist for you: they are not marked or scored.

Run npm run build in your project root.
Fix one build error instead of skipping it.
Run npm run preview and test login, submit, or your main feature.
Add build and preview commands to your README.
Commit the working changes to GitHub.

0 of 5 done

Prepare a production build

Build before deploy

Dev is forgiving

Find your build command

Package scripts

Test it locally

Do not deploy junk

Ask AI carefully

Do this now

Quick check