{"id":13553564,"url":"https://github.com/datopian/frontend-v2","last_synced_at":"2025-07-02T11:06:25.542Z","repository":{"id":35492353,"uuid":"189984962","full_name":"datopian/frontend-v2","owner":"datopian","description":"CKAN / Data Portal frontend as microservice in pure Javascript (Node).","archived":false,"fork":false,"pushed_at":"2024-07-20T14:09:18.000Z","size":12439,"stargazers_count":38,"open_issues_count":39,"forks_count":18,"subscribers_count":13,"default_branch":"master","last_synced_at":"2024-11-04T01:32:45.483Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://tech.datopian.com/frontend/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/datopian.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-06-03T10:32:34.000Z","updated_at":"2024-05-31T11:20:24.000Z","dependencies_parsed_at":"2024-01-17T06:12:17.198Z","dependency_job_id":"d960b0d5-72a4-40ad-945e-d4f9eb455280","html_url":"https://github.com/datopian/frontend-v2","commit_stats":null,"previous_names":[],"tags_count":19,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/datopian%2Ffrontend-v2","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/datopian%2Ffrontend-v2/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/datopian%2Ffrontend-v2/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/datopian%2Ffrontend-v2/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/datopian","download_url":"https://codeload.github.com/datopian/frontend-v2/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246944377,"owners_count":20858773,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-01T12:02:28.380Z","updated_at":"2025-04-03T05:31:04.104Z","avatar_url":"https://github.com/datopian.png","language":"JavaScript","readme":"Data Portal frontend. Designed for CKAN but usable anywhere. Microservice architecture so you can run and customize it standalone and connect to your backend of choice. Built in pure Javascript (Node).\n\n\u003cdiv align=\"center\"\u003e\n\n## 📣 Announcing Portal.js 🌀\n### [Portal.js] 🌀 is a javascript framework for building rich data portal frontends fast\u003cbr/\u003e\u003cbr/\u003eusing a modern frontend approach (JavaScript, React, SSR).\n\n### 👉 https://github.com/datopian/portal.js\n\n### Next step in the evolution of this codebase\n\n\u003c/div\u003e\n\n[Portal.js]: https://github.com/datopian/portal.js\n\n![CI tests](https://github.com/datopian/frontend-v2/workflows/CI%20tests/badge.svg)\n[![Coverage Status](https://coveralls.io/repos/github/datopian/frontend-v2/badge.svg?branch=master)](https://coveralls.io/github/datopian/frontend-v2?branch=master)\n\n## Installation\n\nRequires node.js v8.10.0 or later\n\nClone the repo:\n\n```bash\n$ git clone https://github.com/datopian/frontend-v2.git\n```\n\nInstall project dependencies:\n\n```bash\n$ cd frontend-v2\n$ yarn # or you can use `npm i`\n```\n\nYou can now run the frontend app in dev mode:\n\n```bash\n$ yarn dev # or `npm run dev`\n```\n\nOpen a browser and navigate to http://localhost:4000. If everything went correctly you should see the *CKAN NG* frontend app!\n\n\u003e ![NG Home](./docs/img/ckan_ng_home.png)\n\nNow navigate to http://localhost:4000/search and you should see the data catalog - these are mocked at the moment. Let's now unmock it and use demo CKAN instance. To do that we need to change DMS API configuration. First stop the server and then run:\n\n```bash\n$ API_URL=http://demo.ckan.org/api/3/action/ yarn dev\n```\n\nNow you should see datasets from demo.ckan.org on your search page - http://localhost:4000/search.\n\nCongratulations! You have a working data portal with live data backend!\n\n## Theming\n\nChanging the appearance of the site is easy and quick - we suggest starting with the [hello world tutorial](./docs/theming/hello-world).\n\nNext step would be to check out the docs about [how themes work](./docs/theming/) in NG frontend.\n\n## Configuration\n\nBy default, the app uses a config file named `.env`. We provide a template that you need to rename and edit:\n\n```bash\n$ cp env.template .env\n```\n\nDescription of each variable:\n\n* `API_URL` - URL to the DMS backend API endpoint, e.g., if you're using CKAN Classic, it would be: `ckan-domain.com/api/action/`.\n* `NODE_ENV` - this is just a node environment to indicate in which environment you are. If it is unset or `development`, the app will use mocked APIs. If you're working against live endpoint, set this config to, e.g., `staging`.\n* `THEME` - name of your theme.\n* `PLUGINS` - list of space separated plugins, e.g., if you're using wordpress and dashboard: `wp dashboard`.\n* `REDIS_URL` - Provide Redis URL for the production environment in order to store sessions related data on the Redis database.\n* TODO: other configs\n\n### Use custom path to your `.env` file\n\nWhen starting a server pass `DOTENV_PATH` environment variable to specify path to your `.env`. This is useful if you're running several projects and have a config file for each of them:\n\n```bash\n# Running my first project:\n$ DOTENV_PATH=.project1.env yarn dev\n\n# Now running my second project:\n$ DOTENV_PATH=.project2.env yarn dev\n```\n\n## Set up your own backend\n\n*By default, the frontend runs against mocked API so you don't need to setup your own backend.*\n\nTo change environment variables, you can rename `env.template` as `.env` and set the values. Here you can find more about configurations in Configuration section.\n\n### DMS\n\nSetup `API_URL` environment variable so it points to your CKAN Classic instance, e.g., for demo.ckan.org it would be:\n\n```\nexport API_URL=https://demo.ckan.org/api/3/action/\n```\n\n### CMS\n\nYou can use one of built-in CMS plugins - check it out below.\n\n#### Wordpress\n\nRead about WordPress plugin here: http://tech.datopian.com/frontend/plugins/#wp\n\n#### CKAN Pages\n\nRead about CKAN Pages plugin here: http://tech.datopian.com/frontend/plugins/#ckan-pages\n\n## Extending (Plugins)\n\nThe frontend can be extended and customized. We saw in the [Hello World](./docs/theming/hello-world/) section how we can use a custom theme to override site html using a views template.\n\nIn addition to html templates, you can add custom routes, additional middleware and more via plugins (and themes). Read more plugins in the [plugins docs][plugins].\n\n[plugins]: ./docs/plugins/\n\n### Themes vs Plugins\n\nThemes and Plugins are actually very similar, for example you can create new routes or changes templates in both themes and plugins.\n\nWhen do you want to create a theme and when a plugin?\n\n* Plugins: functionality that applies to every request, regardless of what theme we are using.\n* Themes: go for a theme if you are customizing the look and feel. You can also use the theme if you are e.g. adding routes and and you are just doing this for a single portal (and you don't intend to swap around between themes for this portal).\n\n\n## Design - How it works\n\nAll of the controller and views MUST use the \"API\" modules, they don’t directly access the backend.\n\n### API\n\nWe have separated API module into `DmsModel` and `CmsModel`. The former part talks to CKAN (or can be any DMS), while the latter fetches content for static pages, for example, it can be WordPress. Below is the flow of how it works together:\n\n```mermaid\nsequenceDiagram\n    Browser-\u003e\u003eController: /\n    Controller-\u003e\u003eBrowser: home.html\n\n    alt Exists in CMS\n      Browser-\u003e\u003eController: /about\n      Controller--\u003e\u003eCMS: slug=about\n      CMS--\u003e\u003eController: found: page content\n      Controller-\u003e\u003eBrowser: static.html\n\n      Browser-\u003e\u003eController: /news\n      Controller--\u003e\u003eCMS: slug=news\n      CMS--\u003e\u003eController: found: list of posts\n      Controller-\u003e\u003eBrowser: blog.html\n\n      Browser-\u003e\u003eController: /news/my-blog-post\n      Controller--\u003e\u003eCMS: slug=my-blog-post\n      CMS--\u003e\u003eController: found: post content\n      Controller-\u003e\u003eBrowser: static.html\n    end\n    alt Not Found in CMS\n      Browser-\u003e\u003eController: /search\n      Controller--\u003e\u003eCMS: slug=search\n      CMS--\u003e\u003eController: not found: 404\n      Controller--\u003e\u003eDMS: search api\n      DMS--\u003e\u003eController: result: list of data packages + summary\n      Controller-\u003e\u003eBrowser: search.html\n\n      Browser-\u003e\u003eController: /org/gdp\n      Controller--\u003e\u003eCMS: slug=org/gdp\n      CMS--\u003e\u003eController: not found: 404\n      Controller--\u003e\u003eDMS: getPackage api\n      DMS--\u003e\u003eController: result: data package\n      Controller-\u003e\u003eBrowser: showcase.html\n    end\n```\n\n### Routes\n\nHere is the summary of existing routes at the moment:\n\n* Home: `/`\n* Search: `/search`\n  * with query: `/search?q=gdp`\n* Showcase: `/organization/dataset`\n* Organization: `/my_org`\n  * It gets redirected from CKAN like path: `/organization/my_org`\n* Collections: `/collections`\n  * It gets redirected from CKAN groups page: `/group`\n* CMS:\n  * About: `/about`\n  * Blog: `/news`\n  * Post: `/news/my-post`\n  * Anything else: `/foo/bar`\n\n## Tests\n\nSet `.env` to hit mocked services:\n\n```bash\nAPI_URL=http://127.0.0.1:5000/api/3/action/\nWP_URL=http://127.0.0.1:6000\n```\n\nRun tests:\n```bash\nyarn test\n\n# watch mode:\nyarn test:watch\n```\n\n## Deployment\n\n*You can deploy this app to any host that supports NodeJS.*\n\n### Heroku\n\nRead the docs about Deployment of NodeJS apps on Heroku - https://devcenter.heroku.com/articles/deploying-nodejs.\n\n### Zeit Now\n\nRead the docs - https://zeit.co/examples/nodejs\n\nSuggested config file (`now.json`):\n\n```json\n{\n  \"version\": 2,\n  \"builds\": [\n    {\n      \"src\": \"index.js\",\n      \"use\": \"@now/node-server\",\n      \"config\": { \"maxLambdaSize\": \"50mb\" }\n    }\n  ],\n  \"env\": {\n    \"NODE_ENV\": \"development\"\n  },\n  \"routes\": [\n    {\n      \"src\": \"/(.*)\",\n      \"dest\": \"/index.js\"\n    }\n  ]\n}\n```\n","funding_links":[],"categories":["JavaScript","others"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdatopian%2Ffrontend-v2","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdatopian%2Ffrontend-v2","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdatopian%2Ffrontend-v2/lists"}