Gatsby App Generator - How to build blazing fast React Apps

Hello Coder,

Thank you for landing on this page. By reading this you can find out  more about Gatsby App Generator, the open-source framework based on React. Using Gatsby, any developer with a basic knowledge of Javascript and React can build amazing apps and websites quite fast.

Btw, my nick name is Sm0ke, and I'm writing a lot on Dev.to

What is Gatsby

For newcomers, Gatsby is a React-based, GraphQL powered, app generator for static sites and apps. This builder read information from a variety of sources (file system, CMS (Wordpress, Drupal), structured data (YAML, JSON, Markdown) using GraphQL selects, and inject all the content into blazing fast apps and static websites. The deployment is also automatized for AWS, Netlify, GH pages and Now.sh.

Gatsby uses powerful preconfiguration to build a website that uses only static files for incredibly fast page loads, service workers, code splitting, server-side rendering, intelligent image loading, asset optimization, and data prefetching. All out of the box. I didn’t believe the speed until I tried it myself.

To start using this React-based app generator, is quite easy and all we need it's to have Node.js and Gatsby CLI, installed globally into our system.

Generate apps with Gatsby

The platform has a generous offer for starters, categorized by functionalities, CSS frameworks, and underline technologies:

For a full list, just access the official Gatsby corner with apps and projects.


GatsbyJS Dimension

GatsbyJS Dimension is an open-source app built with Gatsby app generator on top of HTML5Up Dimension design.

GatsbyJS Dimension - Gif animated presentation.

How to build the app from sources:

$ git clone https://github.com/app-generator/gatsbyjs-dimension.git
$ cd gatsbyjs-dimension
$ yarn 
$ yarn start # start the app in development mode
$ yarn build # build the app for production

Gatsby Tailwindplay

TailwindPlay - a simple open-source landing page styled with Tailwind CSS.

Gatsby TailwindPlay - Gif animated intro

In case you want to generate your next app, using this Gatsby starter, just type:

$ git clone https://github.com/app-generator/gatsbyjs-starter-tailwindplay.git
$ cd gatsbyjs-starter-tailwindplay
$ yarn # install modules
$ yarn start # start the app in development mode
$ yarn build # build the app for production

Gatsby SCSS starter

It's a static starter based on Gatsby and styled via a minimal SCSS.

GatsbyJs SCSS Starter - Animated intro

To generate an app, based on this starter, without leaving the page just type:

$ git clone https://github.com/app-generator/gatsby-starter-scss.git
$ cd gatsby-starter-scss
$ yarn # install modules
$ yarn start # start the app in development mode
$ yarn build # build the app for production

Blog Morning Dew

A blazing fast blog starter generated from Markdown content, PWA, Disqus, SEO, Styling:CSS-in-JS.

Blog Starter Morning Dew - App Screen Shot.

To build this starter from sources, just type:

$ git clone git@github.com:maxpou/gatsby-starter-morning-dew.git
$ cd gatsby-starter-morning-dew
$ yarn 
$ gatsby develop

Need help your your Gatsby development? Access the AppSeed platform for more information. Thank you!
Show Comments

Get the latest posts delivered right to your inbox.