Manual setup — build by hand

The skills are the fast path, but PortalJS is AI-native, not AI-only. Every skill produces plain, editable code — so you can skip the agent entirely and build the same project by hand. This page shows how.

Prerequisites

Node.js >= 18

Familiarity with Next.js and Tailwind helps, but isn't required.

1. Get the template

Grab the canonical lightweight template with degit (no git history, just the files):

npx degit datopian/portaljs/examples/portaljs-template my-portal
cd my-portal
npm install
npm run dev

Open http://localhost:3000. You now have a running portal with a sample dataset.

Many datasets?

For a catalog with dozens of datasets, use the dynamic-routes variant
examples/portaljs-catalog instead — it renders every dataset through one
pages/datasets/[slug].tsx route from a datasets.json manifest, so adding a
dataset is a JSON entry plus a data file.

2. Add a dataset

Drop your file into /public/data/:

cp ~/Downloads/population.csv public/data/population.csv

Create a dataset page at pages/datasets/population.tsx:

import { Table } from '../../components/Table';
import Head from 'next/head';

export default function PopulationDataset() {
  return (
    <>
      <Head>
        <title>Population by area</title>
      </Head>
      <main className="max-w-5xl mx-auto px-4 py-8">
        <h1 className="text-3xl font-bold mb-6">Population by area</h1>
        <Table url="/data/population.csv" />
      </main>
    </>
  );
}

The Table component (in components/Table.tsx) fetches the CSV in the browser with papaparse and renders it with @tanstack/react-table. No server code needed — Next.js serves /public/ statically.

Then add a link to the new page from your home page catalog (pages/index.tsx).

3. Add charts, maps, and backends

Everything the skills do, you can do by hand:

Charts — npm install recharts and add a chart component to the dataset page.
Maps — npm install react-leaflet leaflet and render a GeoJSON file.
CKAN — npm install @portaljs/ckan and pass a datastoreConfig to Table, or build a catalog against the CKAN API. See CKAN integration.

For the conventions these follow — import paths, data loading, page structure — read the CLAUDE.md development guide in the repo.

4. Deploy

The template is a standard Next.js app. Deploy it to Vercel:

npx vercel

…or export a static build (next build) and host the out/ directory anywhere.

Where to go next

Core concepts — the ideas behind the template and the skills.
Quickstart — let the skills do the typing instead.

Prev Next Lesson