🌀 Portal is a framework for rapidly building rich data portal frontends using a modern frontend approach (javascript, React, SSR).
Portal assumes a "decoupled" approach where the frontend is a separate service from the backend and interacts with backend(s) via an API. It can be used with any backend and has out of the box support for CKAN. portal is built in Javascript and React on top of the popular Next.js framework.
Install a recent version of Node. You'll need Node 10.13 or later.
To create a Portal app, open your terminal, cd into the directory you'd like to create the app in, and run the following command:
npm init portal-app my-data-portalNB: Under the hood, this uses the tool called create-next-app, which bootstraps a Next.js app for you. It uses this template through the --example flag.
If it doesn’t work, please open an issue.
We use Tailwind as a CSS framework. Take a look at /styles/index.css to see what we're importing from Tailwind bundle. You can also configure Tailwind using tailwind.config.js file.
Have a look at Next.js support of CSS and ways of writing CSS:
https://nextjs.org/docs/basic-features/built-in-css-support
So far the app is running with mocked data behind. You can connect CMS and DMS backends easily via environment variables:
$ export DMS=http://ckan:5000
$ export CMS=http://myblog.wordpress.comThese are the default routes set up in the "starter" app.
- Home
/ - Search
/search - Dataset
/@org/dataset - Resource
/@org/dataset/r/resource - Organization
/@org - Collection (aka group in CKAN) (?) - suggest to merge into org
- Static pages, eg,
/aboutetc. from CMS or can do it without external CMS, e.g., in Next.js
TODO
Install the dependencies:
yarn # or npm iBoot the demo portal:
$ yarn dev # or npm run devOpen http://localhost:3000 to see the home page 🎉
You can start editing the page by modifying /pages/index.tsx. The page auto-updates as you edit the file.
We use Jest for running tests:
yarn test # or npm run test
# turn on watching
yarn test --watch