/jamstack-serverless

Learn JAMstack Serverless Modern App Development in Baby Steps using Gatsby.js, React, TypeScript, GraphQL, Contentful, Netlify, FaunaDB, MongoDB, Apollo, Github Actions, Project Fugu, and CSS Houdini.

Primary LanguageJavaScriptMIT LicenseMIT

Learn JAMstack Serverless in Baby Steps

Here we will learn to develop blazingly fast and scalable modern websites and apps using JAMstack, GraphQL and Serverless technologies.

In this repo we will learn how to develop JAMstack Serverless Websites and Apps using React, Gatsby.js, Contentful, Serverless Functions, Netlify, FaunaDB, Apollo, and GitHub Actions.

If you don't have web programming background or don't know React we suggest you start from this app development foundation bootcamp.

Before starting the steps we suggest reading the following articles which cover the concepts, technologies, architecture and companies behind modern fullstack websites and apps:

Class Videos

Summary in English on Facebook Video

Summary in English on YouTube Video

Summary in Urdu on Facebook Video

Summary in Urdu on YouTube Video

Steps 00 to 05 in English on Facebook Video

Steps 00 to 05 in English on YouTube Video

Steps 00 to 05 in Urdu on Facebook Video

Steps 00 to 05 in Urdu on YouTube Video

Steps 06 to 08 in English on Facebook

Steps 06 to 08 in English on YouTube

Steps 06 to 08 in Urdu on Facebook

Steps 06 to 08 in Urdu on YouTube

Steps 09 to 12 and 24 in English on Facebook

Steps 09 to 12 and 24 in English on YouTube

Steps 09 to 12 in Urdu on Facebook

Steps 09 to 12 in Urdu on YouTube

Steps 13 to 17 in English on Facebook

Steps 13 to 17 in English on YouTube

Steps 13 to 17 in Urdu on Facebook

Steps 13 to 17 in Urdu on YouTube

Steps 18 and 19 in English on Facebook

Steps 18 and 19 in English on YouTube

Steps 18 and 19 in Urdu on Facebook

Steps 18 and 19 in Urdu on YouTube

Steps 20, 21, and 22 in English on Facebook

Steps 20, 21, and 22 in English on YouTube

Steps 20, 21, and 22 in Urdu on Facebook

Steps 20, 21, and 22 in Urdu on YouTube

Steps 22 onwards in English on Facebook

Steps 22 onwards in English on YouTube

Steps 22 onwards in Urdu on Facebook

Steps 22 onwards in Urdu on YouTube

Project C Todo App in English on Facebook

Project C Todo App in English on YouTube

Project C Todo App in Urdu on Facebook

Project C Todo App in Urdu on YouTube

Project C Todo App by Adil

Project D in English on Facebook

Project D in English on YouTube

Project D Bookmark App by Daniyal

Project D Bookmark App in Urdu on Facebook

Project D in Bookmark App in Urdu on YouTube

Project E Virtual Lolly App in English on Facebook

Project E Virtual Lolly App in English on YouTube

Zeeshan's Project E Virtual Lolly App Code Repo

Project E Virtual Lolly App in Urdu on Facebook

Project E Virtual Lolly App in Urdu on YouTube

Modern Applications

Modern applications are built with a combination of modular architecture patterns like micro services (instead of monolithic) and components, serverless operational models, event driven architecture, data stored in modern globally distributed databases, services connected with GraphQL Query and realtime subscription APIs, and agile developer processes that allow organizations to innovate faster while reducing risk, time to market, and total cost of ownership. Modern web apps include Single Page App (SPA) frameworks (for example, React, Angular, or Vue) and static-site generators (SSGs) (for example, Gatsby, Next, Hugo, or Jekyll). These applications do content management typically using headless CMS's. Modern applications also extensively use the power of automation with continuous integration and continuous delivery.

Read Chapter 1 of this JAMstack book

AWS Modern Applications

FAQ

Your Guide to Modern Cloud-Based Application Development

The rise of 'modern applications': Why you need them

ooooops I guess we’re* full-stack developers now

SSG vs SSR vs CSR

If you build everything as a Single Page App (SPA) using React (Using Create React App) this will be the result: Stop using React. Please do read the comments in the article.

Server Side Rendering vs Static Site Generation

Next.js vs. GatsbyJS: A developer’s perspective

Which To Choose in 2020: NextJS or Gatsby?

What is the point of SSR these days?

Hey Next.js, Is Server Side Rendering Dead?

Static is the new Dynamic

Latest Next.js has SSG

Gatsby won against Next.js in this head-to-head

Even Next.js 9.3+ recommends SSG when possible, only use SSR when absolutely necessary

Next.js vs. Gatsby vs. Create React App

Therefore we will be using Gatsby for JSMstack to do SSG with CSR when required. You cannot implement SSR with Gatsby, but in our opinion SSR is not Jamstack-y anyway.

JAMstack

Introducing the JAMstack

Matt Mullenweg and Jamstack Community Square Off, Making Long-Term Bets on the Predominant Architecture for the Web

Client-serverless is the 4th generation application model.

Jamstack brings front-end development back into focus

The state of the Jamstack in 2020

The JAMStack and the startups building it

JAMstack

JAMstack Best Practices

Static First: Pre-Generated JAMstack Sites with Serverless Rendering as a Fallback

Celebrating 1 million developers: What’s next for Netlify and the Jamstack

New to JAMstack? Everything You Need to Know to Get Started

WordPress Co-Founder Matt Mullenweg Is Not a Fan of JAMstack

The Rise of Full Stack Serverless at Amazon Web Services

Extending JAMstack: 10 APIs and Tools to check out in 2020

Gatsby.js

Gatsby Raises $28M in Series B Funding to Become the Way the Web is Built

Gatsby for blazing fast Websites and Apps

Gatsby JS stands on the shoulders of thousands

Turn Your Gatsby Site into a Progressive Web App

Making Gatsby a PWA: Service Worker and Web App Manifest

Contentful (Headless CMS)

Contentful raises $80M Series E round for its headless CMS

Contentful: The content platform for the digital-first era

Headless, decoupled and Contentful: A non-technical explanation for the confused

Netlify

Netlify nabs $53M Series C as microservices approach to web development grows

About Netlify

Netlify Edge

Introducing Edge Handlers

Alternatives to Netlify for deploying Fullstack Serverless apps and websites:

AWS Amplify

Google Firebase

Vercel

Azure Static Web Apps

Serverless

Why serverless is the future of software and apps

The impact of serverless on the future of cloud technology

Microservices guru says think serverless, not Kubernetes: You don't want to manage 'a towering edifice of stuff'

Serverless Architecture – The Future of Cloud Computing

From Frontend to Fullstack!

The Rise of Full Stack Serverless at Amazon Web Services

Chapter 1 of Full Stack Serverless

What is serverless? Serverless computing explained

Future of Serverless Architecture

AWS Lambda Serverless Functions by Netlify

Read Summary and Predictions of the paper on Cloud Programming Simplified: A Berkeley View on Serverless Computing

Serverless FaunaDB

FaunaDB Closes $27M Series A, Welcomes New Leadership

Serverless FaunaDB

The Effortless Backend for Jamstack Applications with GraphQL

Alternatives are MongoDB, Amazon DynamoDB, and Google Firestore

GraphQL Services

When and why to use GraphQL

Apollo Server Lambda

Alternatives to Apollo:

Hasura Raises $25M in Series B Funding

Enterprise startup Hasura grabs $25 million in a round led by Lightspeed Venture Partners

Hasura Website

Approaches to add dynamic content to statically generated sites (JAMStack)

Dynamic JAMStack with Gatsby and Hasura GraphQL

Building a realtime chat app with GraphQL Subscriptions

Hasura is ideal for building realtime GraphQL subscriptions

Ramblings: Firebase vs Appsync vs Hasura

AWS AppSync Video

AWS AppSync is a serverless GraphQL service

Why Serverless GraphQL Is Better with AWS AppSync

Building a serverless real-time chat application with AWS AppSync

Comparing Tools For GraphQL Schema Stitching: Hasura vs. Apollo

Next.js

Next.js creator, Vercel, Raises $21 Million with Series A Funding

How Next.js can help improve SEO

Learn Next.js

Serverless Authentication

Firebase Authentication

It is a totally free serverless authentication service. Alternative is AWS Cognito.

CI/CD

You can connect Netlify directly to GitHub Repos. But GitHub actions is also a good choice for CI/CD.

GitHub Actions

What is Next for Web App Technologies

An Overview of WebAssembly

Project Fugu by Google, Microsoft, Intel, and Samsung

A Practical Overview Of CSS Houdini

Learning Projects:

Bootcamp 2020 Project A: Build a Blog site in Gatsby.js and Contentful with TypeScript and Deploy on Netlify

This Tutorial will help you in building the Blog site

Demo of Blog site we want to build

Tutorial

Watch Video: Episode 1

Watch Video: Episode 2

Watch Video: Episode 3

Watch Video: Episode 4

Watch Video: Episode 5

Watch Video: Episode 6

We want GitHub Actions workflow that builds a static blog site and deploys on Surge. Our content is hosted on Contentful. We would like to rebuild my static site on a normal repository push event, and also via the Contentful webhook whenever our content is updated. Reference 1 Reference 2

Important Challenge Requirement: We want you to build this blog site with gated content, available only for logged-in users. However we still want the blogs to be indexed for SEO reasons, and would like visitors (not logged in) have access to 3 free blogs (just like Medium), after that we want to user to get a "limited" access to each page (maybe 20 lines or so), just like news website sometimes do. The logged-in users will have unlimited access to all the blogs. We will use Firebase authentication for user logins.

Bootcamp 2020 Project B: Building Serverless CRUD apps with Netlify Functions and FaunaDB

Project Article

Updated Code Repo

Bootcamp 2020 Project C: Building a Serverless JAMStack Todo app with Netlify, Gatsby, GraphQL, and FaunaDB

Project Videos

Bootcamp 2020 Project D: Create A Bookmarking Application With FaunaDB, Netlify And Gatsby

Project Article

Note: In the above article the project is done using 11ty however you are required to do it in Gatsby.js with TypeScript

Bootcamp 2020 Project E: Virtual Lolly using Gatsby, Netlify, FaunaDB, Formik, and Storybook 6

Project Article

Project Repo

Project Demo

Visual Testing with Storybook in Gatsby

Forms with Formik — Gatsby — Netlify

Note: In the above article the project is done using 11ty however you are required to do it in Gatsby.js with TypeScript. For developing the form you are required to use Formik. For developing the React Components you will use Storybook 6.

Bootcamp 2020 Extra Project F: Build a Macro Compliance Tracker in Next and MongoDB Atlas with TypeScript and Deploy on Vercel

Building Modern Applications with Next.js and MongoDB