1.0.0 • Published 3 years ago

friday.de v1.0.0

Weekly downloads
-
License
UNLICENSED
Repository
-
Last release
3 years ago

friday.de

Welcome to the FRI:DAY website development repo. The site is built using Gatsby, which means it is a statically generated site built from React components.

The page content is pulled from the friday-landing project on Prismic. Since the site is generated statically, the content is being fetched from Prismic at build-time, meaning that a new deployment is required for publishing new content.

Many of the UI components used come from the Friday-wide design-system repo. As of this writing, version 2 of the design system, which this repo requires, lives in the branch called bonobo.

TypeScript is used for all code, and styled-components with styled-system take care of the CSS.

Getting Started

Before starting, make sure you have node and yarn installed. Start by cloning the repository:

git clone git@gitlab.forfriday.de:green/friday-de.git

Environment

The project has some dependencies that live in the private @fridayde npm registry, so therefore an npm auth token is needed. Please follow the instructions from the design-system README for configuring your token.

A few environment variables are also needed to build the project. Rename the file called .env.example to .env.development and fill in the values of the environment variables from GitLab's Environment Variables section.

If you need to make production builds locally, you can also create a .env.production with the production equivalents.

Install Dependencies

Once that's done, you can run yarn to install all dependencies:

cd friday-de
yarn

Build Scripts

To start the development server:

yarn develop

To start the Storybook containing examples of all the React components used:

yarn storybook

To run the tests:

yarn test

To update the snapshots for the Enzyme tests:

yarn test --updateSnapshot

To just typecheck without running the dev server:

yarn compile

To generate a bundled build in the public folder, run either of:

yarn build-dev
yarn build-prod

To serve the generated bundle:

yarn serve

To generate a bundled build of the storybook in the storybook-static folder for deployment:

yarn build-storybook

Deployment

Deployment is automated using GitLab CI. There are a few different hosted environments.

Note about gatsby-source-prismic-graphql plugin

We are using a gatsby plugin called gatsby-source-prismic-graphql plugin to connect Gatsby with Prismic. Unfortunately, we had some issues with this plugin which we could not work around except through forking it and introducing some changes of our own. This fork lives at https://github.com/FRI-DAY/gatsby-source-prismic-graphql and is published to the internal Friday NPM registry under the name @fridayde/gatsby-source-prismic-graphql from where it is consumed by this codebase.

Release Process

1. Deploy friday.de to staging

When all the features to be released have been approved and merged to master, merge master into the staging branch:

git checkout staging
git merge master
git push

The push will trigger a deployment to the staging environment.

2. Test new code on staging

The staging server for friday.de is currently at http://www-staging.green.fridev.de.

3. Deploy landing-page to staging

In case there have been changes made to the landing-page repo, make sure that these have been merged to master. They will then have been deployed to the landing-page staging server, currently at: https://landing-page.k8s.green.fridev.de/

Don't forget:

  • The header and footer are duplicated in the landing-page project so any changes to those in friday.de must be copied over to landing-page.
  • If the design-system repo has been updated since the last release, the landing-page's dependency on it should be updated to match the version used in friday.de.

4. Update whitelist

The file ingress.yaml in the repo https://gitlab.forfriday.de/green/www-reverse-proxy controls which pages should be served from the new friday.de codebase. Any pages not listed will continue to be served from the landing-page codebase.

Merging or pushing to master will trigger an automatic deployment of the list to the staging server for the mingled environment. This is currently: https://www-staging.fridev.de/.

5. Test mingled environment

On the mingled staging server, check that the whitelisted pages are indeed being served from the new codebase (staging server from step 2).

While we're here, also test any changes that were deployed from the landing-page repo in step 3.

6. Deploy friday.de to production

In the friday.de repo, the branch called production always represents the code last deployed to the live site. Deploying it is a two-step process, first we merge the master branch into the production branch using a Merge Request on GitLab.

A pipeline should start running that deploys to production.

7. Deploy landing-page to production

This also involves manually triggering the GitLab pipeline deploy-production.

8. Test live site

Verify that the live site now has the latest content from both repos.

9. Deploy whitelist to production

Now when we have all the latest code deployed, we can also deploy the whitelist to switch over any new pages to friday.de. This is also done by manually triggering the deploy production pipeline.

10. Final check of www.friday.de

Everything should now be in place and routed properly.