🔗 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 git@github.com: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
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
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.
[](https://moduscreate.com)
# License
MIT