🔗 https://labs.moduscreate.com
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.
React developers should understand the traits of Server Side Rendering when developing this web site.
- Do not rely on browser-specific globals such as
windowordocument. They may not exist in node environment. componentDidMountdoes 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.
This site can be built on any system that supports Node v6.9+.
git clone [email protected]:ModusCreateOrg/labs.git
cd labs
npm installnpm run developnpm run build| 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 |
We use Sass for styling. All variables are in the theme folder
Take a look at current Modus Labs projects in JSON format.
- 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
| 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 |
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
masterbranch and deploy a new version of the web site to AWS CloudFront
Modus Create 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.
MIT
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent