https://github.com/diggsweden/dataportal-web
Källkod för dataportal.se
https://github.com/diggsweden/dataportal-web
apollo-graphql dataportal emotion react react-router typescript
Last synced: 4 months ago
JSON representation
Källkod för dataportal.se
- Host: GitHub
- URL: https://github.com/diggsweden/dataportal-web
- Owner: diggsweden
- License: bsd-2-clause
- Created: 2020-01-17T08:33:25.000Z (over 6 years ago)
- Default Branch: main
- Last Pushed: 2025-12-12T11:38:18.000Z (6 months ago)
- Last Synced: 2025-12-14T01:16:49.037Z (6 months ago)
- Topics: apollo-graphql, dataportal, emotion, react, react-router, typescript
- Language: TypeScript
- Homepage:
- Size: 36.6 MB
- Stars: 23
- Watchers: 6
- Forks: 6
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# The Swedish data portal web client – [dataportal.se](https://www.dataportal.se)
Sweden´s national data portal gathers and shares data for re-use to make it easier for users to find and explore it across sectors and domains.The portal only contains information about datasets, i.e. metadata. The actual datasets are retrieved via links for download or requested by the respective organization responsible for their own datasets. The Agency for Digital Government (DIGG) is responsible for Sweden's national data portal.
## Entryscape
[
](https://entryscape.com/en)
The Swedish data portal is tightly integrated with the EntryScape product suite from MetaSolutions AB.
EntryScape Registry is a solution for managing a registry of data catalogs and related information
## Requirements
## Development
Start by creating an `.env.local` file. Use the `.env.local.example` as template.
(Environment variables and tokens in .env.local.example that has placeholder value of "secret" is not available here and needs to be changed to a valid value).
### Run application in development mode
Starts the application in development mode with hot-code reloading, error reporting, and more. See [Nextjs Development](https://nextjs.org/docs/app/api-reference/next-cli#development) for more information.
Run:
```sh
yarn
yarn dev
# If you are having issues connecting to your localhost port for apollo:
export NODE_OPTIONS=--dns-result-order=ipv4first
```
Visit [http://localhost:3000](http://localhost:3000) in the browser.
### Run application in production mode
Builds the application for production usage. See [Nextjs production build](https://nextjs.org/docs/app/api-reference/next-cli#build) for more info.
And Start the Next.js production server. See [Nextjs start production](https://nextjs.org/docs/app/api-reference/next-cli#production) for more info.
Run:
```sh
yarn
yarn build
yarn start
```
Visit [http://localhost:3000](http://localhost:3000) in the browser.
### Run application with Docker
Run the following to start the application with docker.
```sh
#build image
docker build . -t dataportal-web
# Create container
docker run -p 3000:3000 -e PORT=3000 -e HOST=http://localhost:3000 -e REACT_APP_APOLLO_URL=http://localhost:1400 -e REACT_APP_RUNTIME_ENV=prod -e IMAGE_DOMAIN=host.docker.internal -e REACT_APP_MEDIA_BASE_URL="http://host.docker.internal:1400/assets/dataportal" --add-host=host.docker.internal:host-gateway dataportal-web
```
### Local testing with Sandbox data
Go to: [sandbox.localhost](http://sandbox.localhost:3000/) to test and explore the site with data from Entryscape sandbox environment.
### Health check
NextJs answers on [http://localhost:1300/api/healthcheck?secret=[HEALTHCHECK_SECRET from env]](http://localhost:1300/api/healthcheck?secret=)
No cache, Do a request to content backend with startpage query.
```sh
{"status":"fail"}
```
```sh
{"status":"pass"}
```
## Notes
### Stack
- [](https://nextjs.org/)
- [](https://www.typescriptlang.org/)
- [](https://reactjs.org/)
- [](https://tailwindcss.com/)
- [](https://www.apollographql.com/docs/react/)
### Content backend
The Swedish Dataportal consumes news and content via a GraphQL proxy. The content is
rendered with Apollo GraphQl and React. The proxy is not published on Github.
### Videos
[
](https://screen9.com/)
Display of video is done via [screen9](https://screen9.com/). To be able to display videos an account from screen9 is needed and an API key.
The key for this frontend application has read access only to DIGG screen9 account.
## E2E Test with Cypress
[cypress.io](https://www.cypress.io/)
Run all tests
```bash
yarn cypress run
```
Run a specific test
```bash
yarn cypress run --spec "cypress/e2e/YOUR_TEST_FILE.cy.js"
```
To use the cypress GUI run the following command.
```bash
yarn cypress open
```
This can be used to debug and view your tests in a user interface.
### Guidelines when writing tests
To write tests that are easy to maintain, follow these guidelines:
- Use descriptive names for tests
- Divide tests into smaller tests to make them easier to maintain and debug
- Use/add data-test-id to select elements to avoid using CSS selectors
- Add comments to explain why a test is written in a certain way
- Keep tests clean and readable