Gatsby and React
This latest iteration of the website was built using Gatsby. In their own words: “Gatsby is a React-based open source framework for creating websites and apps. Build anything you can imagine with over 2000 plugins and performance, scalability, and security built-in by default.” It is according to W3Techs Technology Market Report, May 2020, the number one fastest growing framework.
To use Gatsby you will need some familiarity with React and the JSX syntax. JSX enables HTML to be written in JavaScript which lends itself nicely to building components, code snippets and generally modularizing the codebase. Gatsby ships with some useful tools built in including hot reloading and backwards compatibility with Babel. In addition, Gatsby uses graphQL to load site data and images which while it does have advantages adds to the learning curve if you are not familiar with it.
React Bootstrap
For layout and styling this site uses Bootstrap, a popular plugin made by Twitter. In this case React Bootstrap and regular Bootstrap were used. React Bootstrap has its own documentation with the main difference being the JSX syntax.
Images and Logos
Logos were built in Adobe Illustrator, which is proprietary software, but a one-month free trial is available. An alternative option might be Canva which has a free plan. Some images for the site were taken from Pexel, which has free stock images that can be used on websites, so thanks to them.
Hosting with AWS Amplify and AWS Route 53
As we already use the Amazon Web Service platform at Opsmorph it was the natural choice for hosting. The domain names were registered with AWS Route 53 and the website was deployed first to an AWS CodeCommit repository and from there into the AWS Amplify Console. AWS Route 53 and AWS Amplify integrate seamlessly as you would expect and so using the custom domain involved just one or two clicks. Once setup, every new commit to the master branch of the repository instantly deploys the update to the AWS CloudFront deployment, a global content delivery network that is automatically provisioned when setting up AWS Amplify. AWS Amplify also enables a password protected test branch to be deployed to share changes and new features with a select team prior to pushing to production.
