friday.de v1.0.0
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.
- Staging Storybook: http://www-storybook-staging.green.fridev.de.s3-website-eu-west-1.amazonaws.com/ (yes... we can improve this url)
- Staging environment: http://www-staging.green.fridev.de/
- Production environment: https://www.friday.de/
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.
3 years ago