Modus Labs Website

Developing
Add a new project
- Project config properties
Deployment pipeline
Modus Create
License

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 git@github.com: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

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

Here's how it works:

Create a Pull Request using GitHub Flow
Capsule will use AWS CodeBuild service to build the site from your branch
If build is successful, the Pull Request checks section will go green.
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

rodriguezmanu / labs