SUNRISE as a Single-Page Application
Demo
Deploy it on Netlify
Netlify allows you to clone the repository, configure the project with your own data and deploy it, all in one click.
Run it locally
Steps | with Yarn | with NPM |
---|---|---|
Install | yarn install |
npm install |
Run | yarn serve |
npm run serve |
How to use your own project data
SUNRISE comes with some read-only data set by default that you can use. But if you need to use a different set of data or to manage the project via Merchant Center, then you'll need to connect SUNRISE to your own commercetools project.
Once you have created your commercetools project and populated it with data, follow the next steps to connect to it.
1. Create an API client for a SPA
In the Merchant Center, select your project and go to Settings
, then click on Developer Settings
section. You should now find yourself in the API Clients
tab. Click on the Create New API Client
button to display a form. There, enter a descriptive name for your new API client and select the Mobile & single-page application client
template. Once you have filled the form, submit it by clicking on Create API Client
, you should now be able to see your project credentials.
2. Configure SUNRISE with your API client
Create the file .env.local
(or any other .env
file) in the root folder of your project with the following content, replacing the data in the template (i.e. <your project key>
) for your own:
VUE_APP_CT_PROJECT_KEY=<your project key>
VUE_APP_CT_CLIENT_ID=<your client ID>
VUE_APP_CT_CLIENT_SECRET=<your client secret>
โ ๏ธ Always use an API client suited for single-page applications (SPA), as your credentials will be publicly accessible through the browser.
Optionally, you can also use a different commercetools host, instead of the default commercetools.com
(i.e. Europe). For example, to connect to our US hosts:
VUE_APP_CT_AUTH_HOST=https://auth.commercetools.co
VUE_APP_CT_API_HOST=https://api.commercetools.co
This will set up the necessary environment variables required to run SUNRISE. Feel free to choose any other approach that best suits your needs.
Run tests
The project has unit and end-to-end tests covering each functionality. Unit tests will run out of the box, but end-to-end tests require some further configuration, explained in the section below.
Test | with Yarn | with NPM |
---|---|---|
Unit | yarn test:unit |
npm run test:unit |
End-to-end | yarn test:e2e |
npm run test:e2e |
Configure end-to-end tests
In order to continue, it is necessary that you have full control over the commercetools project associated with SUNRISE.
Follow the same steps explained in the section How to use your own project data to create a second API client, but this time create it with the Admin client
template instead. Then add your new client ID and secret as the following environment variables (e.g. in .env.local
file):
CYPRESS_CT_CLIENT_ID=<your client ID>
CYPRESS_CT_CLIENT_SECRET=<your client secret>