Gatsby starter boilerplate

This Gatsby starter boilerplate provides a robust foundation for building blazing-fast React applications powered by Gatsby and Flotiq, a headless CMS. It's designed to help developers kickstart their projects quickly, offering a pre-configured environment with essential tools and libraries.

Key Features:

• Flotiq Integration: Seamlessly connects with Flotiq as a headless CMS for efficient data storage and management. You can easily create and manage your content objects through the Flotiq editor.
• Tailwind CSS: Utilizes the utility-first CSS framework, Tailwind CSS, for rapid and flexible UI development, enabling highly customizable designs with minimal effort.
• Flotiq Source Plugin: Includes the dedicated gatsby-source-flotiq plugin, ensuring smooth data fetching from your Flotiq account into your Gatsby application's GraphQL layer.
• Flotiq Components for React: Leverages a library of React components specifically designed to work with Flotiq Content Objects, facilitating beautiful and consistent data display.
• Modern Development Stack: Built on Node.js (>=18.0.0) and Gatsby 5, ensuring compatibility with the latest web development standards and performance optimizations.

Use Cases: This boilerplate is ideal for developers looking to build:

• Static websites with dynamic content managed via a headless CMS.
• Blogs, portfolios, or marketing sites requiring fast load times and easy content updates.
• Any React-based application where content flexibility and developer experience are priorities.

Quick Start Guide:

1. Start the project from template using Flotiq CLI:

   npm install -g flotiq-cli
   flotiq start [projectName] https://github.com/flotiq/gatsby-starter-boilerplate.git [flotiqApiKey]

   Copy

   • flotiqApKey: Read and write API key to your Flotiq account.
   • projectName: Project name or project path (use . for the current directory).

2. Alternatively, start with Gatsby CLI:

   gatsby new gatsby-starter-boilerplate https://github.com/flotiq/gatsby-starter-boilerplate.git

   Copy

3. Configure application: Create a .env.development file in the root directory with:

   GATSBY_FLOTIQ_API_KEY=YOUR FLOTIQ API KEY
   GA_MEASUREMENT_ID=YOUR MEASUREMENT ID
   

4. Start developing: Navigate into your new site’s directory and run:

   cd gatsby-starter-boilerplate/
   gatsby develop

   Copy

   (Optional) To import example data:

   flotiq import .flotiq [flotiqApiKey]

   Copy

   Your site will be running at http://localhost:8000.

Deployment Options: The boilerplate offers straightforward deployment to popular platforms:

• Heroku: Deploy in 3 minutes using the provided Heroku button.
• Netlify: Deploy instantly with the Netlify button.
• Cloudflare Workers: Deploy to Cloudflare Workers (note: initial deployment uses Flotiq starter API key; update GitHub secrets for your own API key).

Project Structure (What's inside?): The project includes a well-organized directory structure:

• .flotiq: Contains content types necessary for the starter.
• .github: GitHub issues templates.
• node_modules: Project dependencies.
• src: Front-end code.
  • assets: Static assets (images, favicons, fonts).
  • pages: Static pages.
  • style: Global styles.
• .eslintignore, .eslintrc.js: ESLint configuration for consistent code formatting.
• .gitignore: Specifies files to be ignored by Git.
• .prettierignore, .prettierrc: Prettier configuration for code formatting.
• app.json: Heroku deployment configuration.
• gatsby-browser.js: Gatsby browser APIs customization.
• gatsby-config.js: Main Gatsby configuration (metadata, plugins).
• gatsby-node.js: Gatsby Node APIs for build process customizati...