rodgrolop / galatea-web-react-graphql

Crystallize E-commerce

Crystallize Frontend Boilerplate

The bare minimum skeleton you need to get a frontend up and running on the headless ecommerce & GraphQL based product Information Management service Crystallize. React commerce with Next.js SSR.

This frontend boilerplate is a great starting point when building React ecommerce experiences with frontend performance in focus. You can have rich ecommerce content with the super structured PIM engine in Crystallize powering your product catalogue.

Fast frontend performance delivers a better ecommerce experience and is a key ingredient in the ecommerce SEO checklist. Rich content driven ecommerce experiences builds the foundation for a content strategy for exponential growth marketing.

Check it out, the boilerplate is Open Source and MIT licensed.

Getting Started

You can use Crystallize CLI to bootstrap a project with this Next.js + React boilerplate.

Simply run the following command (>= Node 8 required):

npx @crystallize/cli my-project

This will walk you through the steps of specifying your tenant, choosing the template (Next.js + React) and adding additional features such as ZEIT Now.

Once your project has been created, you can simply navigate into your project's directory and run the following to start up your development server:

npm run dev
# or
yarn dev

This will start up the server on http://localhost:3000 for development.

App Structure

components/

All your shared React components.

lib/

Library code to enable GraphQL and REST API communication and more

page-components/

We use the page-components/ directory to hold the actual component content related to entries in the pages/ directory. This is because we store our styled components in separate files to our default exported components, which causes some conflict with the way Next.js handles files in the pages/ directory.

pages/

Put all your entry pages here. These are interpreted as separate routes by Next.js.

pages/api/

All your ZEIT Now serverless functions. You can delete this folder if you are not using ZEIT Now.

server/

This is where the ultra-light frontend server lives. Its primary function is to render the React app in response to a request.

You can delete this folder if you intend to use ZEIT Now instead of a custom server.

static/

Static resources used by the web server.

ui/

UI related components live her. Color variables and simple shared components

Deploying Your Project

There are multiple alternatives for deployments, however for the easiest hosting of a Node application, one option is ZEIT Now.

Deploying with ZEIT Now

• Register a ZEIT Now account
• Run npm install --global now
• Navigate to your project folder
• Run now