# Quick Start Guide

Following this guide you will deploy a fully functional eCommerce PWA using Nacelle and our preferred configuation stack of Shopify for product management, Contentful as a headless CMS, NuxtJS powering the frontend application, and Netlify 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.

# 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.

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.

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.

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.

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".

# 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.

# 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 Netlify

Your new Nacelle PWA is ready for deployment. Generate a new build locally to deploy to Netlify.

# Navigate to your Nacelle Nuxt project
cd your-project-name

# Run build command
npm run generate

Once the build is complete, sign up or log in to Netlify. On the site's tab, drag the /dist folder from your Nacelle project into the page. That will start uploading your PWA to Netlify.

TIP

You can also configure Netlify to build and deploy from Git. To learn more, see our deployment docs.

When uploading is complete navigate to your new eCommerce PWA powered by Nacelle!

# 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 Netlify.

  • 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
  • Generate project and deploy to Netlify

# 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.