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, Hasura, Firebase, 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:
Watch these videos it they cover the summary of all the main concepts:
Summary in English on Facebook Video
Summary in English on YouTube Video
Summary in Urdu on Facebook Video
Summary in Urdu on YouTube Video
Step 00 to 05 in English on Facebook Video
Step 00 to 05 in English on YouTube Video
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.
Your Guide to Modern Cloud-Based Application Development
The rise of 'modern applications': Why you need them
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?
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
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
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
Alternatives to Netlify for deploying Fullstack Serverless apps and websites:
Serverless
Why serverless is the future of software and apps
The impact of serverless on the future of cloud technology
Serverless Architecture – The Future of Cloud Computing
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
Serverless FaunaDB
FaunaDB Closes $27M Series A, Welcomes New Leadership
The Effortless Backend for Jamstack Applications with GraphQL
Alternatives are MongoDB, Amazon DynamoDB, and Google Firestore
GraphQL Services
Hasura Raises $25M in Series B Funding
Enterprise startup Hasura grabs $25 million in a round led by Lightspeed Venture Partners
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
Alternatives to Hasura:
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
Serverless 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.
What is Next for Web App Technologies