Setup Guide: Create a data catalog with PortalJS and CKAN to share your data stories

Luccas Mateus

Luccas Mateus

The ckan-example added to PortalJS is intended to provide users with an easy way to set up a data catalog that can be used to display and share data stores behind a CKAN Backend. With this example, users can quickly set up a web-based portal that allows them to showcase their data and make it accessible to others, all this being done just by adding a simple env variable pointing to a CKAN Deployment.


To get a feel of the project, users can check the live deployment.

Below are some screenshots:

Front page

Individual dataset page

How to use this example as a template

  • Create a new app with create-next-app:
npx create-next-app <app-name> --example
cd <app-name>
  • This project uses CKAN as a backend, so you need to point the project to the CKAN Url desired, you can do so by setting up the DMS env variable in your terminal or adding a .env file with the following content:
DMS=<ckan url>
  • Run the app using:
npm run dev

Congratulations, you now have something similar to this running on http://localhost:3000 If yo go to any one of those pages by clicking on More info you will see something similar to this


Deploy with Vercel

By clicking on this button, you will be redirected to a page which will allow you to clone the content into your own github/gitlab/bitbucket account and automatically deploy everything.

Extra commands

You can also build the project for production with

npm run build

And run using the production build like so:

npm run start