Create and Deploy a Crystallize E-commerce Site with ZEIT Now

How to launch an e-commerce site using Next.js and Crystallize on ZEIT Now in minutes.

Crystallize is a super-fast GraphQL based headless e-commerce service with super structured product information management.

In this guide, you will discover how to create a Crystallize e-commerce site, that uses Stripe to process payments, and deploy it with ZEIT Now.

A screenshot of the example app you will create with this guide.

Step 1: Creating Your API Keys

Create a Crystallize account. From the Crystallize dashboard, open the menu and select Settings then Access tokens.

Enter a name and create your token, you will be provided with both an access-token-id and an access-token-secret. You will not be shown these again, so keep the window open until you have used them in Step 2.

If you do not already have one, create a Stripe account. From the Stripe dashboard, locate your API keys from the Developers link, you will need both the Publishable and Secret keys.

Once both sets of keys are available, you can move on to creating your Crystallize project.

Step 2: Set Up Your Crystallize Project

Set up a Crystallize project with npx and move into the project directory:

npx @crystallize/cli my-crystallize-project && cd my-crystallize-project

Initializing a Crystallize project with npx and moving into the project directory.

During the setup, you will be asked a series of questions that will customize the output. Select the following options:

  • Teddy bear shop
  • Next.js + React
  • Both ZEIT Now and a payment method
  • Stripe
  • Configure tokens and API keys now
Note: To select Stripe, navigate using the arrow keys and use the spacebar to select before pressing enter to confirm.

Once you have selected these options, you will be asked to enter the API keys obtained in Step 1. Enter the information requested, after this has been completed, you no longer need to access the keys directly from either Crystallize or Stripe.

Step 3: Adding Your API Keys as Now Secrets

Using Now CLI, create Now Secrets to securely store the API keys received. You can find these in the .env file created by the project setup in Step 2.

now secrets add CRYSTALLIZE-ACCESS-TOKEN-ID [your-crystallize-access-token-id]

Adding the crystallize-access-token-id as a Now Secret.

now secrets add CRYSTALLIZE-ACCESS-TOKEN-SECRET [your-crystallize-access-token-secret]

Adding the crystallize-access-token-secret as a Now Secret.

now secrets add STRIPE-PUBLISHABLE-KEY [your-stripe-publishable-key]

Adding the stripe-publishable-key as a Now Secret.

now secrets add STRIPE-SECRET-KEY [your-stripe-publishable-key]

Adding the stripe-secret-key as a Now Secret.

Step 4: Deploying Your Crystallize Site with ZEIT Now

With a Crystallize site set up, it is ready to deploy live with Now.

Using Now CLI, deploy your e-commerce store with a single command:

now

Deploying your Crystallize site with Now CLI.

If you want to deploy your Crystallize project when you push to a Git repository, you can use either Now for GitHub, Now for GitLab, or Now for Bitbucket to have your project automatically deployed on every push, and the production domain updated on push to master.



Written By
Written by msweeneydevmsweeneydev
on November 15th 2019