# Quick Start Guide

Following this guide you will deploy a fully functional eCommerce PWA using Nacelle and our preferred configuation stack of Shopify (opens new window) for product management, Contentful (opens new window) as a headless CMS, NuxtJS (opens new window) powering the frontend application, and Vercel (opens new window) for hosting.

# 1. Setup Shopify

Shopify is the easiest eCommerce platform to get running with Nacelle, and only requires minimal setup within the Shopify dashboard.

# Create a Private App

A private app is necessary for Nacelle to communicate with your Shopify store. Create the private app by clicking on "Apps" in your dashboard and then clicking the link at the bottom for "Manage private apps"

Click the button for "Create new private app".

Give your app any name you would like, such as "Nacelle", and add your email address.

For Admin API permissions, give "Read Access" to "Products, variants and collections".

Under the section for Storefront API permissions, check all the boxes.

# Add Catalogue to Private App

The private app needs access to products in your store. This can be done on a product's admin page under "Product availability" and checking the box for your new private app. Or you can also do it in bulk by following the directions in Shopify's docs here. (opens new window)

# 2. Setup Contentful

Contentful is a headless CMS that makes editing your content easy. In Contentful you can define your content models, which determine what fields different content uses, such as a title or featured image for an article content type. Nacelle has a predefined schema for Contentful that you can import into a Contentful space using Contentful's CLI. Our schema is configured to make it easy to import your Contentful data into Nacelle.

# Create a Space

Log in or sign in to Contentful and create a new space.

# Download Contentful CLI

Download and install the Contentful CLI using NPM. Alternative installation methods can be found in Contentful docs. (opens new window)

npm install -g contentful-cli

After installation, log in to your account with the following command and complete the guided steps.

contentful login

Once your have authenticated you can configure the CLI to use your new space.

# Display a list of spaces and space IDs
contentful space list

# Select a space to use
contentful space use --space-id <spaceId>

# Import Schema

You are now ready to import our Contentful content model schema. Download the JSON file for the schema here (opens new window).

Import the schema with the following command

contentful space import --content-file [path to downloaded nacelle-contentful-config.json]

# Add Content

With the schema imported you can now start creating some content. Add a homepage by navigating in the Contentful dashboard to "Content". Click the button for "Add Entry" and select "Page" from the dropdown.

Give the new entry a title of "Homepage" and set the handle to "homepage". In the field for "Sections" you can add some section blocks, such as a Hero banner or testimonials using our preset content types. You can also add custom content section types, however, this requires custom components in the Nuxt project.

# 3. Create a Nacelle Space

With Shopify and Contentful configured, you can now create a new Nacelle space which will index all of your data. Log in or sign up in the Nacelle Dashboard at http://dashboard.getnacelle.com (opens new window).

After logging in, click the button for "View Spaces" and then "Create Space" on the next page to start the new space creation walkthrough. You will be entering information from the Shopify private app and Contentful space you just created.

Follow the walkthrough steps, first setting a name and the domain where you're space will be hosted. (You can also set the domain to something like "example.com", if you don't have a domain ready.)

# Enter Shopify Settings

On the next step for Product Connector select "I will use Nacelle's Shopify connector" and click "Continue".

Enter you Shopify store's Storefront API GraphQL endpoint. That url will look like this:

https://<shopify-store-subdomain-name>.myshopify.com/api/graphql.json

In the field for "GraphQL Token", copy and paste the "Storefront access token" which can be found at the bottom of your Shopify private app's settings page.

# Webhooks

Next you will be asked if you want to auto sync updates from Shopify to Nacelle using webhooks. This is an optional step which requires extra configuration in your Shopify admin. Documentation on how to configure Shopify webhooks can be found in our docs here.

# Save and Sync

With all your settings added you can click the button for "Index products". This will start the process of importing product and collection data from Shopify into Nacelle. Continue after it completes.

# Contentful Settings

On the Content Connector step, select "I will use Nacelle's Contentful connector" from the dropdown, and click "Continue".

You will need to enter your Contentful space's ID and an access token that you will create in the Contentful admin.

In the Contentful admin dashboard go to Settings > API Keys. On that page you will probably see "Example Key 1" which Contentful creates for you automatically. You can use this key or you can create a new one if you would like. Open the settings for the API key. There you will find you Contentful space ID, which you can copy and paste into the Nacelle Contentful setup. Also copy the Content Delivery API - access token and paste it into the "Access Token field" in the Nacelle space setup.

The "Environment" field can remain as "master". This is the default environment for a Contentful space and most likely you will not need to ever change this. You can read more about Contentful and how to manage multiple environments in their documentation (opens new window).

Once you have entered in all the fields, click the button for "Index Content" to start importing you Contentful data into Nacelle. When it has completed, click "Continue".

# Webhooks

To set up webhooks for your contentful content, follow the guide here.

# Checkout Settings

Select "Shopify" from the "Source" dropdown. The GraphQL endpoint and token fields will be automatically copied from the Shopify settings you previously entered. Click "Continue".

Setting a build hook url is optional and after clicking "Continue" again your new space configuration is complete and you can continue to your space settings page.

Note: Before going live and if the source is Shopify, make sure this setting's GraphQL Endpoint uses the checkout subdomain in order to prevent cross origin issues with checkout.

# 4. Create a Nuxt App

With all your Nacelle settings configured, open up your terminal again. Navigate to a directory where you want to build your project and run:

npx @nacelle/[email protected] your-project-name

This command will start building our Nacelle Nuxt Starter template. When prompted enter your Nacelle space ID and token, which can be found at the top of your space settings page in the dashboard.

# 5. Deploy to Vercel

Your new Nacelle PWA is ready for deployment. Push to your repo, connect it to your Vercel account (opens new window), add your environment variables and you'll be live in minutes!

# Checklist

Review this checklist to make sure you have completed all the steps to get your Nacelle site up and running with Shopify, Contentful, Nuxt, and Vercel.

  • Create private app in Shopify
  • Make products available to private app
  • Create a Contentful space
  • Import Nacelle Contentful schema using Contentful CLI
  • Add content to Contentful
  • Create a new Nacelle space with Shopify private app and Contentful space API key settings
  • Install Nacelle Nuxt Starter project
  • Push project to Git repo and deploy on Vercel

# Next Steps

Learn more about configuring space settings in the admin dashboard.

Read more about extending and customizing your new space in the Nuxt Starter docs.