ScandiPWA First Demo script and resources

README.md

Sequence

• Create an empty directory
• Create a CRA within that
• Copy in hv-taplist.json
• Add Chakra: https://chakra-ui.com/docs/getting-started
• Replace the App.js code
• yarn add @scandipwa/scandipwa-scripts
• Change build and start to scandipwa-scripts
• Add to package.json

  "scandipwa": {
    "type": "theme",
    "extensions": {
    }
  },

• Create a new folder called extension
• yarn init
• Turn the parent directory into a monorepo
• link extension to the CRA app
• Add "extension": true to the "scandipwa" section in the package.json
• Create a src/plugins directory with an extension.plugin.js file with export default {}
• Add namespaces to the CRA app /** @namespace growlers/Header */
• Create a Dockerfile
• Add run.sh
• Chmod 755 run.sh
• Run docker:build in the root directory
• Run '../run.sh' in extension
• Copy extension to bigfoot and make changes
• Run '../run.sh' in bigfoot

App.js

import { Component } from "react";
import {
  ChakraProvider,
  Heading,
  Box,
  Text,
  Grid,
  Image,
} from "@chakra-ui/react";

import beverages from "./hv-taplist.json";

export const Header = () => (
  <Heading as="h2" size="xl">
    Default Header
  </Heading>
);

export const Footer = () => (
  <Heading as="h2" size="xl">
    Default Footer
  </Heading>
);

export const filter = (list) => list.slice(0, 10);

class TapList extends Component {
  renderAddToCart() {
    return null;
  }

  render() {
    return (
      <div>
        {filter(beverages).map((bev, index) => (
          <Grid templateColumns="1fr 10fr" p="2" key={index}>
            <Image src={bev.logo} alt="Beverage logo" />
            <Box p="2">
              <Text size="2xl">
                <strong>{bev.producerName}</strong>: {bev.beverageName}
              </Text>
              {this.renderAddToCart(bev)}
            </Box>
          </Grid>
        ))}
      </div>
    );
  }
}

function App() {
  return (
    <ChakraProvider>
      <Box width="6xl" margin="auto">
        <Header />
        <TapList />
        <Footer />
      </Box>
    </ChakraProvider>
  );
}

export default App;

Dockerfile

FROM node:12
WORKDIR /usr/src/app
COPY . .

RUN yarn
WORKDIR /usr/src/app/growlers
EXPOSE 3000
CMD [ "yarn", "start" ]

extension.js

import { Button, Heading } from "@chakra-ui/react";

export default {
  "growlers/filter": {
    function: (beverages) => {
      return beverages[0]
        .filter(({ producerName }) => producerName === "Boneyard")
        .slice(0, 5);
    },
  },
  "growlers/Header": {
    function: () => (
      <Heading as="h2" size="xl">
        Happy Value Growlers Header
      </Heading>
    ),
  },
  "growlers/TapList": {
    "member-function": {
      renderAddToCart: () => <Button colorScheme="orange">Add To Cart</Button>,
    },
  },
};

run.sh

docker run -p 3000:3000 \
  -i \
  --mount type=bind,source="$(pwd)"/.,target=/usr/src/app/extension \
  -t growlers