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