Vom csv-File zum
Online-Katalog in 30min

Auslöser

...und mehr auf der Liste

Ziel

simpel
wartungsarm bis -frei

Weg

Export einer csv-Datei aus der Warenwirtschaft
Erstellen statischer html-Seiten mit

Bauen wir einen Katalog

Gatsby installieren

> npm install -g gatsby-cli

neues Projekt anlegen

> gatsby new catfan-goodies

Development Server starten

> cd catfan-goodies
> gatsby develop

und Seite zum ersten Mal aufrufen:

http://localhost:8000

tailwindcss installieren

wie z.B. hier beschrieben
> npm install tailwindcss \ gatsby-plugin-postcss --save-dev
> ./node_modules/.bin/tailwind init

postcss.config.js im root-Verzeichnis erstellen:

module.exports = () => ({ 
	plugins: [require("tailwindcss")],
})

PostCSS plugin in der gatsby-config.js bekannt machen:
```
plugins: [`gatsby-plugin-postcss`],
```
In src/components/layout.css den gesamten css code durch folgendes ersetzen:
```
@tailwind base;

@tailwind components;
							
@tailwind utilities;
```

ungenutztes CSS entfernen mit:
npm i gatsby-plugin-purgecss

Plugin in gatsy-config.js nach allen css/postcss Plugins einfügen:

plugins: [ ...
{
  resolve: `gatsby-plugin-purgecss`,
    options: {
      printRejected: false,
      develop: false,
      tailwind: true,
},

Datenquelle

Datenverzeichnis für csv-Datei anlegen und Datei in
```
/src/data/
```
ablegen.
Transformer Plugin installieren:
> npm i --save gatsby-transformer-csv

csv File in gatsby-config.js bekannt machen:

{
resolve: `gatsby-source-filesystem`,
  options: {
	name: `data`,
	path: `${__dirname}/src/data`,
  },
},
{
resolve: `gatsby-transformer-csv`,
  options: {
    delimiter: [";"],
  },
},

graphQL Zauberei:

http://localhost:8000/__graphiql

allCatfanshopCsv enthält die Daten der catfanshop.csv und sie stehen zum Erzeugen der Seiten bereit.

Seiten generieren

Gatsby sagen welche Seiten wie generiert werden sollen in: gatsby-node.js

Beispielcode in gatsby.node.js für Detailseiten:

const path = require(`path`)

exports.createPages = async ({ graphql, actions }) => {     //  async (input) => { const graphql = input.graphql ...
  const { createPage } = actions  // const createPage = actions.createPage
								
  // Create Detailpages from CSV
  const resultPages = await graphql (`
    query {
      allCatfanshopCsv {
        nodes {
          Artikelnummer
          Bezeichnung
          Beschreibung
		  Bild {
            relativePath
          }
          Warengruppe
          Preis
        }      
      }
    } 
  `)
  resultPages.data.allCatfanshopCsv.nodes.forEach( node => {
    const category = node.Warengruppe.toLowerCase()
    createPage({
      // Path for this page — required    
      path: category +'/' + node.Artikelnummer + '/',
      component: path.resolve(`./src/templates/catalog-detailpage.js`),
      context: {
        ArtNr: node.Artikelnummer,
        name: node.Bezeichnung,
        image: node.Bild.relativePath,
        description: node.Beschreibung,
        group: node.Warengruppe,
        price: node.Preis
      }
    })
  })								
}

Templates

Template Verzeichnis anlegen:
```
/src/templates/
```
Template Datei(en) (catalog-detailpage.js, siehe gatsby-node.js) anlegen

catalog-detailpage.js


import React from "react"
import { graphql, Link } from "gatsby"
import Img from "gatsby-image"
import Layout from "../components/layout"
import SEO from "../components/seo"
								
export default ({ data, pageContext }) => {
    return (
        <Layout>
            <SEO title={ pageContext.name } description={ pageContext.description } />
            <div class="w-full">
                <div class="w-full">
                    <h1 className="text-3xl my-8">{ pageContext.name }</h1>
                </div>
                <div className="flex-none sm:flex w-full -mx-4">
                    <div className="m-4 w-full">
                        <Img 
                            fluid={data.bild.childImageSharp.fluid} 
                            alt={ "Produktbild " + pageContext.description }    
                        />
                    </div>
                    <div className="m-4 w-full">
                        <div>Artikelnr.: { pageContext.ArtNr }</div>
                        <div dangerouslySetInnerHTML={{__html: pageContext.description}} />
                        <div className="text-lg my-4">Preis: EUR {pageContext.price}</div>
                    </div>
                </div>    
            </div>
            <div className="my-8">
                <Link to="/" className="text-purple-800 underline hover:text-red-900">Home</Link>
            </div>
        </Layout>
    )
}
export const query = graphql`
    query($image: String!) {
        bild: file(relativePath: { eq: $image }) {
            childImageSharp {
                fluid(maxWidth: 800) {
                    ...GatsbyImageSharpFluid
                }
            }
        }
    }
`

Navigationskomponente

/src/components/navCategories.js


import React from "react"
import { useStaticQuery, graphql, Link } from "gatsby"
import "./layout.css"
							
const NavCategories = () => {
  const data = useStaticQuery(graphql`
    query {
      allCatfanshopCsv {
        distinct(field: Warengruppe)
      }
    }
  `)

  const categories = data.allCatfanshopCsv.distinct
  return (
    <div className="p-4">
      <div className="flex flex-wrap -mx-4">
        { categories.map((category) => (
          <div className="flex flex-wrap px-4 my-2 w-full sm:w-1/3 ">
            { <Link to={category.toLowerCase()} className="text-white bg-purple-800 hover:bg-purple-600 rounded p-4 m-auto" >{category}</Link> }
          </div>
        )) }
      </div>
    </div>
  )
}
							
export default NavCategories

<NavCategories /> in index.js einfügen.

Build & Deploy

Seiten lokal erzeugen und per (s)ftp/scp auf den Server laden:
- > gatsby build
- erstellte Seiten lokal ansehen:
  > gatsby serve
- ```
/public
```
  enthält erstellte Seiten, die auf den Server geladen werden können

automatisches Deployment mit https://github.com/ und https://www.netlify.com/ oder https://zeit.co/

automatisches Deployment mit https://github.com/ und https://www.deployhq.com/ per ftp/ftps, ssh/sftp auf den eigenen Webspace

automatisches Deployment

github Repository erstellen und Gatsby Projekt pushen
auf https://zeit.co/ mit github einloggen und zeit.co mit github verbinden
neues Projekt (From GitHub) erstellen (eventuell muss zeit.co noch Rechte auf GitHub eingeräumt werden)
zeit.co erstellt eine Subdomain, erzeugt die Seiten automatisch und stellt sie unter der Subdomain zur Verfügung

eigene 404-Fehler Seite auf zeit.co:

now.json anlegen:


{
  "routes": [
    { "handle": "filesystem" },
    { "src": "/.*", "status": 404, "dest": "/404" }
  ]
}

Wir brauchen doch einen Warenkorb:

o.ä.

lieber vue.js?
=>

Danke für die Aufmerksamkeit

Code auf GitHub: https://github.com/pointout/cas-gatsbyjs

Diese Folien: https://slides.pointout.at/gatsbyjs-online-katalog/

Vom csv-File zum Online-Katalog in 30min