July, 20th 2020

How we build our new MVST. website

by Tobias Rickmann

Welcome to our new MVST website. In this blog post I, Tobi, developer at MVST, want to share some insights with you about how we build our new MVST website.

I came up with the idea of writing a blog post about our new website when talking about Gatsby JS in our every two weeks of tech talk. In this tech talk serious we discuss and present interesting technologies, strategies, architectures or new libraries like Gatsby JS. I have built our new website with Gatsby JS, so I thought it would be a nice idea to do a tech talk about this topic.

I had a lot of fun researching while preparing the tech talk so I came up with the idea of transforming it into the first blog post for our website.

I will start by sharing some interesting facts about our website that you may have already noticed while browsing our new website:

1. No page reloads when switching between pages

No page reloads when switching between pages

2. Page animations and transitions (a lot more to come 😉)

Page animations and transitions

3. Really clean look and feel with colors on the import sections

As I already told you in the introduction, we used GatsbyJS for building our website. Gatsby JS is used by big corporates like ReactJS, Figma, Sengrid and Airbnb.

What is Gatsby JS and why did we choose it?

Gatsby JS is a Static Site Generator using React JS and GraphQL. The benefits of building a website with GraphQL are blazingly fast page loads and only static files combined with the look and feel of a Single Page Application. Gatsby JS is transforming all the React JS code into single HTML files and static optimized assets.

You now may have some difficulties understanding the phrases "Single Page Application" and "Static Site Generator". So in the following paragraphs, I will give you a short explanation about these.

What is a Static Site Generator?

A Static Site Generator is generating a static website. So there is no CMS behind the website. Everything is built locally before deploying the website to the server. You may now ask yourself why not use a CMS? The benefits of a Static Site Generator are more speed, control, security and quality on your website. You can not change content directly on your website. While changing content on the website you always need to redeploy the website to the server. That leads to better quality and importance of the content. You can't change content on the fly like in a CMS and accidentally break your website. If you do that with a Static Site Generator the build will fail and therefore nothing will get deployed. The perfect solution to this would be to have a test website where you deploy everything before releasing. (We have that for our new MVST website as well)

What is a Single Page Application?

A Single Page Application only has one static HTML file and all the content you see on the website is loaded dynamically with JavaScript. That means if you click for example on a link to a page JavaScript is handling the rendering of the requested site. Normally this way of building a website is only used for complex applications but nowadays you have the possibility to also build static websites with that technique.

Gatsby JS additionally has a dynamic content loader. That means if you scroll down on the page and Gatsby JS is noticing a link to another page, Gatsby JS will preload the content directly. If you click then on the link the content will be already loaded and you will have a really fast page transition.

So Gatsby JS itself and the technique of Single Page Applications are leading to a really modern and dynamic feeling of browsing on a website.

Got a project?

We build complex Single Page Applications with React JS.

Now I want to share some more insights about the ecosystem of Gatsby JS. Gatsby JS has a really big ecosystem of starter packages and libraries which are free to use.

Gatsby starter packages

Gatsby JS offers some default starter packages if you want to connect your static page with Contentful or WordPress (I will talk a bit more in detail about that later). On our MVST website we just used the gatsby default starter. A better solution would be to directly use the gatsby typescript starter to have a better type checking when building your components and pages with React JS.

Gatsby plugins

The Gatsby JS ecosystem provides a lot of useful plugins which are really helpful when developing the website. On our new website we used some helper libraries to handle SEO, page transitions, animations, the usage of the CSS preprocessor SASS, image optimizations and a lot more. There are also some plugins to handle multilingual websites or the connection to a CMS like WordPress or Contenful.

Gatsby JS is using GraphQL of providing the content of the page to the code of the developer.

What is GraphQL?

GraphQL is a query language to query and mutate data from your backend, a static file or wherever you save your data. In our case we are saving the content from the website in json and markdown files. We then make usage of GraphQL to query the data we need on a specific page. With GraphQL it's really easy to write the queries that provide you only with data you really need. With mutator you also would be able to write data through GraphQL. But for Gatsby JS and our new website that is nothing we need.

Example of using GraphQL on our page to show the last three blog posts.

import React from 'react';
import { Box, Section, Grid } from '../../../components';
import { HeadingWithSubheading } from '../../../layouts';
import { graphql, StaticQuery } from 'gatsby';
import BlogPost from './BlogPost';
import styles from './index.module.scss';
import { blogSection } from '../../../content/index.json';
const BlogSection = () => {
  return (
    <StaticQuery
       query={graphql'
        query {
          allMdx(
            limit: 3
            sort: { fields: frontmatter___date, order: DESC }
            filter: { fileAbsolutePath: { regex: "/pages/posts/" } }
          ) {
            edges {
              node {
                frontmatter {
                  date(formatString: "MMMM, Do YYYY")
                  title
                }
                fileAbsolutePath
              }
            }
          }
        }
      '}
      render={({ allMdx }) => (
        <Section paddingTop="xl" paddingBottom="xl">
          <Grid.Container className={styles.sectionContainer}>
            <Box marginBottom="xxxl">
              <HeadingWithSubheading
                title={blogSection.title}
                subtitle={blogSection.subtitle}
              />
            </Box>
            {allMdx.edges.map((node, index) => (
              <BlogPost post={node} key={index} />
            ))}
          </Grid.Container>
        </Section>
      )}
    />
  );
};
export default BlogSection;

Got a project?

We build full stack React JS GraphQL applications with a Node.js GraphQL Backend Server.

Managing the content on our new websites

We have two ways of managing the content on our website.

1. Static pages like the services or about us page with json files.

Here we use one json file per page to easily change the content on the page. One downside is that when adding a completely new section you need a developer to add that section.

Example of the json file from the hero section on the index page.

{
  "seoTitle": "A full product delivery studio.",
  "seoDescription": "",
  "heroSection": {
    "underlinedText": "Featured Project",
    "title": "Empowering Hightech Ventures",
    "text": "Digital solution for AHEAD",
    "link": {
      "to": "/showcases/fraunhofer",
      "animatedColor": "#FBDC4B"
    },
    "image": {
      "url": "fraunhofer-home.png",
      "alt": "Fraunhofer Hightech Venctures"
    },
    "solutionsFor": {
      "title": "We have built solutions for...",
      "images": [
        {
          "url": "ottonova-logo.png",
          "alt": "Ottonova",
          "width": "12rem"
        },
        {
          "url": "sueddeutsche-zeitung-logo.png",
          "alt": "Süddeutsche Zeitung",
          "width": "20rem"
        },
        { "url": "check24-logo.png", "alt": "Check24", "width": "11rem" }
      ]
    }
  }
}

2. Dynamic pages like the showcases or blog posts with mdx files.

We use a modern approach of markdown files, called MDX. MDX is a combination of markdown files and React JSX. I don't want to go in detail about that topic.

Example of a MDX file with static variables on the top and the usage of provided components where you can pass different arguments.

---
title: 'Fraunhofer'
shortDescription: 'A complete zero to 100 project involving product strategy, design, and development, we helped the inhouse innovation hub to continue on its path to success.'
hasShowcase: true
order: 4
color: '#FBDC4B'
featureImage: "fraunhofer-feature.png"
featureSubtitle: "Product, Design, Development"
featureTitle: "Fraunhofer Ahead"
featureText: "Empowering Hightech Ventures."
featureOnShowcase: true
---
<ShowcaseHeader
  image="fraunhofer-showcase-header.png"
  logo="fraunhofer-showcase-logo.png"
  logoWidth="15rem"
  bgColor="#FBDC4B"
  title="Fraunhofer Ahead"
  subtitle="Empowering Hightech Ventures."
/>

Deployment of our website

We are deploying our website to Heroku. We are already experienced with using Heroku and compared to other services it is really cheap. So we kept using Heroku for our website as well.

The only thing you need for deploying a static website to Heroku is a special buildpack: https://github.com/heroku/heroku-buildpack-static and some basic configuration:

We have a production Heroku application which is the website you are currently on and a test Heroku application where we can test our new pages and features.

Summary

I liked developing our new MVST website with Gatsby JS. The outcome with the fast page loads and awesome transitions/animations feels really smooth and modern. I also got to know some new technologies like GraphQL, which we are now already using on more complex applications for our clients.

The only downsides I had while developing was just because of using old libraries combined with Gatsby JS which was sometimes throwing an error while building the website but not throwing an error in development mode.