{"id":31832236,"url":"https://github.com/fostercommerce/headless-craft-commerce","last_synced_at":"2026-02-18T18:31:09.430Z","repository":{"id":60301824,"uuid":"541801334","full_name":"FosterCommerce/headless-craft-commerce","owner":"FosterCommerce","description":"A head start build for a headless Craft Commerce site, read to deploy to Vercel. Uses Nuxt 2.","archived":false,"fork":false,"pushed_at":"2022-09-27T19:42:35.000Z","size":5083,"stargazers_count":5,"open_issues_count":0,"forks_count":7,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-19T06:57:27.132Z","etag":null,"topics":["craftcms","craftcommerce","fostercommerce","nuxt2"],"latest_commit_sha":null,"homepage":"headless-craft-commerce-sc.vercel.app","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/FosterCommerce.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-09-26T22:06:18.000Z","updated_at":"2024-07-19T15:11:57.000Z","dependencies_parsed_at":"2022-09-27T20:50:27.932Z","dependency_job_id":null,"html_url":"https://github.com/FosterCommerce/headless-craft-commerce","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/FosterCommerce/headless-craft-commerce","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FosterCommerce%2Fheadless-craft-commerce","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FosterCommerce%2Fheadless-craft-commerce/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FosterCommerce%2Fheadless-craft-commerce/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FosterCommerce%2Fheadless-craft-commerce/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/FosterCommerce","download_url":"https://codeload.github.com/FosterCommerce/headless-craft-commerce/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FosterCommerce%2Fheadless-craft-commerce/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29589432,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-18T16:55:40.614Z","status":"ssl_error","status_checked_at":"2026-02-18T16:55:37.558Z","response_time":162,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["craftcms","craftcommerce","fostercommerce","nuxt2"],"created_at":"2025-10-11T22:59:59.282Z","updated_at":"2026-02-18T18:31:09.423Z","avatar_url":"https://github.com/FosterCommerce.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Launching a Headless Craft Commerce Site Workshop\n\n## Get a copy of the project\n\nThe project is hosted in a public GitHub repository at https://github.com/FosterCommerce/headless-craft-commerce.git\n\nLater 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. \n\n### Importing with GitHub\nIf you have a GitHub account you can simply import the project into a new repo.\n\n1. Log in to your GitHub account and go to your Repositories tab.\n2. Click \"New\", give the repository a name, and click \"Create\"\n3. 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.\n4. Once that is done, you can check the repository out to your local machine as normal.\n\nIf you do it this way, then skip to the Installation section below.\n\n### Cloning the repository and changing remote\nAlternatively you can clone the project to your local machine and change its remote origin to your own repository.\n\n1. **Clone the project** to your local machine with\n- `git clone git@github.com:FosterCommerce/headless-craft-commerce.git`\n- or; `git clone https://github.com/FosterCommerce/headless-craft-commerce.git`\n- or; download the project as a .zip file from [https://github.com/FosterCommerce/headless-craft-commerce/archive/refs/heads/develop.zip](https://github.com/FosterCommerce/headless-craft-commerce/archive/refs/heads/main.zip)\n\n2. **Change the origin**\nTo make this your own, fire up a terminal and navigate to the root directory of the project. Type the following; \n`git remote set-url \u003curl of your repo\u003e`\n\n3. You'll then need to push the code up to your own repository\n\n---\n## Installing the dev environment\n\n### Docker and Docker Desktop\n\nYou will need Docker Desktop and DDEV in order to run this project.\n\nDocker 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.\n\nTake a look at [this blog post](https://blog.fortrabbit.com/local-craft-dev-site-ddev-development-tool) 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\".\n\n### Installation with DDEV\n\nThis 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:\n\n1. Save the .env.example file as .env, and add values for CRAFT_APP_ID and CRAFT_SECURITY_KEY :\n\n        // Craft App Settings\n        CRAFT_APP_ID=\n        CRAFT_SECURITY_KEY=\n        \n   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.\n\n2. Open your terminal and go to the projects root directory :\n\n        cd \u003cpath-to-project\u003e/headless-craft-commerce\n\n3. Start up Docker Desktop and after it loads, start DDEV in your terminal :\n\n        ddev start\n        \n   If 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.\n\n4. Once DDEV has finished downloading and configuring its Docker containers and starts to run, install the project's composer dependencies :\n\n        ddev composer install\n            \n5. Import the projects seed database into DDEV :\n\n        ddev import-db --src=project_db.sql.gz\n        \n   Alternatively if you are on a Mac and have TablePlus, SequelPro or SequelAce installed, you can open these\n   apps directly from DDEV and import the same database SQL dump seed file (project_db.sql.tar.gz):\n   \n        // Using TablePlus\n        ddev tableplus\n        \n        // Using SequelPro\n        ddev sequelpro\n        \n        // Using SequelAce\n        ddev sequelace\n        \n6. Get Craft up and running and apply any changes to the config:\n\n        ddev exec php craft up\n        \n*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.*\n    \n7. Next we need to install Nuxt and the other dependencies for the front end build. In your terminal\nrun the following command :\n\n        ddev yarn install\n\n*Note This process can take a few minutes to download and install the necessary packages.\n        \n1. To run the front end of the project in dev mode, you then use the following command :\n\n        ddev yarn dev\n\n2.  In your browser you can now access the site running locally in DDEV :\n    \n    * **Craft Admin**\n\n            https://headless-craft-commerce.fostercommerce.test/admin\n        \n        * Username : admin\n        * Password : password\n        \n    * **Front End** (on port 3000)\n    \n            https://headless-craft-commerce.fostercommerce.test:3000\n\n\n---\n\n\n# Deploying the site to Vercel\n\n## What is Vercel?\nAccording to a quick Google search\u0026hellip;\n\n\u003e\"Vercel is a cloud platform that enables developers to host websites and web services that deploy instantly, scale automatically, and require no supervision\"\n\nBasically, 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.\n\nWe 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.\n\n### Create a Vercel account\n\n_If you already have a Vercel account then you can skip this part._\n\nVercel offers a free \"Hobby\" tier which will be great for what we are doing.\n\nFirst off, head over to https://vercel.com/signup\n\nVercel 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.\n\nFor 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.\n\n1. 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\".\n\n2. Give your Vercel project a name (or just keep the default)\n\n3. The Framework Preset should be Nuxt.js\n\n4. Root directory should be ./\n\n5. Open the Build and Output Settings\n\n6. Set the Build Command to `yarn run build`\n\n7. Set the Output Directory to `.nuxt`\n\n8. Open the Environment Variables tab and set the following\n   \n| Variable name | Value |\n| --- | --- |\n| CRAFT_BASE_URL | [https://headless-craft-commerce.fosterstaging.com](https://headless-craft-commerce.fostercommerce.test) |\n| CRAFT_ENVIRONMENT | staging (or production is fine too) |\n| ASSET_BASE_URL | [https://headless-craft-commerce.fosterstaging.com/assets](https://headless-craft-commerce.fostercommerce.test/assets) |\n| STRIPE_PUB_KEY |  pk_test_51LlDeCIQuBaBLwXUlhgSLcxeO57AtPojwBAKcK32OiXmNLkJ75zbFfAqQRBOzcryuHXt8CPhXWcsca6tha7JpM5Z00FEZRVfNm |\n| PAYPAL_CLIENT_ID |AXP96ibcJy88Xp0cthYMmO8_B0Mzln8TMy7D1LiuUMbXQG89ghRTJQLvbY8oS4AiQuNn2qbnKvn3yFy0 |\n\n9. Then click \"Deploy\"\n\nFrom 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`.\n\n# Testing the site\n\nAccess the Front-end of the site with your own Vercel App url\n\nIf 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.\n## Checking out with Stripe\nWe have hooked the site up to a Stripe Test account.\nUse the following card details to check out. \n- Stripe test card: 4242424242424242\n- Expiry: any future date\n- CVV: 123\n\n## Checking out with Paypal\nWe have hooked the site up to our Paypal Sandbox account so to checkout using Paypal you will need to use the following credentials\n- Email: sb-rqy43z21028865@personal.example.com\n- Password: fcdotall\n\n- Paypal test card number: 4111111111111111\n- Expiry: any future date\n- CVV: 123\n\n## Discount codes\nThere is a test discount code already set up. \n\nUse code **GIVEME10** for a sweet 10% off an imaginary product in the imaginary store! Thank us later.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffostercommerce%2Fheadless-craft-commerce","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffostercommerce%2Fheadless-craft-commerce","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffostercommerce%2Fheadless-craft-commerce/lists"}