Tag: Angular JS

Setup Sitecore OrderCloud headstart with Angular in Ubuntu system the docker way

April 3, 2023 /

Working on Linux system after been worked on Windows for 2 decades is always fun.

This blog post is to setup the Sitecore OrderCloud Headstart on Ubuntu the Docker way. As all the images used for the Headstart is are Linux based, this I didn’t find major difference how this is been setup in Windows system apart from few changes while installing Storage Explorer and few other erros which I have noted in this blog post.

Note – use sudo for each command or “sudo i”to run as root.

Ensure node js is installed

This might be required for your local build.

sudo apt update

sudo apt install nodejs

Ensure npm is installed

sudo apt install npm

Ensure docker and docker -compose is installed

See this blog post Install Docker on Linux

sudo snap install docker

sudo apt install docker-compose

Docker Compose

Lets start composing and solve errros that might come ourr way-

sudo docker-compose up -d

npm needs TLS1.2

npm notice Beginning October 4, 2021, all connections to the npm registry – including for package installation – must use TLS 1.2 or higher. You are currently using plaintext http to connect. Please visit the GitHub blog for more information: https://github.blog/2021-08-23-npm-registry-deprecating-tls-1-0-tls-1-1/
npm WARN @ordercloud/headstart-sdk@0.0.0 No repository field.

https://stackoverflow.com/questions/69044064/npm-notice-beginning-october-4-2021-all-connections-to-the-npm-registry-incl

The npm registry is deprecating TLS 1.0 and TLS 1.1
npm cache clear --force

npm set registry=https://registry.npmjs.org/

npm install -g https://tls-test.npmjs.com/tls-test-1.0.0.tgz

Install .Net SDK

Middleware runs on .Net. So this neds to be installed.

https://learn.microsoft.com/en-us/dotnet/core/install/linux-ubuntu

https://devblogs.microsoft.com/dotnet/dotnet-6-is-now-in-ubuntu-2204/

sudo apt-get update && \
sudo apt-get install -y dotnet-sdk-6.0
sudo apt-get update && \
sudo apt-get install -y aspnetcore-runtime-6.0
sudo apt install dotnet6

I found difficulties installing .Net on Ubuntu. You may have todo few restarts.

 docker compose up -d

This should start all the containers. Note- cosmos container takes time to start till then middleware waits and starts when comos is ready.

Comos should be available now –

Install Azure Storage- Explorer

Install Storage explorer in Ubuntu-

snapd should be already installed if you are using Ubuntu 16.04 LTS or later, you may have to update.

sudo apt update
sudo apt install snapd

Install Storage Explorer

sudo snap install storage-explorer

Open Azure Storage Explorer and follow the steps here –

Execute the command-

snap connect storage-explorer:password-manager-service :password-manager-service

Azure Storage Explorer should be able to open with above command.

Apply the same settings mentioned in this blog

Once you have followed and applied the settings mentioned in the blog, should be able to see the translation files in local storage and able to access the file.

We also have to set CQRS for blob container – lets do this later.

Middleware exited with errors-

Error –

See the resolution to this issue here – section – Unable to start Middleware container due to erros

Error – Connection refused (127.0.0.1:8081)

System.AggregateException: One or more errors occurred. (Connection refused (127.0.0.1:8081))
       ---> System.Net.Http.HttpRequestException: Connection refused (127.0.0.1:8081)

See the resolution to this issue here – section – Connection to Comos DB is failing

Error- Unsupported platform

0 18.52 npm ERR! code EBADPLATFORM
#0 18.53 npm ERR! notsup Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
#0 18.53 npm ERR! notsup Valid OS:    darwin
#0 18.53 npm ERR! notsup Valid Arch:  any
#0 18.53 npm ERR! notsup Actual OS:   linux
#0 18.53 npm ERR! notsup Actual Arch: x64

Changed the node version- see the blog here

Also changed the nginx version – see Error 4 here 

 => ERROR [headstart-seller:local-linux production 4/8] RUN apk add --update nodejs nodejs-npm && npm install -g json                                                                                 1.0s

see Error 4 here 

Change from this  -
RUN apk add --update nodejs nodejs-npm && npm install -g json

to-
RUN apk add --update nodejs npm && npm install -g json

#0 51.97 npm ERR! npm ERR! Cannot read properties of null (reading 'pickAlgorithm')

See the resolution to this error here

Now you should have all containers up and running with 

sudo docker compose up -d

If you see this error-

Check for Configure CORS to Blob Containers in this blog post

And here I have Seller, buyer and middleware working on Ubuntu system-

This has really opened the horizon to develop, deploy and maintain OrderCloud solution on a technology agnostic platform.

Loading

Sitecore Commerce 10- Setup Development Environment for Business Tools – Part 1

September 25, 2020 /

Business Tools is extensible using pluggable framework and can extend a UI using Entity Views. Although Business Tools offers a rich set of controls you might want to create your own custom control for the best business experience.

For this you need to first setup the development environment for business tools. Once the environment is setup you should be ready to develop custom control/customize the business tools.

Prerequisites

  1. Instance of Commerce Engine deployed in development environment
  2. Install Node.js Javascript runtime
  3. Install Angular CLI tool – npm install -g @angular/cli

NPM configuration to have NPM Packages from Sitecore public feed

Sitecore BizFx SDK relies on NPM packages available on the Sitecore official public feed for NPM packages.

Open Poswershell as Administrator

Execute these 2 commands in powershell

npm config set @speak:registry=https://sitecore.myget.org/F/sc-npm-packages/npm/

npm config set @sitecore:registry=https://sitecore.myget.org/F/sc-npm-packages/npm/

This will add following line to–

C:\Users\[your user]\.npmrc

[Optional] – you may check if this lines are added

@speak:registry=https://sitecore.myget.org/F/sc-npm-packages/npm/
@sitecore:registry=https://sitecore.myget.org/F/sc-npm-packages/npm/

Setup and Install SPEAK and BizFx packages for development solution

Copy Sitecore.BizFX.SDK.4.0.8 folder to your development folder and extract the SDK zip file to folder e.g. c:\BizFXDevelopment\SitecoreBizFx

Copy below files to the folder SDK was extracted. You should find this files from the Sitecore XC release package.

  1. speak-icon-fonts-1.1.0.tgz
  2. speak-ng-bcl-2.0.0-r00116.tgz
  3. speak-styling-1.0.0-r00110.tgz

Execute the following commands where the above files were copied

​​​​​​​npm install speak-icon-fonts-1.1.0.tgz
​​​​​​​npm install speak-ng-bcl-2.0.0-r00116.tgz
npm install speak-styling-1.0.0-r00110.tgz
npm install @sitecore/bizfx

Run npm install. This should install required npm modules and add a folder node_modules

npm install

Setup the business tools config.json with your deployment configuration

Once the npm installed successfully open config.json file located in src\assets folder

Update the config to the same as the BizFx site instance except for BizFxUri. Note BizFxUri points to http in below config

{
  "EnvironmentName": "HabitatAuthoring",
  "EngineUri": "https://localhost:5000",
  "IdentityServerUri": "https://xp10.IdentityServer",
  "BizFxUri": "http://localhost:4200",
  "Language": "en",
  "ContentLanguage": "en",
  "Currency": "USD",
  "ShopName": "CommerceEngineDefaultStorefront",
  "LanguageCookieName": "selectedLanguage",
  "ContentLanguageCookieName": "selectedContentLanguage",
  "EnvironmentCookieName": "selectedEnvironment",
  "AutoCompleteTimeout_ms": 300,
  "AccessTokenUpdateInterval_ms": 300000
}

Run the development environment

Important!

Stop the SitecoreBizFx site as the site listens to 4200 port. Next step will help listen the site from the extracted SDK folder.

Execute following Powershell command –

ng server

Open browser on http://localhost:4200/ this should ask to enter the Sitecore client credentials, once provided it will throw an error

This site can’t provide a secure connection

The reason this error occurs the identity server is not configure to server BizFx site on http

Update the Sitecore Identity Server Configuration

Open the Sitecore.Commerce.Identity ServiceHost.xml from the installed Identity Server instance \wwwroot\Config\production

Add http://localhost:4200 to AllowedCorsOriginGroup1

<AllowedCorsOrigins>
<AllowedCorsOriginsGroup1>http://localhost:4200</AllowedCorsOriginsGroup1>
</AllowedCorsOrigins>

Update Commerce Engine configuration

  • Open config.json from wwwroot folder in CommerceAuthoring site
  • Update AllowedOrigins in AppSettings to have http://localhost:4200
  • Since the config is changed need to bootstrap so the changes are applied to authoring site
  • Restart IIS. Optionally you may just restart Commerce Authoring site

Run Business tool from development environment

Open browser on http://localhost:4200/

Business tools running on http and in developer mode.

References –

step-by-step instructions on how to setup and compile the Business Tools (BizFX) application using the ​Sitecore.BizFX.SDK

Stay tuned next blog will walk through on how to create a new custom control/component in Business Tools

This image has an empty alt attribute; its file name is image-43.png