The project is hosted in a public GitHub repository at https://github.com/FosterCommerce/headless-craft-commerce.git
Later on we will be deploying the site to The Cloud using Vercel. In order to do this, you will need to host the code in your own repository using GitHub, GitLab, or Bitbucket. For simplicity, these instructions are assuming you are using GitHub.
If you have a GitHub account you can simply import the project into a new repo.
- Log in to your GitHub account and go to your Repositories tab.
- Click "New", give the repository a name, and click "Create"
- On the next screen click the "Import Code" button and enter the url https://github.com/FosterCommerce/headless-craft-commerce.git. It may take a few minutes to import the code.
- Once that is done, you can check the repository out to your local machine as normal.
If you do it this way, then skip to the Installation section below.
Alternatively you can clone the project to your local machine and change its remote origin to your own repository.
- Clone the project to your local machine with
git clone [email protected]:FosterCommerce/headless-craft-commerce.git- or;
git clone https://github.com/FosterCommerce/headless-craft-commerce.git - or; download the project as a .zip file from https://github.com/FosterCommerce/headless-craft-commerce/archive/refs/heads/develop.zip
-
Change the origin To make this your own, fire up a terminal and navigate to the root directory of the project. Type the following;
git remote set-url <url of your repo> -
You'll then need to push the code up to your own repository
You will need Docker Desktop and DDEV in order to run this project.
Docker is free for small businesses (fewer than 250 employees AND less than $10 million in annual revenue), personal use, education, and non-commercial open source projects.
Take a look at this blog post from Fortrabbit for a quick guide for installing Docker and DDEV. You only need follow the part titled "Install DDEV to power your local Craft CMS dev sites".
This workshop repo includes DDEV config files so if you have Docker Desktop and DDEV installed on your machine, you can get the project up and running quickly by doing the following:
-
Save the .env.example file as .env, and add values for CRAFT_APP_ID and CRAFT_SECURITY_KEY :
// Craft App Settings CRAFT_APP_ID= CRAFT_SECURITY_KEY=The APP_ID and CRAFT_SECURITY_KEY can be any random strings. Use something like https://www.allkeysgenerator.com/Random/Security-Encryption-Key-Generator.aspx or just mash that keyboard.
-
Open your terminal and go to the projects root directory :
cd <path-to-project>/headless-craft-commerce -
Start up Docker Desktop and after it loads, start DDEV in your terminal :
ddev startIf you have problems starting ddev because ports are in use then make sure you shut down other servers that may be using the same ports (such as Nitro) and try starting ddev again.
-
Once DDEV has finished downloading and configuring its Docker containers and starts to run, install the project's composer dependencies :
ddev composer install -
Import the projects seed database into DDEV :
ddev import-db --src=project_db.sql.gzAlternatively if you are on a Mac and have TablePlus, SequelPro or SequelAce installed, you can open these apps directly from DDEV and import the same database SQL dump seed file (project_db.sql.tar.gz):
// Using TablePlus ddev tableplus // Using SequelPro ddev sequelpro // Using SequelAce ddev sequelace -
Get Craft up and running and apply any changes to the config:
ddev exec php craft up
Note You should run the above command whenever you pull down an update from the repository in order to apply any config changes that have been made since you last pulled down the repo.
-
Next we need to install Nuxt and the other dependencies for the front end build. In your terminal run the following command :
ddev yarn install
*Note This process can take a few minutes to download and install the necessary packages.
-
To run the front end of the project in dev mode, you then use the following command :
ddev yarn dev -
In your browser you can now access the site running locally in DDEV :
-
Craft Admin
https://headless-craft-commerce.fostercommerce.test/admin- Username : admin
- Password : password
-
Front End (on port 3000)
https://headless-craft-commerce.fostercommerce.test:3000
-
According to a quick Google search…
"Vercel is a cloud platform that enables developers to host websites and web services that deploy instantly, scale automatically, and require no supervision"
Basically, it's a quick and easy way to get a site up and running in the cloud for showing to your friends, family, and clients.
We are going to use Vercel to get your new Headless Commerce site online. The Front-end of the site will be hosted on your own Vercel account and the Back-end, Craft installation, and database, will be on Foster Commerce's Forge server. Everyone will share the same Back-end.
If you already have a Vercel account then you can skip this part.
Vercel offers a free "Hobby" tier which will be great for what we are doing.
First off, head over to https://vercel.com/signup
Vercel will be pulling code from your repository. It works with GitHub, GitLab, and Bitbucket. So sign in using one of those options or alternatively, sign up using an email address. We recommend using GitHub.
For our purposes, we are going to assume you have logged in using GitHub. If you haven't then please head into your Vercel settings and add GitHub as a Repository provider.
-
You should now see a list of your repositories and you can select the project to import into Vercel. Choose your DotAll repo and click "Import".
-
Give your Vercel project a name (or just keep the default)
-
The Framework Preset should be Nuxt.js
-
Root directory should be ./
-
Open the Build and Output Settings
-
Set the Build Command to
yarn run build -
Set the Output Directory to
.nuxt -
Open the Environment Variables tab and set the following
| Variable name | Value |
|---|---|
| CRAFT_BASE_URL | https://headless-craft-commerce.fosterstaging.com |
| CRAFT_ENVIRONMENT | staging (or production is fine too) |
| ASSET_BASE_URL | https://headless-craft-commerce.fosterstaging.com/assets |
| STRIPE_PUB_KEY | pk_test_51LlDeCIQuBaBLwXUlhgSLcxeO57AtPojwBAKcK32OiXmNLkJ75zbFfAqQRBOzcryuHXt8CPhXWcsca6tha7JpM5Z00FEZRVfNm |
| PAYPAL_CLIENT_ID | AXP96ibcJy88Xp0cthYMmO8_B0Mzln8TMy7D1LiuUMbXQG89ghRTJQLvbY8oS4AiQuNn2qbnKvn3yFy0 |
- Then click "Deploy"
From this point on, Vercel will create a deployment whenever you push changes to your repo. The deployments are based on the branch you push to so you can have separate "sites" for your development, preview, and production. By default, the production site will deploy from main or master.
Access the Front-end of the site with your own Vercel App url
If you have used the example .env file then you will already be hooked up to our test Stripe and Paypal accounts. Feel free to change the keys to use your own test accounts.
We have hooked the site up to a Stripe Test account. Use the following card details to check out.
- Stripe test card: 4242424242424242
- Expiry: any future date
- CVV: 123
We have hooked the site up to our Paypal Sandbox account so to checkout using Paypal you will need to use the following credentials
-
Email: [email protected]
-
Password: fcdotall
-
Paypal test card number: 4111111111111111
-
Expiry: any future date
-
CVV: 123
There is a test discount code already set up.
Use code GIVEME10 for a sweet 10% off an imaginary product in the imaginary store! Thank us later.