Web

Quickstart
Ensure docker is running, then run the following when running for the first time:
yarn dev-init web
To start the app:
yarn dev web
These commands are just shorthands for the setup described below.
About
The web consolidates content from multiple sources and displays it in a user friendly way.
URLs
​Dev​
​Staging​
​Production​
Getting started
First off: Configure which API to fetch data from.
Mock API (no server)
Add API_MOCKS=true to your .env, or export API_MOCKS=true to your .env.secret file.
You can tweak the mock data in libs/api/mocks.
Local API server
The web depends on the cms and content-search domains of the API these in turn depend on Elasticsearch. Hence we have to have Elasticsearch running on our machine for these domains to function as expected. The recommended approach to running Elasticsearch on your machine depends on what you want to work on:
If you want to work on the cms or content-search domains such as add models or alter Elasticsearch queries it's recommended you run Elasticsearch locally you can find further instructions on how to achieve this under search-indexer dev-services section.​
If you just want to run the API to have access to real data you can run the Elasticsearch proxy server, this gives you access to the elasticsearch instance of the dev environment (this is prefered since the proxy uses less resources than the local instance of Elasticsearch).
To access elasticsearch instance from dev environment:
1.Login here https://island-is.awsapps.com/start#/ (Contact devops if you need access)
2.Copy env variables as instructed here (image arrows 1,2,3)
3.Paste env variables into terminal
4.Run ./scripts/run-es-proxy.sh from island.is root
5.You have success if you see Forwarding from 0.0.0.0:9200 -> 9200 in terminal
Caveats:
You need to have docker/podman installed and running
You have to refresh your AWS env variables every 8 hours
yarn start api
You must have env variables for the cms and content-search domains for the website to work as expected.
These are:
CONTENTFUL_HOST= - Get from Contentful (depends on whether you use prod or preview tokens)
CONTENTFUL_ACCESS_TOKEN= - Get from Contentful or by running yarn get-secrets api
CONTENTFUL_MANAGEMENT_ACCESS_TOKEN= - Get from Contentful (only used when generating models from Contentful in API) ELASTIC_NODE=http://localhost:9200/
Start the web server
You can start the web server by running:
yarn start web
This starts a server on localhost:4200
Feature flags
You can create and manage feature flags in https://configcat.com/
These feature flags allow you to change boolean values that can be used to change things in the project at runtime (like enabling or disabling a specific feature).
Example usage:
import { Screen } from '@island.is/web/types'
import { getFeatureFlag } from '@island.is/web/utils/featureFlag'
​
interface Props {
  flag: boolean;
}
​
export const SomeScreen: Screen<Props> = ({ flag }) => {
  return (
    <div>
      {flag && <p>This is shown when the flag is set to true</p>}
      {!flag && <p>This is shown when the flag is set to false</p>}
    </div>
  )
}
​
SomeScreen.getInitialProps = async () => {
  const flag = await getFeatureFlag('someFeatureFlag', false)
  return { flag }
}
​
export default SomeScreen
Further Documentation
​Subpages - Information on Layouts and Components used when creating subpages for the web.
Code owners and maintainers
​Júní​
​Aranja​

Last modified 1mo ago