This project is a JAMstack starter kit. Its goal is to provide a template for creating modern progressive web apps, using the following technologies:
- React for a declarative, component-based frontend architecture
- GraphQL for an intuitive, strongly-typed contract between the frontend and backend
- Netlify for static site deployments & previews (CI/CD directly integrated into GitHub)
- Netlify Functions for a serverless, on-demand API
- Netlify Dev for a unified local development experience that closely replicates your deployment environment
- Apollo Client for comprehensive state management with React, using GraphQL
- Apollo Server for a feature-rich GraphQL server that supports middleware, Federation, subscriptions, and more
- TypeScript for type safety, improved language features, and a single programming language shared between the frontend and backend
- graphql-code-generator for generating type definitions from the GraphQL schema(s) to be used in both the frontend and backend
Check out the deployed version of the web app at jamstackdemo.netlify.app or click the button below to check out the GraphQL Playground for the API.
Use the Deploy to Netlify button above to clone the repo on GitHub and automatically start building & deploying with your Netlify account (recommended method). You could also clone the repo manually instead, if you prefer.
Next, make sure you have the Netlify CLI installed globally
npm install -g netlify-cli
Once you have the project cloned, install the dependencies
npm install
Then start up the development server
npm start
This will start the Netlify Dev server with the Node.js inspector and allow you to attach to the instance to hit breakpoints in your lambda code (GraphQL resolvers). A VS Code launch configuration is provided in the project to skip the process of setting up debugging tools.
If you used the Deploy to Netlify button, you're all set. Any commits pushed to your main branch will automatically deploy using Netlify.
Deployment previews are a great way to test your changes in a deployed environment before you make them live.
See the Netlify Workflow for more details.
- Enable frontend debugging with webpack + chrome debug configurations