Skip to Content

Use Your Own YaaS Project to Back your Storefront.

By Seyedehmorvarid Khademhaghighat

By default, the StoreFront is wired to the YaaS Project default project (created by the StoreFront's own Team). This default project has already been wired up and populated with the Products (and Services) that you can browse. You will now use our own YaaS Project which you created earlier instead of the default one.


You will learn

In this tutorial you will use our own YaaS Project which you created earlier instead of the default one.

If you are not already familiar with Node.js, follow this link to learn more. You will use it in this tutorial. The YaaS Storefront is based on Angular and Restangular. If you are not already familiar with them and would like to dive into the code, you can follow the provided links to start learning.

Step 1: Complete Getting Started with YaaS

If you have not completed the Getting Started with YaaS tutorial, please do it now. This is necessary in order to follow the next steps.

Step 2: Set project ID and client ID

Take note of the YaaS Project’s identifier and the YaaS Client’s identifier and place these as the PROJECT_ID and CLIENT_ID values in the gruntfile.js in the folder(1) directory which you created in the previous tutorials. This is the root directory of your yaas-storefront project.

  • You Can find Project’s identifier in the Builder under the Administration tab when you open your project.
Project Identifier
  • You can find the client identifier by selecting your client from the list of Clients.
Client Credentials
  • In the Client Authorization section, use the SHOW button. Now you should be able to see the Client ID.
Show Credentials
Step 3: Rebuild the Storefront

Rebuild the Storefront by running the grunt build command from folder(1) directory.

Step 4: Rerun your Storefront

Rerun your Storefront by running the npm start command from folder(1) directory. The client will now be talking with your YaaS Project.

Step 5: Add products

Add some products to start populating your Storefront with material.

  • Go back to the builder and click on product / new product.
  • Add a name, an identifier, a price, a description and check active.
Add Product
  • Click on save.
  • (Optional) Add an image, click on save.
Add Image
  • Follow the same steps if you want to create additional products.
  • In the end if you reload your storefront, you will be able to see the products you added.

NOTE: It is important to set your products as active, otherwise they will not appear in your online store.

In this tutorial, you replaced the default storefront project credentials with your own YaaS project credentials. You added customized products to your storefront.

Next Steps

Back to top