Skip to main content
Our docs redesign is live!
Guide: Contentstack 0 to 100 for developers

Running Kickstart Veda Locally

•
4 min read
tim-hero.png
AuthorTim Benniks

At this point, you have the platform context and the stack setup. Now it is time to run the actual app, confirm the environment is wired correctly, and get a first feel for what the seeded project gives you.

What you'll learn

  • How to clone and install the Veda app

  • How to create .env.local from the checked-in example

  • Which commands matter for development versus verification

  • What a healthy local startup looks like

  • Which parts of the running app are worth inspecting first

Clone the project

Veda implementation: Start by cloning the public repository and moving into it:

git clone https://github.com/contentstack/kickstart-veda.git
cd kickstart-veda

The current Veda repository is built with:

  • Next.js

  • React

  • TypeScript

  • Tailwind CSS

  • @contentstack/delivery-sdk

  • @contentstack/live-preview-utils

  • @timbenniks/contentstack-endpoints

Prepare your local environment file

Veda implementation: Copy the example file, then replace the placeholders with the values from the stack you seeded:

cp .env.example .env.local

Update .env.local so it reflects your real stack values:

NEXT_PUBLIC_CONTENTSTACK_API_KEY=...
NEXT_PUBLIC_CONTENTSTACK_DELIVERY_TOKEN=...
NEXT_PUBLIC_CONTENTSTACK_PREVIEW_TOKEN=...
NEXT_PUBLIC_CONTENTSTACK_ENVIRONMENT=preview
NEXT_PUBLIC_CONTENTSTACK_REGION=EU
NEXT_PUBLIC_CONTENTSTACK_PREVIEW=true

If your stack uses a different environment or region, update those values to match reality.

Install dependencies and start the app

Use npm, since the project ships with package-lock.json:

npm install
npm run dev

The Veda README currently calls out Node.js 20+ as the safe baseline. If you hit engine or package issues, check your local Node version first.

What success looks like

Veda implementation: A healthy local start usually looks like this:

  • Next.js starts without credential-related runtime failures

  • the homepage renders real seeded content instead of blank sections

  • the /products area renders catalog data

  • category and product-line pages resolve from actual Contentstack entries

If the app boots but content looks empty, the most likely causes are:

  • wrong API key

  • wrong delivery token

  • wrong environment name

  • region mismatch

  • stack was not seeded successfully

First pages worth inspecting

You do not need to click every route immediately. Start with the surfaces that teach the most.

Homepage

Veda implementation: The homepage helps you see modular blocks in action. You are not just looking at a single static page. You are looking at a content-composed page assembled from block data.

/products

This is where Veda starts to feel different from a tiny starter. The project includes product discovery and filtering logic, which shows how Contentstack content can support a catalog-like experience.

Category and product-line routes

These routes show that different content types can have different page-level rendering behavior even while sharing the same content platform and utility layer.

A useful local verification step

Production note: Once local development works, it is worth checking a production build too:

npm run build

That matters in Veda because the build step includes a prebuild hook that runs updateLaunchConfig.mjs, which generates a launch.json file for cache priming.

So a successful build is validating more than "Next.js compiles." It is also validating that your stack can be queried for route discovery during the build workflow.

What to do if preview is not working yet

Do not panic if Live Preview is not the first thing that works. Focus on this order:

  1. published content fetch works

  2. routes render correctly

  3. build succeeds

  4. preview wiring is confirmed

That gives you a clean debugging sequence instead of trying to troubleshoot everything at once.

Why this chapter matters

Contentstack concept: A lot of developer confidence comes from getting one real system running end to end. Once the app is live locally and your data is showing up, the later architecture chapters stop feeling theoretical.

You now know three important things:

  • the stack exists

  • the app can read from it

  • the repository is worth studying in detail

Key takeaways

  • Use the public Veda repository as the codebase for this guide

  • Start from .env.example, then replace placeholders with your real stack values

  • npm install and npm run dev are the quickest path to a live local environment

  • A successful npm run build validates both compilation and the cache-priming route discovery step

  • Start by verifying published content before you diagnose preview behavior

Frequently asked questions

  • What Node.js version should I use to run Kickstart Veda locally?

    Use Node.js 20+ as a safe baseline. If you see engine or package issues, verify your local Node version first.

  • How do I create the .env.local file for Kickstart Veda?

    Copy the checked-in example with `cp .env.example .env.local`. Then replace the placeholders with your Contentstack API key, tokens, environment name, and region.

  • Which commands do I run to start the app in development?

    Run `npm install` to install dependencies, then `npm run dev` to start the Next.js development server. The project ships with a package-lock.json, so npm is the expected package manager.

  • What does a healthy local startup look like?

    Next.js should start without credential-related runtime failures, and the homepage and `/products` should render real seeded content. Category and product-line routes should resolve from actual Contentstack entries.

  • Why should I run `npm run build` during local verification?

    A production build validates more than compilation because a `prebuild` hook runs `updateLaunchConfig.mjs` to generate `launch.json` for cache priming. It also confirms your stack can be queried for route discovery during the build workflow.