Implementing An E-commerce Solution on Azure in Just a few Hours

Yes, you read it right, we are going to implement a full fledged e-commerce solution in just a few hours. And we are able to do so because of the capabilities provided by Azure DevOps and open source world. Thanks to Vue Storefront and Magento — the former provides highly performant and customizable, full featured front-end for any e-commerce such as Magento, and Shopware and the later is a full featured e-commerce back-end.

Before we move further, I would like to thank Konfhub and Microsoft Azure for organizing and sponsoring Azure Developer Stories and also sponsoring 100$ azure pass for building and sharing awesome solutions on Azure.

Interested only in trying DevOps hands on? Check out following story

Do you realize the transformation that e-commerce has brought in the entire Business Eco-system including supply chain, customer service, how business advertise and sell their products… At click of a few buttons users are able to place orders and whatever they want is delivered to their doorsteps. In this high paced technological transformation, positioning itself properly with the help of e-commerce tools is crucial for any business. With the digital transformation, comes the ability to track the click-funnels, explore user interests, AI based analytics, active user engagement and much more.

As the technologies mature and the competition is getting tough, every business must have a solid presence on the internet, be it through social media or their own portals and digital storefronts and they should be able to track the user engagement and conversion. Transitional methods such as television ads, newspaper ads, etc. are no longer effective and there is no way you can accurately track the impact of those investments. On the other hand, more and more end users are moving to the internet and internet can be tracked. You know exactly what is the impact of your digital campaigns through various tracking mechanisms.

Okay, we now understand the importance of digital presence. But why just be present online when you can have your shop open and accessible to anyone on the planet 24/7. Some of the big giants who realized the importance of e-commerce early on are Amazon, Flipkart, and JioMart.

To build our solution, we are going to use

Configure project on Microsoft Azure DevOps

As the first step, let us configure our project using tools provided by Microsoft Azure DevOps. Please read through Introduction to Azure DevOps or visit official Azure DevOps website to learn more about Azure DevOps.

In Azure DevOps our projects are organized under organizations. So first we will create an organization and name it ecom-on-azure. Navigate to https://dev.azure.com, you will be redirected to authentication page, where you can log in to Azure DevOps using your Azure credentials or create a new Azure DevOps account.

If you have not set up any organizations on Azure DevOps, in the next window you will be prompted to create an Azure organization. Choose a globally unique name for your organization, select a region close to you and perform captcha validation if you are prompted to do so, and then click continue.

It will take a few moments to set up your organization. Once your organization is ready, you have to create a project. Give a suitable name for your project, select whether you want it to be available publicly or want it to be private and the hit Create project button.

Hurray!!! Great Job! you have created your very first project on Microsoft Azure DevOps and you are now ready to utilize all the DevOps services provided by Microsoft Azure DevOps.

You can now use Boards to plan your work, Repos to maintain version control for all your code and assets and Pipelines for setting up CI/CD flow. You can also use Azure artifacts if you want to manage your packages. Azure Test Plans is available only for the paid tear. Next, let us import Vue Storefront source code to Azure Repo.

Import Vue Storefront source code to Azure Repo

Navigate to Azure Repos from the left panel and click on Import button under Import a repository.

Enter the URL of the repo to be imported and click Import.This will import you repository to Azure repos.

Create Azure App Service to deploy our front end

Go to https://portal.azure.com and log in. If you don’t have azure account, you can create a free account with $200 worth Azure credit for 1 month to explore Azure. Once you have logged-in, click on Create a resource and type app service in the search box that appears. Click on App Services button in the search results.

Image credit — Microsoft Learn

Fill up preferences on the Create Web App widget that appears and then click Review + create button. Do not forget to change the App Service Plan to one that suits your needs.

Finally click Create button after validation completes and the Create button is activated. We can now use this resource to deploy our Vue Storefront.

Setting up Vue Storefront

Vue storefront is lightning-fast frontend platform for headless commerce. It is built on Vue.js with PWA support and integrates well with any eCommerce backend such as Magento or Shopify. You can also integrate variety of headless CMS, payment solutions and third-party services such as algolia to enhance your eCommerce business. For a brief introduction to Vue Storefront please read Why Vue Storefront?

Image Credit — Vue Storefront

First go to the repo that we have cloned on our local machine and install all the dependencies by running npm install or yarn install. Once the dependencies are installed we need to run installer script to download and configure Vue Storefront theme. So, run yarn installer:ci . This will take considerable amount of time and often seem unresponsive but be patient and wait until you see starting server. At this point your vue storefront will be served on https://localhost:3000 by default if you haven’t changed the port in config file.

Let us now create our customized theme. The recommended way is to copy the Vue Storefront default theme and modify it. We will do the same. Go to the themes directory inside src directory and make a copy of default directory. Note that this themes directory was just created by yarn installer:ci script and default theme is downloaded into this directory from this GitHub repo. Now, rename the copied theme to say ‘mytheme’ and also change the name of the theme inside the package.json file inside this directory (Please take help of the video if you are not able to follow). Finally, change the theme in local.json file under the config directory inside the root directory.

Once you have set up your custom theme, run yarn && yarn dev to start the development server. Note that running yarn is equivalent to yarn install and this will help Vue Storefront pick-up the new theme that you have created. Once the server turns up, you can iteratively customize your theme until you are satisfied.

Once you are happy with your customization, you can delete default directory and push the changes back to the Azure repo. Make sure you also update the local.json file inside mytheme directory.

Set up Self-hosted agent to run Azure Pipelines

Since we are using free tire, we need to set up self-hosted agent to run Azure Pipelines. We will follow Microsoft official documentation to set up the self-hosted agent. Log in to https://dev.azure.com and navigate to your organization settings.

Image credit — Microsoft Learn

Now click on Agent pools under Pipelines.

Image Credit — Microsoft Learn

Then select the Default pool, select the Agents tab, and choose New agent.

Select your OS and architecture on the window that opens up and download the agent

Once downloaded, extract the files to any directory. If you are on windows machine, you can double click config.cmd. It will as you a few questions. First in Server URL enter https://dev.azure.com/{your-org-name}. Next select personal access token (PAT) as authentication method. At this stage you have to create PAT. Click on user settings button on top-right and then click Personal access tokens.

Now, create a new PAT or regenerate existing PAT and copy the token and paste in the terminal. Now accept defaults by pressing enter whenever it asks for the input.

We have now configured the machine as self-hosted agent for Azure Pipeline. Now, double-click run.cmd and then go to your organization settings again on the Azure DevOps. Go to Agent pools under Pipelines and select default. Now, go to Agents tab and wow! you see your agent online.

Don’t be so exited, it’s not finished yet.

Set up and run Azure Pipeline

Navigate to project by clicking on Azure DevOps logo and then clicking on the project card. Now select Pipelines from the left blade. Click create new pipeline.

This will open wizard to assist you in setting up your pipeline. In the first step, select Azure Repos Git as our codebase is maintained in Azure Repo. In the second step select the repo from which the codebase will be imported. Next, we will use Node.js Express Web App to Linux on Azure preset. You will be asked to select your Azure Subscription.

Select the subscription and click Continue. You may be required to log in again. Now, select the web app to which we want to deploy our app. This will create azure-pipelines.yml. Edit the file as required. For now, we will do following changes

  1. Change node version from 10.x to 14.x in line 35
  2. Comment out npm run commands on line 40 and 41
  3. Change node version from 10.10 to 14.18 in runtimeStack on line 76
  4. Change npm run start on last line to npm run dev
  5. Change pool: vmImage: $(vmImageName) to pool: default under job in both Build as well as Deploy stages.

Great Job… We deserve some dance and some break now…

Stay tuned…

In this story, we have set up our Azure DevOps organization, created a new public project, explored Vue Storefront and more. In the next part of this story, we will create our Magento deployment and deploy our eCommerce solution on Azure with Vue Storefront serving our front end and back-end being managed by Magento on Azure.

You may access the project at https://dev.azure.com/ecom-on-azure/ecom-on-az-demo/

Happy coding…

Get the Medium app