Skip to content

ModusCreateOrg/labs

Repository files navigation

Modus Labs

Modus Labs Website

🔗 https://labs.moduscreate.com

powered_by Modus_Create MIT Licensed Capsule AWS Web App Builder React Gatsby PWA

Developing

Gatsby is a React-based static web generator. React code is pre-built and served as static HTML. All resources such as images, CSS, and JS are pre-built, too. Users will receive rendered HTML and Javascript. Once Javascript is bootstraped, the page will silently re-render and enable active content.

SSR

React developers should understand the traits of Server Side Rendering when developing this web site.

  • Do not rely on browser-specific globals such as window or document. They may not exist in node environment.
  • componentDidMount does not fire during SSR. There's no mounting at that stage
  • Use React Helmet to work with tags that go in <head>
  • Use React Idle to omit parts of the web site that doesn't need to be rendered on the server. You will want to avoid the parts that do not contribute to Above the Fold or Critical Path content.

Setup

This site can be built on any system that supports Node v6.9+.

git clone [email protected]:ModusCreateOrg/labs.git
cd labs
npm install
Dev server
npm run develop
Build static web for production
npm run build

Code organization

File/Folder Description
components Data-agnostic atomic components
containers Reusable combinations of components built using a specific layout that represents a meaningful portion of a view
data/projects JSON-formatted representation of projects. See the docs.
pages Pages or routes for this web site
theme Sass globals and variables
html.js HTML template formatted for Server Side Rendering

Styling

We use Sass for styling. All variables are in the theme folder

Projects

Take a look at current Modus Labs projects in JSON format.

Add a new project

  • Copy one of the project JSON files and change properties
  • New JSON file will automatically generate a project on the web site
  • Changes will automatically apply on each merge

Properties

Property name Description
name Project name
featured Set to true to appear at the top of the page. Keep max 4 featured projects
weight The higher the number, the closer to the top the project will show. This is useful to sort projects
repo Repository URL (https)
headline Short pitch < 250 characters
description Meaningful description. < 600 characters. Use all the right keywords
image File name stored in Cloudinary. Responsive images will be generated automatically
stack Array of technologies used. Use react, react-native, vue, ionic, angular, or aws. The list may get bigger, but we need to prepare a logo for each.
tags Keywords
team Array of objects with name and twitter properties for the team who contributed to this project
title Short pitch < 50 characters
screenShots Array of objects with screen to explain the working app flow

Deployment pipeline

Capsule

The Modus Labs web site is deployed on AWS, powered by Capsule.

Here's how it works:

  1. Create a Pull Request using GitHub Flow
  2. Capsule will use AWS CodeBuild service to build the site from your branch
  3. If build is successful, the Pull Request checks section will go green.
  4. Once the Pull Request is merged, Capsule will rebuild the master branch and deploy a new version of the web site to AWS CloudFront

Troubleshooting

Issues with nodejs versions on npm install

Run:

# install NVM
$ bash nvm-install.sh

# Create a new terminal instance or refresh your profile/resource file
$ nvm install 12.15.0
$ nvm use
$ npm i
$ npm run build
```


# Modus Create

[Modus Create](https://moduscreate.com) is a digital product consultancy. We use a distributed team of the best talent in the world to offer a full suite of digital product design-build services; ranging from consumer facing apps, to digital migration, to agile development training, and business transformation.

[![Modus Create](https://res.cloudinary.com/modus-labs/image/upload/h_80/v1533109874/modus/logo-long-black.png)](https://moduscreate.com)

# License

MIT