Update tech_docs/gatsby_project.md

2024-06-01 08:57:11 +00:00
parent e5a2eec545
commit b6e813b53d
1 changed files with 323 additions and 1 deletions
--- a/tech_docs/gatsby_project.md
+++ b/tech_docs/gatsby_project.md
@@ -542,3 +542,325 @@ Gatsby is a powerful and flexible SSG that is particularly well-suited for build
   - Participate in Gatsby forums and GitHub discussions for more in-depth help and insights.
 By following these steps and utilizing Gatsby's rich ecosystem, you'll be well on your way to building a modern, performant online storefront with all the necessary functionality.
 ---
 Absolutely! Moving to Gatsby for your storefront will provide a modern, performant, and scalable solution. Gatsby is a React-based framework that allows for static site generation, making it an excellent choice for building fast and SEO-friendly websites.
 ### Step-by-Step Guide to Reproducing Your Storefront with Gatsby
 #### Step 1: Set Up the Gatsby Project
 1. **Install Gatsby CLI (if not already installed):**
 ```bash
 npm install -g gatsby-cli
 ```
 2. **Create a new Gatsby site:**
 ```bash
 gatsby new gatsby-storefront
 cd gatsby-storefront
 ```
 #### Step 2: Set Up a Simple Backend with Express
 We'll use Express to serve the product data from an SQLite database.
 1. **Initialize a Node.js project and install dependencies:**
 ```bash
 mkdir backend
 cd backend
 npm init -y
 npm install express sqlite3 faker
 ```
 2. **Create a simple Express server:**
 **backend/index.js**
 ```javascript
 const express = require('express');
 const sqlite3 = require('sqlite3').verbose();
 const faker = require('faker');
 const app = express();
 const port = 5000;
 const db = new sqlite3.Database(':memory:');
 db.serialize(() => {
  db.run('CREATE TABLE products (id INTEGER PRIMARY KEY, name TEXT, description TEXT, price REAL)');
  const stmt = db.prepare('INSERT INTO products (name, description, price) VALUES (?, ?, ?)');
  for (let i = 0; i < 10; i++) {
    stmt.run(faker.commerce.productName(), faker.commerce.productDescription(), faker.commerce.price());
  }
  stmt.finalize();
 });
 app.get('/products', (req, res) => {
  db.all('SELECT * FROM products', [], (err, rows) => {
    if (err) {
      throw err;
    }
    res.json(rows);
  });
 });
 app.listen(port, () => {
  console.log(`Backend server running at http://localhost:${port}`);
 });
 ```
 3. **Run the Express server:**
 ```bash
 node index.js
 ```
 #### Step 3: Fetch Data from the Backend in Gatsby
 1. **Install necessary Gatsby plugins:**
 ```bash
 cd ../gatsby-storefront
 npm install gatsby-source-filesystem gatsby-transformer-json axios
 ```
 2. **Set up source plugin to fetch data from the Express server:**
 **gatsby-config.js**
 ```javascript
 module.exports = {
  siteMetadata: {
    title: `Melodi's Treasures`,
    description: `A comical store with fun treasures.`,
    author: `@melodi`,
  },
  plugins: [
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `data`,
        path: `${__dirname}/src/data/`,
      },
    },
    `gatsby-transformer-json`,
  ],
 };
 ```
 3. **Create a Gatsby node configuration to source data:**
 **gatsby-node.js**
 ```javascript
 const axios = require('axios');
 const fs = require('fs');
 const path = require('path');
 exports.onPreBootstrap = async ({ reporter }) => {
  const result = await axios.get('http://localhost:5000/products');
  if (result.data) {
    const dataPath = path.join(__dirname, 'src', 'data');
    if (!fs.existsSync(dataPath)) {
      fs.mkdirSync(dataPath);
    }
    fs.writeFileSync(path.join(dataPath, 'products.json'), JSON.stringify(result.data));
    reporter.info('Fetched product data and saved to products.json');
  }
 };
 ```
 #### Step 4: Create Pages and Components in Gatsby
 1. **Create a product list page:**
 **src/pages/index.js**
 ```jsx
 import React from 'react';
 import { graphql } from 'gatsby';
 import Layout from '../components/layout';
 const IndexPage = ({ data }) => (
  <Layout>
    <h1>Melodi's Treasures</h1>
    <div>
      {data.allProductsJson.nodes.map(product => (
        <div key={product.id} className="product">
          <h3>{product.name}</h3>
          <img src="https://via.placeholder.com/150" alt={product.name} />
          <p>{product.description}</p>
          <p>Price: ${product.price}</p>
        </div>
      ))}
    </div>
  </Layout>
 );
 export const query = graphql`
  {
    allProductsJson {
      nodes {
        id
        name
        description
        price
      }
    }
  }
 `;
 export default IndexPage;
 ```
 2. **Create a layout component:**
 **src/components/layout.js**
 ```jsx
 import React from 'react';
 import { Helmet } from 'react-helmet';
 import './layout.css';
 const Layout = ({ children }) => (
  <div>
    <Helmet>
      <title>Melodi's Treasures</title>
    </Helmet>
    <header>
      <h1>Melodi's Treasures</h1>
      <nav>
        <a href="/">Home</a>
      </nav>
    </header>
    <main>{children}</main>
    <footer>
      <p>&copy; 2024 Melodi's Treasures - Where every item is a treasure!</p>
    </footer>
  </div>
 );
 export default Layout;
 ```
 3. **Create CSS for layout and product styling:**
 **src/components/layout.css**
 ```css
 body {
  font-family: Comic Sans MS, cursive, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #121212;
  color: #e0e0e0;
 }
 header {
  background-color: #1f1f1f;
  color: white;
  padding: 1em;
  text-align: center;
 }
 header h1 {
  margin: 0;
  font-size: 2em;
  color: #ffeb3b;
 }
 nav {
  margin-top: 10px;
 }
 nav a {
  color: #ffeb3b;
  margin: 0 1em;
  text-decoration: none;
  font-weight: bold;
 }
 nav a:hover {
  text-decoration: underline;
 }
 main {
  padding: 1em;
 }
 h2 {
  text-align: center;
  color: #ffeb3b;
 }
 .product {
  border: 2px dashed #ffeb3b;
  padding: 1em;
  margin: 1em 0;
  background-color: #1f1f1f;
  display: flex;
  align-items: center;
  color: white;
 }
 .product img {
  margin-right: 1em;
  width: 150px;
  height: 150px;
 }
 footer {
  background-color: #1f1f1f;
  color: white;
  text-align: center;
  padding: 1em;
  position: fixed;
  bottom: 0;
  width: 100%;
  font-size: 0.9em;
 }
 ```
 ### Step 5: Run Gatsby Development Server
 1. **Start the backend server (if not already running):**
 ```bash
 cd backend
 node index.js
 ```
 2. **Start the Gatsby development server:**
 ```bash
 cd ../gatsby-storefront
 gatsby develop
 ```
 ### Step 6: Deploying the Gatsby Site
 For deployment, you can use platforms like Netlify, Vercel, or GitHub Pages. Gatsby provides easy deployment options for these platforms.
 #### Deploying with Netlify
 1. **Install Netlify CLI:**
 ```bash
 npm install -g netlify-cli
 ```
 2. **Deploy the site:**
 ```bash
 netlify deploy --prod
 ```
 ### Conclusion
 By moving to Gatsby, you take advantage of a modern framework that is optimized for performance and SEO. This approach separates the backend and frontend, allowing you to scale each independently. The static site generation capability of Gatsby ensures fast load times and a better user experience. The backend setup with Express and SQLite provides a simple yet effective way to manage and serve product data. This setup is more suitable for production and can be easily extended to include more features and handle more complex scenarios.