Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lauragift21/portal
https://github.com/lauragift21/portal
Last synced: about 4 hours ago
JSON representation
- Host: GitHub
- URL: https://github.com/lauragift21/portal
- Owner: lauragift21
- Created: 2020-05-29T09:17:48.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2021-04-01T02:15:50.000Z (over 3 years ago)
- Last Synced: 2024-05-02T01:02:06.263Z (7 months ago)
- Language: TypeScript
- Homepage: https://portal-ashy.now.sh
- Size: 1.05 MB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
🌀 `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.
[CKAN]: https://ckan.org/
[Next.js]: https://nextjs.com/
## Getting Started
### Setup
Install a recent version of Node. You'll need Node 10.13 or later.
### Create a Portal app
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:
```console
npm init portal-app my-data-portal
```
> NB: 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.
## Guide
### Styling :art:
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
### Backend
So far the app is running with mocked data behind. You can connect CMS and DMS backends easily via environment variables:
```console
$ export DMS=http://ckan:5000
$ export CMS=http://myblog.wordpress.com
```
### Routes
These 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, `/about` etc. from CMS or can do it without external CMS, e.g., in Next.js
### New Routes
TODO
## Developers
### Boot the local instance
Install the dependencies:
```bash
yarn # or npm i
```
Boot the demo portal:
```console
$ yarn dev # or npm run dev
```
Open [http://localhost:3000](http://localhost:3000) to see the home page :tada:
You can start editing the page by modifying `/pages/index.tsx`. The page auto-updates as you edit the file.
### Tests
We use Jest for running tests:
```bash
yarn test # or npm run test
# turn on watching
yarn test --watch
```