✅ Skeleton Site + Deploy Pipeline Link to heading

This is the first developer action in the series. The goal is a working pipeline, not a perfect site.

Think of this as your “Hello World” deploy. Ship the simplest possible thing, prove the pipeline, then add complexity one layer at a time. Later you will hit failed builds and weird edge cases; this step keeps the variables small.

No one will see this site. Amplify gives you a long, random URL that is hard to discover by accident. You can add password protection later, but it is not required for this step.

🧭 Why This Step Exists Link to heading

This step proves the deployment path end‑to‑end before you add real content. It removes environment risk and turns every later change into a simple commit and push.

Once the pipeline works, you can focus on content and iteration instead of setup.

✅ Prerequisites Link to heading

This step assumes:

  • An AWS account with CLI authentication set up locally
  • npm installed and working
  • Basic familiarity with Next.js and React
  • A GitHub account (configured for repo access or ready to set up access later)

🔁 Deployment Flow (What You Are Building) Link to heading

This is the loop you are setting up:

  • Make a local change and commit it
  • Push to GitHub
  • Amplify detects the change, builds, and deploys
  • Your live URL updates automatically

The rest of this post builds that loop.

🧱 1) Pick a Codename Link to heading

Use a short, stable codename for your GitHub repo and Amplify app name. This name can be internal and does not have to match your final domain. Changing it later is possible, but it is a hassle, so pick something you can live with.

🧱 2) Create the App and Run It Locally Link to heading

Start with a small Next.js app. You are still building the skeleton, not the final page.

Create a directory for your project and open a terminal inside it. Using the codename as the folder name keeps things tidy.

Example (Next.js + React):

npx create-next-app@latest .

You’ll be prompted to choose a configuration for your project. A sane default looks like this:

TypeScript: Yes
ESLint: Yes
App Router: Yes
Tailwind: Yes (or No, if you prefer)
src/ directory: Yes (optional)
import alias: @/*

Run the app locally, then open http://localhost:3000:

npm run dev

If it loads, the local loop works.

☁️ 3) Add Amplify and Run the Sandbox Link to heading

Now scaffold Amplify Gen 2 in the same project root:

npm create amplify@latest

When asked where to create the project, choose . (press Enter).

Start the sandbox in one terminal:

npx ampx sandbox

The sandbox configures AWS resources and writes required values for your Next.js app into local files. You do not need to keep it running forever, but while it runs it will apply config changes.

If the dev server is already running from Step 2, keep it up. Otherwise start it:

npm run dev

Open http://localhost:3000 and make sure the page still loads.

Before you connect Amplify, run a production build:

npm run build

The build runs linting and type checks that do not run during npm run dev. Fix any errors here so Amplify does not fail later.

🔌 4) Push to GitHub Link to heading

Commit the minimal site and push it to a new repo.

Local initialization and commits:

git init
git add .
git commit -m "Init Next.js skeleton"
git branch -M main

Make sure git can access GitHub, then connect and push to origin:

git remote add origin https://github.com/your-user/your-codename-site.git
git push -u origin main

☁️ 5) Connect Amplify and Verify the Deploy Link to heading

Open the AWS Console and create a new Amplify app. During setup, connect it to the GitHub repo you created in the previous step.

Amplify will clone the repo and run the first build. Wait for it to complete, then open the default Amplify URL to confirm the site is live.

Make a tiny change, push again, and verify the rebuild.

If that works, the pipeline is live.

✅ Output Checklist Link to heading

  • Repo created and pushed to GitHub
  • Amplify app connected to the repo
  • Default site builds and is live
  • A commit triggers a rebuild
  • Local dev server runs
  • Amplify sandbox runs and writes config locally

Next up: the pre‑launch page — turning your offer into a clear one‑page message.