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:
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 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 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
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
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.
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 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 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 nabs $53M Series C as microservices approach to web development grows
Alternatives to Netlify for deploying Fullstack Serverless apps and websites:
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
FaunaDB Closes $27M Series A, Welcomes New Leadership
The Effortless Backend for Jamstack Applications with GraphQL
Alternatives are MongoDB, Amazon DynamoDB, and Google Firestore
Alternatives to Apollo:
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
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 creator, Vercel, Raises $21 Million with Series A Funding
How Next.js can help improve SEO
It is a totally free serverless authentication service. Alternative is AWS Cognito.
You can connect Netlify directly to GitHub Repos. But GitHub actions is also a good choice for CI/CD.
Project Fugu by Google, Microsoft, Intel, and Samsung
A Practical Overview Of CSS Houdini
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
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 C: Building a Serverless JAMStack Todo app with Netlify, Gatsby, GraphQL, and FaunaDB
Note: In the above article the project is done using 11ty however you are required to do it in Gatsby.js with TypeScript
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.