Choose platform components

Main > Using Liquid for building your application > Choose platform components

AWAW currently* provides packages to use in React and Angular front-ends as well as .NET Core back-ends.

The most necessary and common platform services for building modern applications are abstracted as the following cartridges*:

Platform service	Back-end	Front-end	Azure	AWS*	Google
Repository	X		CosmosDB	DynamoDB	GoogleFireStore
MediaStorage	X		AzureBlob	S3	GoogleStorage
MessageBus	X		ServiceBus	SqsSns	GooglePubSub
Telemetry	X	X	AppInsights	CloudWatch	GoogleStackDriver

Therefore, Liquid groups them into one package for each platform type/provider and project type:

Project type	Azure	AWS*	Google
.NET Core	Liquid.Microservices.OnAzure	Liquid.Microservices.OnAWS	Liquid.Microservices.OnGoogle
Angular	@Liquid/angular-liquid-frontend-on-azure	@Liquid/angular-liquid-frontend-on-aws
React	@Liquid/react-liquid-frontend-on-azure	@Liquid/react-liquid-frontend-on-aws

For instance, if a .NET Core microservice is going to use only Azure services, it should install only the package Liquid.Microservices.OnAzure.

But if the same microservice is going to mix Azure services with the ones of AWS* (e.g. use Azure's CosmosDB as repository but gather telemetry with AWS's CloudWatch) then the package Liquid.Microservices.OnAWS should also be installed.

Take a look at related key concepts of Liquid
Platform Abstraction Layer
Leveling up Platform Providers

Bellow is a sample code choosing only Azure services to fulfill a .NET Core microservice's basic platform needs:

Startup.cs
-------------------------------------------------------------------------------

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    ...

    WorkBench.UseRepository<CosmosDB>();
    WorkBench.UseMediaStorage<AzureBlob>();
    WorkBench.UseMessageBus<ServiceBus>();
    WorkBench.UseTelemetry<AppInsights>();

    app.UseWorkBench(Configuration);
}

Likewise, a React front-end should do something similar to the following:

index.js
-------------------------------------------------------------------------------

import config from './config';

//Added lib from Liquid
import LiquidFrontEnd from '@Liquid/react-liquid-frontend'
 
//Set Environment as options on start the application
LiquidFrontEnd.withOptions(config);


myForm.js
-------------------------------------------------------------------------------

import { AppInsightsTelemetry } from "@Liquid/react-liquid-frontend-on-azure"

...

class myForm extends React.Component {
  constructor(props) {
    super(props);

    //Create new instance of Telemetry
    this.telemetry = new AppInsightsTelemetry();
  }

  ...

}

And finally, an Angular front-end should do like the following:

app.module.ts
-------------------------------------------------------------------------------

import { AppInsightsTelemetry } from "@Liquid/angular-liquid-frontend-on-azure";

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    LiquidFrontEnd.withOptions({ env: environment })
  ],

  providers: [
    WorkBench,
    { provide: 'ILightTelemetry', useClass: AppInsightsTelemetry }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

See how this is done in both front-end and back-end of Liquid Hotel360 sample application.

(*) Currently only Azure services have Liquid cartridges released. See Roadmap for further information.