Base Website Docs



Components

Developers

Overview

The Base website is developed with a static website and app generator called Gatsby. Gatsby is based on React which is developed by the team at Facebook.

Static Website Generator?

Basically traditional websites send a request from the user's browser to a server where the website is compiled and then send back to the user's browser. A static website pre complies the website and shows the user a premade website from a CDN. The result is a massive time saving on the user side.

Gatsby is unique in that once the static site is shown to the user, it turns into a react app and can do everything a "normal" database driven site can do.

Required knowledge

  • HTML
  • CSS
  • JavaScript
  • React
  • JSX
  • GraphQL (for API work) 

Infrastructure

  • Github for repository hosting
  • Netlify for continuous development and "hosting"
  • AWS for Lambada functions
  • MEWS for hostel booking engine
  • Stripe for payment processing on non-hostel products
  • Google Tag Manager/Google Analytics
  • Formcarry for form hosting

Development workflow

  1. Developer clones our GitHub repository *Add in link and make private
  2. Developer runs and NPM install and runs gatsby build, which provides as a local dev environment with hot reloading
  3. Changes to the website are made on a branch of the GitHub repository.
  4. On pull request, Netlify, which is integrated with GitHub, will create a test build on a development URL
  5. Assuming the build completes and the website has physically tested okay, the branch can be merged and the actual website will be built and published.

Dependencies

There are a bunch of Gatsby based plugins to expend functionality which are pretty self-explanatory. In addition, these libraries are used

  • Styled ComponentsFor component-based CSS 
  • Google maps react - For map display on hostel pages
  • React player - For video display
  • React oembed container - For adding in embedded Pinterest, Instagram etc

Hosting

The base website is a a little bit different in that. There is not a traditonal server ruuning. Instead our website is a static website and when we make changes, either when the code or content has been changed, the site is rebuilt. This build process creates all of the webpages and then puts them on a CDN rather than a traditional server. Becuase the wesbite is highly distributed, it's unlikely that all CDN's in the world could go down resulting in high uptimes

What can go wrong?

Not much on the server side. But here is a list of problems, outcomes and solutions

  • Codeing error: 99% of the time the build fails, result is that the most recent version of the site is not over written and continues to run normally. Solution is to check build logs and fix code.
  • DatoCMS build fails: Likey cause is that data got deleted or was not correctly filled out. Result is as above. Solution is to check build logs and fix code.

Site down?

In the event that our wesbite is down, the first thing is to check the Netlify status page. If the issue is a CDN issue then it's likely not just us and the issue will be resvoled shortly.

Otherwise, Contact support via the form

Aside from Netlify, other failure points include. Cloudflare or DNS provider and our registrar

Video tour

Watch here