Create Full Stack

Set up a TypeScript full stack with one command.

• Getting Started – How to create a new full stack.
• User Guide – How to develop apps bootstrapped with Create Full Stack.

Create Full Stack works on macOS, and Linux.
If something doesn’t work, please check troubleshooting or file an issue.

Looking for co-contributors. If this project interests you, email [email protected]

Choose your stack

Backend

• Apollo Server Express
• Hasura

Auth

• Auth0
• None

Cloud

• AWS/Pulumi
• None

Web

• React
• None

Mobile

• React Native
• None

CI/CD

• GitHub Actions
• None

Prerequisites

• Yarn >= v1.12.0
• Docker >= 1.25.5
• Node ^12.10 || 14.x
  • You can use n to switch Node versions

Check versions:

yarn --version
docker-compose --version
node --version

CFS support for npm will be added when npm v7 is stable, which contains the required workspaces feature.

Run

yarn create full-stack my-full-stack

Follow the instructions generated in my-full-stack/development.html to complete the setup. Then try spinning up the full stack locally.

cd my-full-stack
yarn start

Development URLs

yarn start brings up the development stack locally. The following URLs are available if the given services are selected.

• web: http://localhost:3000
  • If auth is enabled, this redirects to your Auth0 login page
• mobile (expo devtools): http://localhost:19002
• backend (hasura): http://localhost:8080/v1/graphql
  • If auth is enabled, expect an authorization error
• backend (apollo-server-express): http://localhost:8080/graphql
  • If auth is enabled, expect an authorization error

Setup VSCode (recommended IDE/Editor)

When opening the project in VSCode, click on the dialog to install recommended extensions which automatically:

• Format on save
• Lint on save
• Understand Dockerfiles
• Spellcheck

Why

As a Software Engineer at Google, I was impressed with the seamless integration of the various libraries and frameworks. When starting a new project, Google developers never start from scratch. They build on a stable foundation with guard rails in place.

Since leaving Google, I've been dismayed that this same type of foundation doesn't exist. It's natural to cobble together solutions following one-off blog posts. A developer's focus isn't - and shouldn't be - infra at an early stage, so hacky solutions tend to win. Unfortunately, as what you're building scales, maintaining these solutions can be a nightmare.

Goals

We want a stack that enables rapid iteration as requirements change without producing bugs. Ideally, it should scale in terms of traffic and developers without requiring costly re-writes.

To achieve this we chose components for the boilerplate that are:

1. A single language, eliminating developer context switching
2. Type-safe, eliminating a whole class of bugs
3. Tested at scale in production
4. Used by enough developers that solutions are easy to find

Sponsors

Home of innovative digital solutions that help organizations, teams and individuals achieve more through the power of technology.