Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.
Awesome Lists | Featured Topics | Projects
https://github.com/panacloud-modern-global-apps/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.
https://github.com/panacloud-modern-global-apps/jamstack-serverless
apollo-server contentful faunadb gatsby github-actions graphql jamstack mongodb-atlas netlify netlify-functions react serverless
Last synced: 22 days ago
JSON representation
Host: GitHub
URL: https://github.com/panacloud-modern-global-apps/jamstack-serverless
Owner: panacloud-modern-global-apps
License: mit
Created: 2020-08-07T06:32:11.000Z (about 4 years ago)
Default Branch: master
Last Pushed: 2020-10-26T07:14:38.000Z (about 4 years ago)
Last Synced: 2024-10-01T03:24:06.673Z (about 1 month ago)
Topics: apollo-server, contentful, faunadb, gatsby, github-actions, graphql, jamstack, mongodb-atlas, netlify, netlify-functions, react, serverless
Language: JavaScript
Homepage:
Size: 1.3 MB
Stars: 193
Watchers: 19
Forks: 58
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project

README

        # 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](https://panacloud.github.io/bootcamp-2020/).

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](https://www.facebook.com/zeeshanhanif/videos/10224537825818010/)

[Summary in English on YouTube Video](https://www.youtube.com/watch?v=deNpUAzAEH0)

[Summary in Urdu on Facebook Video](https://www.facebook.com/zeeshanhanif/videos/10224546245988509/)

[Summary in Urdu on YouTube Video](https://www.youtube.com/watch?v=sP2Amlw44fk)

[Steps 00 to 05 in English on Facebook Video](https://www.facebook.com/zeeshanhanif/videos/10224565563991447/)

[Steps 00 to 05 in English on YouTube Video](https://www.youtube.com/watch?v=UP3-m4QigN4)

[Steps 00 to 05 in Urdu on Facebook Video](https://www.facebook.com/zeeshanhanif/videos/10224572927375527)

[Steps 00 to 05 in Urdu on YouTube Video](https://www.youtube.com/watch?v=r-G-i5spHGg)

[Steps 06 to 08 in English on Facebook](https://www.facebook.com/zeeshanhanif/videos/10224601577451761/)

[Steps 06 to 08 in English on YouTube](https://www.youtube.com/watch?v=21dnsmxRRYM)

[Steps 06 to 08 in Urdu on Facebook](https://www.facebook.com/zeeshanhanif/videos/10224605671834118)

[Steps 06 to 08 in Urdu on YouTube](https://www.youtube.com/watch?v=rdcqnWJK2Mk)

[Steps 09 to 12 and 24 in English on Facebook](https://www.facebook.com/zeeshanhanif/videos/10224621671314095/)

[Steps 09 to 12 and 24 in English on YouTube](https://www.youtube.com/watch?v=5bjdsQ95Z44)

[Steps 09 to 12 in Urdu on Facebook](https://www.facebook.com/zeeshanhanif/videos/10224632582426866/)

[Steps 09 to 12 in Urdu on YouTube](https://www.youtube.com/watch?v=Q-QiqHBKQjQ)

[Steps 13 to 17 in English on Facebook](https://www.facebook.com/zeeshanhanif/videos/10224657363006365/)

[Steps 13 to 17 in English on YouTube](https://www.youtube.com/watch?v=8PxEZjYUKpc)

[Steps 13 to 17 in Urdu on Facebook](https://www.facebook.com/zeeshanhanif/videos/10224666332310592/)

[Steps 13 to 17 in Urdu on YouTube](https://www.youtube.com/watch?v=uMDyvor_k9k)

[Steps 18 and 19 in English on Facebook](https://www.facebook.com/zeeshanhanif/videos/10224681883899372/)

[Steps 18 and 19 in English on YouTube](https://www.youtube.com/watch?v=URXA_2HV61s)

[Steps 18 and 19 in Urdu on Facebook](https://www.facebook.com/zeeshanhanif/videos/10224690706039920/)

[Steps 18 and 19 in Urdu on YouTube](https://www.youtube.com/watch?v=ysEQiXY9ozM)

[Steps 20, 21, and 22 in English on Facebook](https://www.facebook.com/zeeshanhanif/videos/10224715900029754/)

[Steps 20, 21, and 22 in English on YouTube](https://www.youtube.com/watch?v=3B_vkzD0kRI)

[Steps 20, 21, and 22 in Urdu on Facebook](https://www.facebook.com/zeeshanhanif/videos/10224726664858868/)

[Steps 20, 21, and 22 in Urdu on YouTube](https://www.youtube.com/watch?v=2mb2IFVL4Jw)

[Steps 22 onwards in English on Facebook](https://www.facebook.com/zeeshanhanif/videos/10224741314065089/)

[Steps 22 onwards in English on YouTube](https://www.youtube.com/watch?v=ZXzxL4LDQs4)

[Steps 22 onwards in Urdu on Facebook](https://www.facebook.com/zeeshanhanif/videos/10224750968586446/)

[Steps 22 onwards in Urdu on YouTube](https://www.youtube.com/watch?v=tEpOHCrR9Z8)

[Project C Todo App in English on Facebook](https://www.facebook.com/zeeshanhanif/videos/10224773799597207/)

[Project C Todo App in English on YouTube](https://www.youtube.com/watch?v=jOmFJzafRb8)

[Project C Todo App  in Urdu on Facebook](https://www.facebook.com/zeeshanhanif/videos/10224784025892858/)

[Project C Todo App in Urdu on YouTube](https://www.youtube.com/watch?v=PUYydBwrgC0)

[Project C Todo App by Adil](https://github.com/adil-innovation-lab/JAMstackTodo)

[Project D in English on Facebook](https://www.facebook.com/zeeshanhanif/videos/10224799074469063/)

[Project D in English on YouTube](https://www.youtube.com/watch?v=FPH7NYrdBgY)

[Project D Bookmark App by Daniyal](https://github.com/daniyalnagori/bookmarking-app)

[Project D Bookmark App in Urdu on Facebook](https://www.facebook.com/zeeshanhanif/videos/10224807488559410/)

[Project D in Bookmark App in Urdu on YouTube](https://www.youtube.com/watch?v=fAQG0bN5h6s)

[Project E Virtual Lolly App in English on Facebook](https://www.facebook.com/zeeshanhanif/videos/10224830783101759/)

[Project E Virtual Lolly App in English on YouTube](https://www.youtube.com/watch?v=zlhY7bRYR1A)

[Zeeshan's Project E Virtual Lolly App Code Repo](https://github.com/zeeshanhanif/gatsby-virtual-lolly)

[Project E Virtual Lolly App  in Urdu on Facebook](https://www.facebook.com/zeeshanhanif/videos/10224839747005851/)

[Project E Virtual Lolly App in Urdu on YouTube](https://www.youtube.com/watch?v=CJ42Nw5Vksk)

### 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](https://www.apress.com/gp/book/9781484261767)

[AWS Modern Applications](https://aws.amazon.com/modern-apps/)

[FAQ](https://aws.amazon.com/modern-apps/faqs/)

[Your Guide to Modern Cloud-Based Application Development](https://relevant.software/blog/modern-cloud-based-application-development/)

[The rise of 'modern applications': Why you need them](https://searchcio.techtarget.com/feature/The-rise-of-modern-applications-Why-you-need-them)

[ooooops I guess we’re* full-stack developers now](https://css-tricks.com/ooooops-i-guess-were-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](https://dev.to/ender_minyard/why-you-should-stop-using-react-g7c). Please do read the comments in the article.

[Server Side Rendering vs Static Site Generation](https://dev.to/matfrana/server-side-rendering-vs-static-site-generation-17nf)

[Next.js vs. GatsbyJS: A developer’s perspective](https://blog.logrocket.com/next-js-vs-gatsbyjs-a-developers-perspective/)

[Which To Choose in 2020: NextJS or Gatsby?](https://medium.com/frontend-digest/which-to-choose-in-2020-nextjs-vs-gatsby-1aa7ca279d8a)

[What is the point of SSR these days?](https://github.com/vercel/next.js/discussions/10437)

[Hey Next.js, Is Server Side Rendering Dead?](https://arunoda.me/blog/hey-nextjs-is-server-side-rendering-dead)

[Static is the new Dynamic](https://rauchg.com/2020/2019-in-review#static-is-the-new-dynamic)

[Latest Next.js has SSG](https://nextjs.org/blog/next-9-5)

[Gatsby won against Next.js in this head-to-head](https://dev.to/notsidney/gatsby-won-against-next-js-in-this-head-to-head-37ka)

[Even Next.js 9.3+ recommends SSG when possible, only use SSR when absolutely necessary](https://nextjs.org/docs/basic-features/pages)

[Next.js vs. Gatsby vs. Create React App](https://leerob.io/blog/nextjs-gatsby-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](https://www.infoq.com/news/2020/04/introducing-jamstack/)

[Matt Mullenweg and Jamstack Community Square Off, Making Long-Term Bets on the Predominant Architecture for the Web](https://wptavern.com/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](https://www.infoworld.com/article/3564264/client-serverless-is-the-4th-generation-application-model.html).

[Jamstack brings front-end development back into focus](https://sdtimes.com/webdev/jamstack-brings-front-end-development-back-into-focus/)

[The state of the Jamstack in 2020](https://sdtimes.com/webdev/the-state-of-the-jamstack-in-2020/)

[The JAMStack and the startups building it](https://technically.dev/posts/the-jamstack-and-the-startups-building-it)

[JAMstack](https://jamstack.org/)

[JAMstack Best Practices](https://jamstack.org/best-practices/)

[Static First: Pre-Generated JAMstack Sites with Serverless Rendering as a Fallback](https://css-tricks.com/static-first-pre-generated-jamstack-sites-with-serverless-rendering-as-a-fallback/)

[Celebrating 1 million developers: What’s next for Netlify and the Jamstack](https://www.netlify.com/blog/2020/08/03/celebrating-1-million-developers-whats-next-for-netlify-and-the-jamstack/)

[New to JAMstack? Everything You Need to Know to Get Started](https://snipcart.com/blog/jamstack)

[WordPress Co-Founder Matt Mullenweg Is Not a Fan of JAMstack](https://thenewstack.io/wordpress-co-founder-matt-mullenweg-is-not-a-fan-of-jamstack/)

[The Rise of Full Stack Serverless at Amazon Web Services](https://thenewstack.io/theres-a-service-for-that-amazon-web-services-and-serverless-computing/)

[Extending JAMstack: 10 APIs and Tools to check out in 2020](https://www.stackbit.com/blog/extending-jamstack-2020/)

### Gatsby.js

[Gatsby Raises $28M in Series B Funding to Become the Way the Web is Built](https://www.businesswire.com/news/home/20200527005268/en/Gatsby-Raises-28M-Series-Funding-Web-Built)

[Gatsby for blazing fast Websites and Apps](https://www.gatsbyjs.org/)

[Gatsby JS stands on the shoulders of thousands](https://www.infoworld.com/article/3540708/gatsby-js-stands-on-the-shoulders-of-thousands.html)

[Turn Your Gatsby Site into a Progressive Web App](https://www.gatsbyjs.org/blog/100days/pwa/) 

[Making Gatsby a PWA: Service Worker and Web App Manifest](https://www.digitalocean.com/community/tutorials/gatsbyjs-gatsby-pwa)

### Contentful (Headless CMS)

[Contentful raises $80M Series E round for its headless CMS](https://techcrunch.com/2020/06/17/contentful-raises-80m-series-e-round-for-its-headless-cms/)

[Contentful: The content platform for the digital-first era](https://www.contentful.com/)

[Headless, decoupled and Contentful: A non-technical explanation for the confused](https://www.contentful.com/blog/2019/02/04/difference-between-headless-decoupled-contentful/)

### Netlify

[Netlify nabs $53M Series C as microservices approach to web development grows](https://techcrunch.com/2020/03/04/netfily-nabs-53m-series-c-as-micro-services-approach-to-web-development-grows/)

[About Netlify](https://www.netlify.com/about/)

[Netlify Edge](https://www.netlify.com/products/edge/)

[Introducing Edge Handlers](https://www.netlify.com/blog/2020/05/27/introducing-edge-handlers-in-preview/)

Alternatives to Netlify for deploying Fullstack Serverless apps and websites:

[AWS Amplify](https://aws.amazon.com/amplify/)

[Google Firebase](https://firebase.google.com/)

[Vercel](https://vercel.com/)

[Azure Static Web Apps](https://azure.microsoft.com/en-us/services/app-service/static/)

### Serverless

[Why serverless is the future of software and apps](https://ttpsc.com/en/blog/why-serverless-is-the-future-of-software-and-apps/)

[The impact of serverless on the future of cloud technology](https://cio.economictimes.indiatimes.com/news/cloud-computing/the-impact-of-serverless-on-the-future-of-cloud-technology/77275273)

[Microservices guru says think serverless, not Kubernetes: You don't want to manage 'a towering edifice of stuff'](https://www.theregister.com/2020/09/22/microservices_talk_gotopia/)

[Serverless Architecture – The Future of Cloud Computing](https://www.fortunesoftit.com/serverless-the-future-of-cloud-computing/)

[From Frontend to Fullstack!](https://dev.to/fllstck/from-frontend-to-fullstack-2ah4)

[The Rise of Full Stack Serverless at Amazon Web Services](https://thenewstack.io/theres-a-service-for-that-amazon-web-services-and-serverless-computing/)

[Chapter 1 of Full Stack Serverless](https://learning.oreilly.com/library/view/full-stack-serverless/9781492059882/ch01.html)

[What is serverless? Serverless computing explained](https://www.infoworld.com/article/3406501/what-is-serverless-serverless-computing-explained.html)

[Future of Serverless Architecture](https://www.infoq.com/news/2020/07/future-serverless-architecture/)

[AWS Lambda Serverless Functions by Netlify](https://www.netlify.com/products/functions/)

[Read Summary and Predictions of the paper on Cloud Programming Simplified: A Berkeley View on Serverless Computing](https://www2.eecs.berkeley.edu/Pubs/TechRpts/2019/EECS-2019-3.pdf)

### Serverless FaunaDB

[FaunaDB Closes $27M Series A, Welcomes New Leadership](https://news.crunchbase.com/news/faunadb-closes-27m-series-a-welcomes-new-leadership/)

[Serverless FaunaDB](https://fauna.com/)

[The Effortless Backend for Jamstack Applications with GraphQL](https://www2.fauna.com/jamstack)

Alternatives are MongoDB, Amazon DynamoDB, and Google Firestore

### GraphQL Services

[When and why to use GraphQL](https://medium.com/@JeffLombardJr/when-and-why-to-use-graphql-24f6bce4839d)

[Apollo Server Lambda](https://www.apollographql.com/docs/apollo-server/deployment/lambda/)

Alternatives to Apollo:

[Hasura Raises $25M in Series B Funding](https://www.finsmes.com/2020/09/hasura-raises-25m-in-series-b-funding.html)

[Enterprise startup Hasura grabs $25 million in a round led by Lightspeed Venture Partners](https://thetechportal.com/2020/09/10/enterprise-startup-hasura-25-million-funding-round-lightspeed-venture-partners/)

[Hasura Website](https://hasura.io/)

[Approaches to add dynamic content to statically generated sites (JAMStack)](https://hasura.io/blog/approaches-to-add-dynamic-content-statically-generated-sites-jamstack/)

[Dynamic JAMStack with Gatsby and Hasura GraphQL](https://hasura.io/blog/dynamic-jamstack-with-gatsby-hasura-graphql/)

[Building a realtime chat app with GraphQL Subscriptions](https://dev.to/dabit3/building-chatt---a-real-time-multi-user-graphql-chat-app-3jik)

[Hasura is ideal for building realtime GraphQL subscriptions](https://hasura.io/learn/graphql/intro-graphql/graphql-subscriptions/)

[Ramblings: Firebase vs Appsync vs Hasura](https://www.youtube.com/watch?v=mvy79Q3eXsY)

[AWS AppSync Video](https://www.youtube.com/watch?v=Rz_wK6z8kMU)

[AWS AppSync is a serverless GraphQL service](https://www.serverless.com/aws-appsync)

[Why Serverless GraphQL Is Better with AWS AppSync](https://thenewstack.io/why-serverless-graphql-is-better-with-aws-appsync/)

[Building a serverless real-time chat application with AWS AppSync](https://aws.amazon.com/blogs/mobile/building-a-serverless-real-time-chat-application-with-aws-appsync/)

[Comparing Tools For GraphQL Schema Stitching: Hasura vs. Apollo](https://nordicapis.com/comparing-tools-for-graphql-schema-stitching-hasura-vs-apollo/)

### Next.js

[Next.js creator, Vercel, Raises $21 Million with Series A Funding](https://www.globenewswire.com/news-release/2020/04/21/2019124/0/en/Next-js-creator-Vercel-Raises-21-Million-with-Series-A-Funding-Led-by-Accel-to-Transform-Frontend-Experience-for-11-Million-Worldwide-JavaScript-Developers.html)

[How Next.js can help improve SEO](https://blog.logrocket.com/how-next-js-can-help-improve-seo/)

[Learn Next.js](https://nextjs.org/learn/basics/create-nextjs-app)

### Serverless Authentication

[Firebase Authentication](https://firebase.google.com/docs/auth)

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](https://github.com/features/actions)

### What is Next for Web App Technologies

[An Overview of WebAssembly](https://medium.com/swlh/an-overview-of-webassembly-4ce9bd98aae7)

[Project Fugu by Google, Microsoft, Intel, and Samsung](https://www.chromium.org/teams/web-capabilities-fugu)

[A Practical Overview Of CSS Houdini](https://www.smashingmagazine.com/2020/03/practical-overview-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](https://ibaslogic.com/blog/gatsby-with-contentful-cms/)

[Demo of Blog site we want to build](https://gatsby-contentful-blogsite.netlify.app/blog/)

[Tutorial](https://www.youtube.com/watch?v=fY3mBJSDA44)

[Watch Video: Episode 1](https://www.youtube.com/watch?v=fY3mBJSDA44)

[Watch Video: Episode 2](https://www.youtube.com/watch?v=IaNU4R3ck_k)

[Watch Video: Episode 3](https://www.youtube.com/watch?v=L9Uv_bLSaP4)

[Watch Video: Episode 4](https://www.youtube.com/watch?v=NkFz2psDupw)

[Watch Video: Episode 5](https://www.youtube.com/watch?v=A8Y1-GRmxFw)

[Watch Video: Episode 6](https://www.youtube.com/watch?v=ONg1gpx0zlA)

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](https://github.community/t/is-it-possible-to-trigger-a-single-workflow-in-github-actions-from-two-different-events/16120) [Reference 2](https://medium.com/@flawyte/zeit-now-github-action-contentful-webhook-6a697d2053cd)

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](https://firebase.google.com/docs/auth) for user logins. 

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

[Project Article](https://www.netlify.com/blog/2018/07/09/building-serverless-crud-apps-with-netlify-functions-faunadb/)

[Updated Code Repo](https://github.com/netlify/netlify-faunadb-example)

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

[Project Videos](https://egghead.io/playlists/building-a-serverless-jamstack-todo-app-with-netlify-gatsby-graphql-and-faunadb-53bb)

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

[Project Article](https://www.smashingmagazine.com/2019/10/bookmarking-application-faunadb-netlify-11ty/)

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](https://css-tricks.com/static-first-pre-generated-jamstack-sites-with-serverless-rendering-as-a-fallback/)

[Project Repo](https://github.com/philhawksworth/virtual-lolly)

[Project Demo](https://vlolly.net/)

[Visual Testing with Storybook in Gatsby](https://www.gatsbyjs.com/docs/visual-testing-with-storybook/)

[Forms with Formik — Gatsby — Netlify](https://medium.com/@thaotruong203/forms-with-formik-gatsby-netlify-11992b7ece99)

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](https://developer.mongodb.com/how-to/nextjs-building-modern-applications)