🔗 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.
window
or document
. They may not exist in node environment.componentDidMount
does not fire during SSR. There's no mounting at that stage<head>
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
npm run develop
npm 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.
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:
master
branch and deploy a new version of the web site to AWS CloudFrontIssues 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 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