Skip to content

Deploy the website

Build the React app with your API address baked in and upload it to the S3 bucket.

About 20 min · Verified 8 October 2026

0 of 4 steps done0%
On this page

The website is a build artifact: Vite compiles the React source into a folder of static files (dist/). You will build it on your computer and upload it to S3 once, by hand. In the CI/CD guide the same build and upload are done by AWS for you on every push.

The one thing that trips everyone up#

Vite reads VITE_API_BASE_URL while it builds and writes its value into the JavaScript files. It is not read when the page loads. So:

  • Set the variable before you build.
  • If you change the API address later, you must rebuild and upload again.
  • The value is visible to anyone who views the page source. Never put a secret in a VITE_ variable.

Build and upload#

Install the dependencies#

From the root of your clone on your computer:

Your computerInstall website dependencies
npm --prefix shortlink-web ci

Build with your API address#

The value is your load balancer's address: <API_URL>. No trailing slash.

Your computerBuild
VITE_API_BASE_URL=<API_URL> npm --prefix shortlink-web run build

Replace <API_URL> with your own value (or fill in the known ones once under My values at the top of the page).

You should see
Vite prints a list of files under dist/ (an index.html and an assets/ folder) and ends with ✓ built in ….

Confirm the address really was baked in:

Your computerSearch the build for your load balancer hostname
grep -rl "<ALB_DNS>" shortlink-web/dist/assets | head -n 3

Replace <ALB_DNS> with your own value (or fill in the known ones once under My values at the top of the page).

You should see at least one .js file. No result means the variable was not set when you built; set it and build again.

Upload the contents of dist/#

Upload the contents of dist, so that index.html sits at the root of the bucket. --delete removes files from earlier builds that no longer exist.

Your computerSync the build to S3
aws s3 sync shortlink-web/dist/ s3://<WEB_BUCKET>/ --delete --region ap-south-1

Replace <WEB_BUCKET> with your own value (or fill in the known ones once under My values at the top of the page).

Then give index.html a no-cache header so browsers always fetch the newest copy (the other files have content hashes in their names and are safe to cache):

Your computerMake index.html always revalidate
aws s3 cp shortlink-web/dist/index.html s3://<WEB_BUCKET>/index.html \
  --cache-control 'no-cache' --content-type 'text/html' --region ap-south-1

Replace <WEB_BUCKET> with your own value (or fill in the known ones once under My values at the top of the page).

Open the website#

Open <WEB_URL> in your browser.

You should see
The ShortLink app loads and the status badge in the corner says API online (green). If it says API unreachable, see the box above, then the troubleshooting chapter.

Check it from the command line too#

Your computerThe home page and the API through the site
curl -sI <WEB_URL>/ | head -n 3
aws s3api head-object --bucket <WEB_BUCKET> --key index.html --region ap-south-1 \
  --query '{type:ContentType,cache:CacheControl,modified:LastModified}'

Replace <WEB_URL> <WEB_BUCKET> with your own value (or fill in the known ones once under My values at the top of the page).

You should see
HTTP/1.1 200 OK, ContentType: text/html, CacheControl: no-cache.

Next: verify everything end to end.

Found a mistake? Edit this page on GitHub.