From b6e813b53df3134fc048928f903fd4cc8af75bbb Mon Sep 17 00:00:00 2001 From: medusa Date: Sat, 1 Jun 2024 08:57:11 +0000 Subject: [PATCH] Update tech_docs/gatsby_project.md --- tech_docs/gatsby_project.md | 324 +++++++++++++++++++++++++++++++++++- 1 file changed, 323 insertions(+), 1 deletion(-) diff --git a/tech_docs/gatsby_project.md b/tech_docs/gatsby_project.md index 6cc9b0f..52b9b60 100644 --- a/tech_docs/gatsby_project.md +++ b/tech_docs/gatsby_project.md @@ -541,4 +541,326 @@ Gatsby is a powerful and flexible SSG that is particularly well-suited for build - Join Gatsby's [Discord community](https://gatsby.dev/discord) for support and collaboration. - 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. \ No newline at end of file +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 }) => ( + +

Melodi's Treasures

+
+ {data.allProductsJson.nodes.map(product => ( +
+

{product.name}

+ {product.name} +

{product.description}

+

Price: ${product.price}

+
+ ))} +
+ +); + +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 }) => ( +
+ + Melodi's Treasures + +
+

Melodi's Treasures

+ +
+
{children}
+ +
+); + +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. \ No newline at end of file