{\r\n \"$schema\": \"https://schema.management.azure.com/schemas/2019-04-01/deploymentTemplate.json#\",\r\n \"contentVersion\": \"1.0.0.0\",\r\n \"parameters\": {\r\n \"storageAccountType\": {\r\n \"type\": \"secureString\"\r\n }\r\n },\r\n \"variables\": {\r\n \"diagStorageAccountName\": \"[concat('diags', uniqueString(resourceGroup().id))]\"\r\n },\r\n \"resources\": [\r\n {\r\n \"type\": \"Microsoft.Storage/storageAccounts\",\r\n \"apiVersion\": \"2019-06-01\",\r\n \"name\": \"[variables('diagStorageAccountName')]\",\r\n \"location\": \"[resourceGroup().location]\",\r\n \"sku\": {\r\n \"name\": \"[parameters('storageAccountType')]\"\r\n },\r\n \"kind\": \"Storage\"\r\n }\r\n ]\r\n}Using Bicep it will be simplified to:
\n@secure()\r\nparam storageAccountType string\r\nparam location string = resourceGroup().location\r\nvar diagStorageAccountName = concat('diags', uniqueString(resourceGroup().id))\r\nresource diagsAccount 'Microsoft.Storage/storageAccounts@2019-06-01' = {\r\n name: diagStorageAccountName\r\n location: location\r\n sku: {\r\n name: storageAccountType\r\n }\r\n kind: 'Storage'\r\n}You can see how much time and space you could be saving if you were to use Bicep.
\nBenefits
\nWhen it comes to the benefits of using Bicep, there is a list published in our documentation:
\n- \n
- Support for all resource types and API versions. \n
- Better authoring experience using editors such as VS Code (you will get validation, type-safety, intellisense). \n
- Modularity can be achieved using modules. You can have modules representing an entire environment or a set of shared resources and use them anywhere in a Bicep file. \n
- Integration with Azure services such as Azure Policy, Templates specs, and Blueprints. \n
- No need to store a state file or keep any state. You can even use the what-if operation to preview your changes before deploying them. \n
- Bicep is open source with a strong community supporting it. \n
Syntax
\nEvery Bicep resource will have the below syntax:
\nresource <symbolic-name> '<resource-type>@<api-version>` = { \r\n //properties\r\n name: 'bicepstorage2063'\r\n location: 'northcentralus' \r\n properties: {\r\n //...sub properties\r\n }\r\n}Where:
\n- \n
resource: is a reserved keyword. \nsymbolic name: is an identifier within the Bicep file which can be used to reference this resource elsewhere. \nresource-type: is the type of the resource you’re defining, e.g.Microsoft.Storage. \napi-version: each resource provider publishes its own API version which defines which version of the Azure Resource Manager REST API should be used to deploy this resource. \nproperties: these are the resource specific properties. For example every resource has anameandlocation. In addition some have sub properties which you can pass on. \n
Parameters
\nWhen we talk about infrastructure as a code and reusability of our templates, we definitely end up using parameters to customise our resources. Be its name, sku, username or password, we will need to change these per environment or application.
\nIn a Bicep file you can define the parameters that need to be passed to it when deploying resources. You can put validation on the parameter value, provide default value, and limit it to allowed values. The format of a parameter will be such as below:
\nparam <parameter-name> <parameter-type> = <parameter-value>Where:
\n- \n
param: is a reserved keyword. \nparameter-nameis the name of the parameter. \nparameter-type: is the type of the parameter such asstring,object, etc. \nparameter-value: is the value of the parameter you’re passing in. \n
Let’s review two examples to get a better understanding of the structure.
\n@minLength(3)\r\n@maxLength(24)\r\nparam storageName stringIn this example you’re limiting the storageName parameter’s value length to be between 3 and 24 characters. Or:
@allowed([\r\n 'Standard_LRS'\r\n 'Standard_GRS'\r\n 'Standard_RAGRS'\r\n 'Standard_ZRS'\r\n 'Premium_LRS'\r\n 'Premium_ZRS'\r\n 'Standard_GZRS'\r\n 'Standard_RAGZRS'\r\n])\r\nparam storageRedundancy string = 'Standard_LRS'In this example you’re specifying the allowed values for the storageRedundancy parameter and also provide the default value if nothing is provided during the deployment.
With ARM templates you had to use a separate file to pass the parameters during the deployments usually with a name ending in .parameters.json. In Bicep you need to use the same JSON file to pass the parameters in:
{\r\n \"$schema\": \"https://schema.management.azure.com/schemas/2019-04-01/deploymentParameters.json#\",\r\n \"contentVersion\": \"1.0.0.0\",\r\n \"parameters\": {\r\n \"storageName\": {\r\n \"value\": \"myuniquestoragename\"\r\n },\r\n \"storageRedundancy\": {\r\n \"value\": \"Standard_GZRS\"\r\n }\r\n }\r\n}Variables
\nSimilar to parameters, variables play an important part in our templates, especially when it comes to naming conventions. These can store complex expressions to keep our templates clean and their maintenance simple. In Bicep variables are defined using the var keyword:
var <variable-name> = <value>Where variable-name is the name of your variable. For example in our previous Bicep file we could have used a variable for our storage name:
var storageAccName = 'sa${uniqueString(resourceGroup().id)}'\r\n\r\nresource stg 'Microsoft.Storage/storageAccounts@2019-06-01' = {\r\n name: storageAccountName\r\n //...\r\n}Since we need a unique name for our storage account the uniqueString function is used (Don’t worry about that for now). The point is that we can create variables and use them in our template with ease.
There are multiple variable types you can use:
\n- \n
- String \n
- Boolean \n
- Numeric \n
- Object \n
- Array \n
Expressions
\nExpressions are used in our templates for variety of reasons, from getting the current location of the resource group to subscription id or the current datetime.
\nfunctions
\nThe good thing is that ANY valid ARM template function is also a valid Bicep function.
\nparam currentTime string = utcNow()\r\n\r\nvar location = resourceGroup().location\r\n\r\nvar makeCapital = toUpper('all lowercase')Ternary operator
\nTo use conditions in your deployments you would use the if function in ARM templates, however, that’s not supported in Bicep. Instead, you can leverage the ternary operator:
param globalRedundancy bool = true\r\n\r\nresource stg 'Microsoft.Storage/storageAccounts@2019-06-01' = {\r\n name: storageAccountName\r\n location: location\r\n kind: 'Storage'\r\n sku: {\r\n name: globalRedundancy ? 'Standard_GRS' : 'Standard_LRS' // if true --> GRS, else --> LRS\r\n }\r\n}Output
\nARM templates have an output section where you could send information out of your pipeline to be accessed within other deployments or subsequent tasks. In Bicep you have the same concept via the output keyword.
resource stg 'Microsoft.Storage/storageAccounts@2019-06-01' = {\r\n //...\r\n}\r\n\r\noutput storageId string = stg.idThis will return the storage id out to be used later.
\nLoops
\nIn ARM templates if you wanted to deploy a resource multiple times you could leverage the copy operator to add a resource n times based on the loop count. In Bicep you have the for operator at your disposal:
resource foo 'my.provider/type@2021-03-01' = [for <ITERATOR_NAME> in <ARRAY> = {...}]Where ITERATOR_NAME is a new symbol that’s only available inside your resource declaration.
param containerNames array = [\r\n 'images'\r\n 'videos'\r\n 'pdf'\r\n]\r\n\r\nresource blob 'Microsoft.Storage/storageAccounts/blobServices/containers@2019-06-01' = [for name in containerNames: {\r\n name: '${stg.name}/default/${name}'\r\n //...\r\n}]This snippet creates three containers within the storage account in a loop.
\nExisting keyword
\nIf you want to deploy a resource which is depending on an existing resource you can leverage the existing keyword.
resource stg 'Microsoft.Storage/storageAccounts@2019-06-01' existing = {\r\n name: storageAccountName\r\n}You won’t need the other properties since the resource already exists. You need enough information to be able to identify the resource. Now that you have this reference, you can use it in other parts of your deployment.
\nModules
\nIn ARM templates you had the concept of linked templates when it came to reuse a template in other deployments. In Bicep you have modules. You can define a resource in a module and reuse that module in other Bicep files.
.\r\n├── main.bicep\r\n└── stg.bicepIn our stg file you will define the resource, its parameters, variables, outputs, etc:
//stg.bicep\r\nparam storageAccountName\r\nvar storageSku = 'Standard_LRS'\r\n\r\nresource stg 'Microsoft.Storage/storageAccounts@2019-06-01' = {\r\n name: storageAccountName\r\n location: resourceGroup().location\r\n kind: 'Storage'\r\n sku: {\r\n name: storageSku\r\n }\r\n}And in the main file you will reuse the storage account as a module using the module keyword:
//main.bicep\r\nmodule stg './storage.bicep' = {\r\n name: 'storageDeploy'\r\n params: {\r\n storageAccountName: '<YOURUNIQUESTORAGENAME>'\r\n }\r\n}\r\n\r\noutput storageName array = stg.outputs.containerPropsYou only need to pass the required properties which in case of our storage account is the name.
\nThe any keyword
\nThere might be some cases where Bicep throws a false positive when it comes to errors or warnings. This might happen based on different situations such as the API not having the correct type definition. You can use the any keyword to get around these situations when defining resources which have incorrect types assigned. One of examples is the container instances CPU and Memory properties which expect an int, but in fact they are number since you can pass non-integer values such as 0.5.
resource wpAci 'microsoft.containerInstance/containerGroups@2019-12-01' = {\r\n name: 'wordpress-containerinstance'\r\n location: location\r\n properties: {\r\n containers: [\r\n {\r\n name: 'wordpress'\r\n properties: {\r\n ...\r\n resources: {\r\n requests: {\r\n cpu: any('0.5')\r\n memoryInGB: any('0.7')\r\n }\r\n }\r\n }\r\n }\r\n ]\r\n }\r\n}By using any and passing the value you can get around the possible errors which might be raised during the build or the validation stage.
Tooling
\nIn terms of tooling the support is the same if not better than the ARM templates.
\nVS Code extension
\nVS Code comes with an official extension for Bicep. This extension gives you validation, intellisense, dot property access, snippets etc.
\nCI/CD
\nIf you’re using GitHub Actions for your CI/CD pipeline, there is already a Bicep action created by our developer advocate Justin Yoo which you can use to build you bicep file and deploy it to Azure.
\nCLI
\nBicep comes with a CLI that you can install locally on Windows, MacOS, and Linux. That gives you the ability to build and deploy your Bicep files with Azure CLI.
\nSummery
\nIn short, I highly recommend using Bicep and improving your IaC and deployments. Of course if your ARM templates are too many, or very complex you might benefit from converting them more, but if you already have a streamlined pipeline with maintainable templates, you could keep them and create any new template using Bicep instead.
","timeToRead":8,"frontmatter":{"title":"From ARM to Bicep 💪🏽","unformattedDate":"2021-05-10T00:00:00.000Z","date":"May 10, 2021","path":"/from-arm-to-bicep/","author":"Yaser Adel Mehraban","tags":["showdev","azure","arm","bicep"],"thumbnail":null}}},{"node":{"id":"1374100d-ff53-504a-a87b-0d1cb761ce52","html":"Azure Functions is one of the the serverless services in Azure which allows you to run your business logic without worrying about where it’s running and how it scales. But it being serverless is not the highlight of this amazing service, the way it’s designed which allows you to leverage a very diverse set of triggers and input/output bindings without writing much code is to me the best of the best. So in this article I’ve decided to take you on a journey with a few of the common triggers and bindings and show you how to set them up quickly and without writing any unnecessary code.
\n\nWorking with Azure Functions locally
\nBefore we delve into the main topic of our discussion, I should quickly show you how easy it is to create and run these functions locally using a code editor or even a simple terminal.
\nIf you’re using Visual Studio Code, you need to install the Azure Functions Extensions. For the command line approach, you’ll need the Azure Functions Core Tools and either Azure CLI or Azure PowerShell to create Azure resources. You can also use the Visual Studio 2019 in which case you need to install its Azure Development component. It has built in templates for you to get started and be able to create functions and deploy them to Azure right there and then. You can find the tutorial here.
\nThe good news is that all of these tools are cross platform and compatible with Windows, Linux and MacOS.
\nI’ll just show you one of them and leave the rest to you. After you have installed the necessary tools, open a terminal (I use Windows Terminal) and initialize a new function using the init command:
\nfunc init myLocalFunctionProj --dotnet\r\n\r\ncd myLocalFunctionProjYou can use other languages too. For a list of supported languages please visit the our documentation.
\nNow that you have a project you can create one or multiple functions in it:
\nfunc new --name HttpExample --template \"HTTP trigger\" --authlevel \"function\"This will create an HTTP triggered function for you which you can run using:
\nfunc startNow you can send request to your function, so open a browser and visit http://localhost:7071/api/HttpExample?name=Yas, the function should return the result and the browser should show you a Hello Yas message. You’re now ready to explore triggers and binding.
Triggers
\nThere are quite a few triggers available which will cover almost any scenario you could think of. From a simple HTTP trigger to timer and blob, and a whole lot more are supported without you needing to write code. If I wanted to just quickly go through the most common ones, they are:
\n| Type | \nPurpose | \n
|---|---|
| Timer | \nExecute a function at a set interval. | \n
| HTTP | \nExecute a function when an HTTP request is received. | \n
| Blob | \nExecute a function when a file is uploaded or updated in Azure Blob storage. | \n
| Queue | \nExecute a function when a message is added to an Azure Storage queue. | \n
| Azure Cosmos DB | \nExecute a function when a document changes in a collection. | \n
| Event Hub | \nExecute a function when an event hub receives a new event. | \n
| Event Grid | \nExecute a function when an event is sent to Event Grid topics or queues. | \n
All of my examples will be using Csharp but you can use your language of choice. Examples of those can be found on Azure Functions documentation site.
\nTimer trigger
\nTimer triggers allow you to run the function on a schedule. All you need is a TimerTrigger attribute with its configuration:
[FunctionName(\"TimerTriggerCSharp\")]\r\npublic static void Run([TimerTrigger(\"0 */5 * * * *\")]TimerInfo myTimer, ILogger log)\r\n{\r\n if (myTimer.IsPastDue)\r\n {\r\n log.LogInformation(\"Timer is running late!\");\r\n }\r\n log.LogInformation($\"Csharp Timer trigger function executed at: {DateTime.Now}\");\r\n}This function will run based on the CRON expression you have specified. Our example CRON expression will run the function 12 times an hour, every 5th minute of every hour of the day.
\nBlob trigger
\nBlob triggers are very powerful and allow you to cover verity of scenarios from creating an image thumbnail on upload to check a file for virus.
\n[FunctionName(\"BlobTriggerCSharp\")] \r\npublic static void Run([BlobTrigger(\"container-name/{name}\")] Stream myBlob, string name, ILogger log)\r\n{\r\n log.LogInformation($\"Csharp Blob trigger function Processed blob\\n Name:{name} \\n Size: {myBlob.Length} Bytes\");\r\n}\n\n💡 You will need the
\nMicrosoft.Azure.WebJobs.Extensionspackage to use these attributes.
Cosmos DB trigger
\nIf you wanted to become aware when a document is inserted/updated in your Cosmos DB, you can use this trigger:
\n[FunctionName(\"CosmosTrigger\")]\r\npublic static void Run([CosmosDBTrigger(\r\n databaseName: \"ToDoItems\",\r\n collectionName: \"Items\",\r\n ConnectionStringSetting = \"CosmosDBConnection\")]IReadOnlyList<Document> documents,\r\n ILogger log)\r\n{\r\n if (documents != null && documents.Count > 0)\r\n {\r\n log.LogInformation($\"Documents modified: {documents.Count}\");\r\n log.LogInformation($\"First document Id: {documents[0].Id}\");\r\n }\r\n}All you need is the connection string in your local.settings.json in the connection string section:
{\r\n \"IsEncrypted\": false,\r\n \"Values\": {\r\n \"AzureWebJobsStorage\": \"<storage-connection-string>\"\r\n },\r\n \"ConnectionStrings\": {\r\n \"CosmosDBConnection\": \"<cosmosdb-connection-string>\"\r\n }\r\n}For all the other examples you can update your settings file accordingly. I won’t be going through more triggers because I want to show the bindings. But you can find examples of all the supported triggers in our reference documentation section.
\nBindings
\nBindings allow you to have input and output to/from your function out of the box. This is where magic happens and it’s super powerful. For example, if you wanted to have a function which is triggered by a queue and gets a blob as input, you will need this:
\n[FunctionName(\"BlobInput\")]\r\npublic static void Run(\r\n [QueueTrigger(\"queue-name\")] string myQueueItem,\r\n [Blob(\"container/{queueTrigger}\", FileAccess.Read)] Stream myBlob,\r\n ILogger log)\r\n{\r\n log.LogInformation($\"BlobInput processed blob\\n Name:{myQueueItem} \\n Size: {myBlob.Length} bytes\");\r\n}In this example the queue message contains the name of the blob. Or imagine people are uploading images into a blob container and you wanted an Azure Function to create thumbnails for you. You will need a blob trigger and a blob output:
\n[FunctionName(\"CreateThumbnail\")]\r\npublic static void Run(\r\n [BlobTrigger(\"images/{name}\")] Stream image,\r\n [Blob(\"thumbnails/{name}\", FileAccess.Write)] Stream thumbnail,\r\n ILogger log)\r\n{\r\n IImageFormat format;\r\n\r\n using (Image<Rgba32> input = Image.Load<Rgba32>(image, out format))\r\n {\r\n input.Mutate(x => x.Resize(320, 200));\r\n input.Save(output, format);\r\n } \r\n}The two image will share the same name, although the container name is different. For the name of the output blob, you could also use some pre-defined functions such as {rand-guid} to generate a unique identifier or {DateTime} to use current time as the name, although this might not match your requirement all the times.
But what if you wanted to write it into the same container? In that case you couldn’t simply use the {name} for your output binding. To generate the name of the output blob at runtime, you need to use imperative bindings.
IBinder
\nInstead of using the [Blob] attribute, you could use an instance of IBinder interface which gives you much more control over your output binding and it’s name. The same example with a binder will look like:
using System;\r\nusing System.IO;\r\nusing Microsoft.Azure.WebJobs;\r\nusing Microsoft.Extensions.Logging;\r\nusing SixLabors.ImageSharp;\r\nusing SixLabors.ImageSharp.Processing;\r\nusing SixLabors.ImageSharp.Formats;\r\nusing System.Threading.Tasks;\r\nusing SixLabors.ImageSharp.PixelFormats;\r\n\r\nnamespace functions\r\n{\r\n public static class createThumbnail\r\n {\r\n [FunctionName(\"createThumbnail\")]\r\n public static async Task Run(\r\n [BlobTrigger(\"images/original-{blobName}\", Connection = \"AzureWebJobsStorage\")] Stream image,\r\n string blobName,\r\n IBinder binder,\r\n ILogger log)\r\n {\r\n IImageFormat format;\r\n\r\n using (Image<Rgba32> input = Image.Load<Rgba32>(image, out format))\r\n {\r\n input.Mutate(x => x.Resize(320, 200));\r\n\r\n using (var writer = await binder.BindAsync<Stream>(\r\n new BlobAttribute($\"images/thumbnail-{blobName}\", FileAccess.Write)))\r\n { \r\n input.Save(writer, format);\r\n }\r\n }\r\n }\r\n }\r\n}\r\n\n\n💡 The reason we added a suffix to the blob name is to prevent the infinite look when we write to the same container.
\n
Other bindings
\nThere are heaps of bindings available for you to leverage and create great solutions to solve your business problems and you can find out about them here. All you need to do is to select the Reference > Triggers and bindings from the left hand side.
Summary
\nHope this article has been interesting enough to intrigue you to go checkout Azure Functions and leverage their power to solve your business problems. Until next post, Sayōnara 👋🏽.
","timeToRead":6,"frontmatter":{"title":"Exploring Azure Function Triggers and Bindings ⚡","unformattedDate":"2021-03-29T00:00:00.000Z","date":"Mar 29, 2021","path":"/azure-function-bindings/","author":"Yaser Adel Mehraban","tags":["showdev","azure","functions","serverless"],"thumbnail":null}}},{"node":{"id":"35737a5a-d577-5e27-b46a-593a7ce97558","html":"Playwright is one of the recently released end to end testing frameworks which enables fast, reliable and capable automation and is cross platform. I really like it, but since it’s very easy to setup and the community around it is super cool, I like it even more.
\nIn this article I want to show you how you can write some tests for any Vue.js application which is using Auth0 as an identity provider. However, this could be used with any other provider too, since it covers the basics and makes you ready to write tests which cover different scenarios and user interactions.
\n\nConcepts
\nBefore we delve into the nitty gritty of things here, we should all agree on a few concepts:
\n- \n
- End-to-end tests: End-to-end tests (AKA E2E) are like back box testing where you don’t test individual components or unit of code, instead you focus on testing a scenario end to end. With this type of tests, you use a real instance of the application. They are ideal for creating reliable and bug free application since they mimic user behaviour. \n
- Vue.js: is a fantastic progressive frontend framework which is ideal for building user interfaces. It’s like a middle ground between Angular and React and is built from ground up with developers in mind. It’s easy to pickup and integrate with other libraries or existing projects. \n
- Auth0: is an identity provider which has gained a really good reputation thanks to its complete solution which helps people secure their applications and add features like single sign on, multi-factor authentication and social media login to their applications. \n
Stage is set
\nI have an application which is written in Vue.js. I have added authentication and authorization using Auth0 and have different features shown/hidden to users based on their access levels.
\nHowever, my unit and component tests don’t seem to cover some scenarios which our end users will do when interacting with our application. Some of this is because I have to use mocks when doing component testing, and unit tests don’t cover more than a piece of code.
\nNow I need a way to test my application as if a user is sitting in front of their computer and uses our application. To achieve this, I will have to use end-to-end tests.
\nOptions
\nThere are some great E2E test frameworks out there, and here are just a few:
\n- \n
- Protractor \n
- Nightwatch.js \n
- Cypress \n
- TestCafe \n
- Playwright \n
- WebdriverJS \n
- OpenTest \n
- Puppeteer \n
And many more. However, I really like Playwright because it is easy to use and setup, it’s cross platform and integrates nicely with every CI/CD pipeline you’d think of.
\nThe code
\nSo I have an application which basically lists movies and people can buy tickets and go watch it in an imaginary gold cinema. The app also has an admin page where only users with administrator role can access. So let’s break through the code bit by bit:
\nMain setup
\nIn order for us to use the Auth0 as a plugin with Vue 3 we need to create a plugin and set it up in our main file. However, Vue 3 has changed the way we setup the plugins. So here is our little plugin (note code has been removed for brevity):
\nimport createAuth0Client from '@auth0/auth0-spa-js';\r\nlet client;\r\n///all the other methods and definitions\r\nexport const setupAuth = async (options, callbackRedirect) => {\r\n client = await createAuth0Client({\r\n ...options,\r\n });\r\n try {\r\n if (window.location.search.includes('code=') \r\n && window.location.search.includes('state=')) {\r\n const { appState } = await client.handleRedirectCallback();\r\n callbackRedirect(appState);\r\n }\r\n }\r\n //...\r\n return {\r\n install: app => {\r\n app.config.globalProperties.$auth = authPlugin;\r\n },\r\n };\r\n}We also implement a route guard in the same file:
\nimport { computed, watchEffect } from 'vue';\r\n\r\nconst authPlugin = {\r\n isAuthenticated: computed(() => state.isAuthenticated),\r\n loading: computed(() => state.loading),\r\n user: computed(() => state.user),\r\n popupOpen: computed(() => state.popupOpen),\r\n claims: computed(() => state.claims),\r\n getIdTokenClaims,\r\n getTokenSilently,\r\n getTokenWithPopup,\r\n handleRedirectCallback,\r\n loginWithRedirect,\r\n loginWithPopup,\r\n logout,\r\n getUser,\r\n};\r\n\r\nexport const routeGuard = (to, from, next) => {\r\n const { isAuthenticated, loading, claims } = authPlugin;\r\n const verify = () => {\r\n if (!isAuthenticated.value) {\r\n return next({ path: '/login', query: { returnUrl: to.path } });\r\n }\r\n\r\n if (to?.meta?.authorize) {\r\n const roles = claims.value['http://schemas.microsoft.com/ws/2008/06/identity/claims/role'];\r\n if (roles.find(r => r === to.meta.authorize.role)) {\r\n return next();\r\n } else {\r\n return next('/unauthorized');\r\n }\r\n }\r\n };\r\n if (!loading.value) {\r\n return verify();\r\n }\r\n watchEffect(() => {\r\n if (loading.value === false && claims.value) {\r\n return verify();\r\n }\r\n });\r\n};This route guard might look intimidating at first glance, but all we’re doing is to create an object which exposes the Auth0 client methods, and then checks the route for a metadata property called authorize which holds the value of the role which should have access to the page.
\nThe rest is just checking whether they match and allow the redirect or send the user to the unauthorized page.
\nIn our main file:
\nimport { createApp } from 'vue';\r\nimport router from './router';\r\nimport { setupAuth } from '@/auth/auth-plugin';\r\n\r\nconst authConfig = {\r\n domain: process.env.VUE_APP_DOMAIN,\r\n client_id: process.env.VUE_APP_CLIENTID,\r\n redirect_uri: process.env.VUE_APP_REDIRECT_URL,\r\n audience: process.env.VUE_APP_AUDIENCE,\r\n advancedOptions: {\r\n defaultScope: 'openid profile email crud:users',\r\n },\r\n};\r\n\r\nfunction callbackRedirect(appState) {\r\n router.push(appState && appState.targetUrl ? appState.targetUrl : '/');\r\n}\r\n\r\nlet app = createApp(App)\r\n .use(router);\r\n\r\nsetupAuth(authConfig, callbackRedirect).then(auth => {\r\n app.use(auth).mount('#app');\r\n});Here we’re simply creating an options object which is requied by the Auth0 SDK which has the client id, domain etc.
\nAnd once that’s done, we will create our app but instead of using the plugin right away, we will call the setupAuth which will then creates the client instance and returns the plugin instance. Now all we need to do is to call the .use and use our plugin instance.
Login component
\nNow that we’ve got our auth plugin setup, it’s time to setup our login component. Fortunately it doesn’t require much code:
\n<div v-if=\"!user\">\r\n <a href=\"#\" class=\"signup\" @click.prevent=\"login\">\r\n You need to sign in first!\r\n </a>\r\n</div>And in our component:
\n/// code removed for brevity\r\nexport default {\r\n methods: {\r\n login: async function() {\r\n try {\r\n await this.$auth.loginWithPopup();\r\n const user = await this.$auth.getUser();\r\n const accessToken = await this.$auth.getTokenSilently();\r\n this.$store.commit('SET_USER', user);\r\n //...\r\n }\r\n }\r\n }\r\n //...\r\n}The way this login works is that by clicking on the login button there would be a popup window opened from Auth0 where the user enters their credentials and press submit.
\nRouter config
\nAnd the last thing we would have here would be the routing configuration:
\nimport { createWebHistory, createRouter } from 'vue-router';\r\nimport { routeGuard } from '@/auth/auth-plugin';\r\n//other imports\r\nexport const routes = [\r\n {\r\n path: '/',\r\n component: Home,\r\n },\r\n //...other routes\r\n {\r\n path: '/login',\r\n component: Login,\r\n },\r\n {\r\n path: '/admin',\r\n component: Admin,\r\n beforeEnter: routeGuard,\r\n meta: {\r\n authorize: {\r\n role: 'Admin',\r\n },\r\n },\r\n },\r\n {\r\n path: '/unauthorized',\r\n component: UnAuthorized,\r\n },\r\n];\r\n\r\nconst router = createRouter({\r\n history: createWebHistory(),\r\n routes,\r\n});\r\n\r\nexport default router;And that’s the basics of our application. Don’t worry I will put a link to the GitHub repo at the end so you would have all the code. I just want you to know at a really high level how the app is setup.
\nSetting up the tests
\nIn order to add the package to our app, we will do it via the CLI. So go ahead and execute below command in your terminal at the root of your client app:
\nvue add e2e-playwright --devIt will take a while and a whole bunch of stuff happens behind the scene, but it does all the heavy lifting for you, create a folder for the E2E tests, and even creates a example test for your convenience. It adds Playwright so you can write tests, and chai to handle assertions.
\nWriting tests
\nWriting tests is the next step, for each test you have a few basic things to do. Import the necessary objects and methods:
\nconst { chromium } = require('playwright');\r\nconst { expect } = require('chai');Here I am importing Chrome, but you have the option to use Safari or Firefox if you wish.
\nNow we need some variables:
\nconst baseUrl = 'http://localhost:8080/';\r\nconst adminPassword = 'Super_Secure_Pass';\r\nconst adminUserName = 'admin@example.com';\r\nconst normalUserName = 'user@example.com';\r\nconst normalUserPassword = 'Super_Secure_Pass';I am just defining the passwords here to make it easier to understand, you make sure you have them in your environment files and use them that way so that you don’t commit user names and passwords into your source code.
\nNow it’s time to write our tests, basically you need a describe method which is your test suite. In there you would need two variables for your browser and page instances:
\ndescribe('Authenticated Vue App: ', () => {\r\n let browser;\r\n let page;\r\n})Now you would need to create an instance of your browser and page. So go ahead and add a beforeEach method. Inside that, lunch your browser, create a new page and navigate to your home page:
before(async () => {\r\n browser = await chromium.launch();\r\n page = await browser.newPage();\r\n await page.goto(baseUrl);\r\n});Make sure you close these objects at the end of the tests via an after method:
after(async () => {\r\n await page.close();\r\n await browser.close();\r\n});You’re now ready to write your first test. In this test we’re going to go to admin page without authentication and see what happens. Based on our router guard’s code, we know that the user should be redirected to login:
\nit('An unauthenticated user should not be able to see the admin page', async () => {\r\n await page.goto(`${baseUrl}admin`);\r\n expect(page.url()).to.equal(`${baseUrl}login?returnUrl=/admin`);\r\n});If you now run the tests by running yarn test:e2e, you should see the test pass.
More complicated tests
\nNow to add a spin on our test, say we wanted to actually login and see what happens. In this case we need to click on the login button, then find the opened window and fill in the username and password, then click on submit and come back to our app. This would require a bit more coding, but still easy to find out from Playwright’s documentation.
\nFirst you would need to find the login button, then you need to use a Promise.all method to be able to get a reference to your popup window:
const [popup] = await Promise.all([\r\n page.waitForEvent('popup'),\r\n await page.click('a.signup') \r\n]);Now that you have the reference, you need to fill in the info and click on the login:
\nawait popup.fill('input[type=\"email\"]', adminUserName);\r\nawait popup.fill('input[type=\"password\"]', adminPassword);\r\nawait popup.click('button[type=\"submit\"]');And at last you need to make an assertion. Say you wanted to see whether an admin user will have access to the admin page. To do the assertion, you need to hook up to the close event of the popup window. So your test will look like:
\nit('be redirected back to admin page after login', async () => {\r\n await page.goto(`${baseUrl}admin`);\r\n \r\n const [popup] = await Promise.all([\r\n page.waitForEvent('popup'),\r\n await page.click('a.signup') \r\n ]);\r\n\r\n popup.on('close', async () => {\r\n expect(page.url()).to.equal(`${baseUrl}admin`);\r\n });\r\n\r\n await popup.fill('input[type=\"email\"]', adminUserName);\r\n await popup.fill('input[type=\"password\"]', adminPassword);\r\n await popup.click('button[type=\"submit\"]');\r\n });The reason why you’d need a waitForEvent method in the Promise.all method is that you need to wait for the popup window to be able to get a handle on it. Now if you run the tests again, they should all pass.
Full code
\nYou can find the full source code on my GitHub repository here.
\nSummary
\nAnd that’s how easy it is to write tests which mimic user interactions and can make you confident to ship reliable software. Happy testing and let me know what could automation have you done with Playwright if you got to that point 👋🏽👋🏽.
","timeToRead":8,"frontmatter":{"title":"How to end-to-end test your Vue.js apps with Playwright 🧪","unformattedDate":"2021-02-07T00:00:00.000Z","date":"Feb 07, 2021","path":"/e2e-vue-playwright/","author":"Yaser Adel Mehraban","tags":["webdev","showdev","vue","playwright"],"thumbnail":{"childImageSharp":{"gatsbyImageData":{"layout":"constrained","placeholder":{"fallback":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAC4jAAAuIwF4pT92AAACPklEQVR42mNgwASMUMzAUF/PwlMw3R+IrbnzJrvyFs/wFSid6cdXOEUFJP2f4T8jAzZgf6xNxW5qpaOJXbQpiK9nFqNonp7uYLOv1VqwfLIuT/5UTd686aoMhb3SDJlTZbkrN4rjNdB5f5uP8462/+YRKf9NHGMSTZxijjsvavnvfKxzPtSlTCDKtHa7e+LOh3O91jyov8DAIHZAg88VYjADE8K0/xBbnI52LHWYXfvfxDr6s2VO1j/Hfa0vXXc2K0IMXMUGoqwC6td5L73+P2rl6eNXnCS09kpwxYLEVzEwMCMMhNrusqtJ02lPyzvzzIzfjssb/jsd7ywHiYeuWsVczwBRM0FMvtjGp+xOcV7Ch8vTvZ6ujNNZiz0M99ezgF25o6Xe/Wjff8edLefMFtfzoUQQEJxVYU/aZF8kcqzDc/Gd6a7/l8SqzYC4CdnLkEAAa7JZWiHotKv1rtO21hiY66BhBJZfrytpPJHBg31RgavTpDCdBfO95CXABjKgGwgEFqGFnCoqHuzOh9rUrDZ08qL4wN6exSI0lBNqOyMDNHZBBtUDg6weGmwMCAXAGHSOVTP2iQ8wdotyNPZO8LL0izWEedfEO0bHzDsh1Mo90tLUNd7AxjfK2sEn3NnaJ9LG2DvOzNQ91h2oVwM1HO3jOUw9Y9XMQtO1THwSTI094pRhBtp4Rwka+kVIGXvE2pi4JViZecfoW/tGaJt4ANV5xTmaeyeomnlEy+DOIUgRgQUwIacQe3tIhML0AABeULn/qZSjmwAAAABJRU5ErkJggg=="},"backgroundColor":"transparent","images":{"fallback":{"src":"/static/bf38b419a4fa82a6b763cc1b2dc46e8a/a7eab/vue-playwright.png","srcSet":"/static/bf38b419a4fa82a6b763cc1b2dc46e8a/6ed98/vue-playwright.png 750w,\n/static/bf38b419a4fa82a6b763cc1b2dc46e8a/4ce1a/vue-playwright.png 1080w,\n/static/bf38b419a4fa82a6b763cc1b2dc46e8a/a7eab/vue-playwright.png 1280w","sizes":"(min-width: 1280px) 1280px, 100vw"},"sources":[{"srcSet":"/static/bf38b419a4fa82a6b763cc1b2dc46e8a/cbeef/vue-playwright.webp 750w,\n/static/bf38b419a4fa82a6b763cc1b2dc46e8a/3cb55/vue-playwright.webp 1080w,\n/static/bf38b419a4fa82a6b763cc1b2dc46e8a/07811/vue-playwright.webp 1280w","type":"image/webp","sizes":"(min-width: 1280px) 1280px, 100vw"}]},"width":1280,"height":720}}}}}},{"node":{"id":"d37ae6d6-4052-59c9-85a3-c0540c354135","html":"Azure Cosmos DB is one of the foundational services in Azure, which provides high availability, global scale and an impressive performance. However, it could be a bit costly for developers to spin up an instance during their development especially if they don’t know some of the basics such as what should be the partition key, what throughput they should select and so on that much.
\nThe Azure Cosmos DB Emulator is a service provided by Microsoft which allows you to emulate the Cosmos DB Service locally for development purposes. In addition, no matter whether you’re using Azure CosmosDB or not, at some point you might have to test some sort of DocumentDB locally.
\n\nIntro
\nLet’s be honest, there are other ways to work with Cosmos DB without paying any money such as a Free Trial Account which gives you $200 dollars to spend over a year, or even the Cosmos DB Query Playground which is an interactive website which helps you to learn the query syntax and provides you with a set of pre-defined JSON documents to work with.
\nBut eventually you either run out of money, or your product is live and your developers want to develop new features and fix bugs to be released very quickly. That’s when Cosmos DB Emulator really comes to the rescue. You have other advantages such as ability to work offline and or even have an Azure subscription.
\nFeatures
\nAPI set
\nAzure Cosmos DB supports SQL API, as well as Table, MongoDB, Cassandra, and Gremlin which to me covers many scenarios from migrating an existing database from on-premise to Azure, modernising your legacy application, or create a brand new one. Azure Cosmos DB Emulator also supports these APIs although the underlying implementation details are different to the real service on Azure. In fact the emulator hides all abstractions from you and lets you focus on adding value to your team or organisation.
\n\n\n💡 However keep in mind that the data explorer provided with the service only supports SQL API at the moment.
\n
Number of containers
\nThe emulator allows you to create a single account with multiple (up to 25 fixed sized, or 5 unlimited) containers.
\nOperating System
\nAt the moment, the emulator only supports 64-bit versions of Windows (Server 2012 R2, Server 2016, Server 2019, Windows 10) which demands a minimum of 2GB of RAM and 10GB of free disk space. You must also have administrative privileges to be able to install the client.
\nIn addition to that, it also comes with docker image which you can use to run the emulator in a docker container but only on windows containers. If you want to use docker in Linux or macOS, you will need to use it on a Windows virtual machine.
\nInstallation
\nSimply download the executable from here and install it on your Windows OS, if you’re running Linux or macOS or want to run it in a docker container please refer to the official documentation.
\nDifferences
\nAs amazing it looks, there are a few differences you need to keep in mind when working with the emulator:
\n- \n
- As I mentioned before the data explorer only supports the SQL API. But you can use all other APIs from within your application using the SDK. \n
- It only supports a single account with a well known key. You can change the key from command line, but you cannot change it in the explorer. \n
- For now it only supports provisioning throughput mode only, meaning you can’t use it in serverless mode. \n
- It does not support core features such as different consistency levels, scaling, replication and performance guaranties. \n
- Since the client might not be up to date with Azure Cosmos DB service, make sure you always check the Azure Cosmos DB capacity planner to accurately estimate your required throughput. \n
- And the minimum ID property size is 256 characters. \n
Summary
\nIn this short article I just showed you the tip of the iceberg about what the Azure Cosmos DB Emulator has to offer for you. It’s a great utility to be able to develop applications who rely on Azure Cosmos DB locally and has helped me in my pet projects which doesn’t even need to work with a Cosmos DB instance. Keep an eye out for more articles on some use cases this amazing tool can help you with.
","timeToRead":3,"frontmatter":{"title":"How much do you know about Azure CosmosDB Emulator? 🧐","unformattedDate":"2020-12-15T00:00:00.000Z","date":"Dec 15, 2020","path":"/cosmos-emulator/","author":"Yaser Adel Mehraban","tags":["azure","showdev","cosmosdb","emulator"],"thumbnail":null}}},{"node":{"id":"aba3b0f4-8b62-51e5-bbdd-4c71f3870a50","html":"If you have ever tried to add responsiveness to your web application you would know it’s difficult or at least takes a while to get it right. As progressive web apps (PWAs) are the first class citizens on many devices with the ability to get installed, it’s even more important to make sure user’s have the best experience possible. But technology advances in a much faster pace. We have now foldable devices like the shiny new Microsoft Surface Duo which add more complexity to this equation.
\n\nProblem
\nWhat if you wanted to show your page across two screens without hiding the content under the middle edge? At least for now we don’t have any device with bending glass to be able to not worry about what appears where on the screen.
\nIn order to continue with this we need a demo application to make sure we’re on the same page. So let’s create one, say we have an image gallery which has 5 columns and someone is looking at it on their brand new Surface Duo:
\nCard title
\r\n\r\n This card has supporting text below as a natural lead-in to\r\n additional content.\r\n
\r\n\r\n Last updated 3 mins ago\r\n
\r\nCard title
\r\n\r\n This card has supporting text below as a natural lead-in to\r\n additional content.\r\n
\r\n\r\n Last updated 3 mins ago\r\n
\r\nCard title
\r\n\r\n This card has supporting text below as a natural lead-in to\r\n additional content.\r\n
\r\n\r\n Last updated 3 mins ago\r\n
\r\nCard title
\r\n\r\n This card has supporting text below as a natural lead-in to\r\n additional content.\r\n
\r\n\r\n Last updated 3 mins ago\r\n
\r\nCard title
\r\n\r\n This card has supporting text below as a natural lead-in to\r\n additional content.\r\n
\r\n\r\n Last updated 3 mins ago\r\n
\r\nCard title
\r\n\r\n This card has supporting text below as a natural lead-in to\r\n additional content.\r\n
\r\n\r\n Last updated 3 mins ago\r\n
\r\nCard title
\r\n\r\n This card has supporting text below as a natural lead-in to\r\n additional content.\r\n
\r\n\r\n Last updated 3 mins ago\r\n
\r\nCard title
\r\n\r\n This card has supporting text below as a natural lead-in to\r\n additional content.\r\n
\r\n\r\n Last updated 3 mins ago\r\n
\r\n<div class=\"gallery\">\r\n <div class=\"grid\">\r\n <div class=\"card\">\r\n <img\r\n class=\"card-img-top\"\r\n src=\"https://picsum.photos/200/200?random=5\"\r\n alt=\"Card image cap\"\r\n />\r\n <div class=\"card-body\">\r\n <h5 class=\"card-title\">Card title</h5>\r\n <p class=\"card-text\">\r\n This card has supporting text below as a natural lead-in to\r\n additional content.\r\n </p>\r\n <p class=\"card-text\">\r\n <small class=\"text-muted\">Last updated 3 mins ago</small>\r\n </p>\r\n </div>\r\n </div>\r\n <div class=\"card p-3\">\r\n <img\r\n class=\"card-img-top\"\r\n src=\"https://picsum.photos/200/200?random=4\"\r\n alt=\"Card image cap\"\r\n />\r\n <div class=\"card-body\">\r\n <h5 class=\"card-title\">Card title</h5>\r\n <p class=\"card-text\">\r\n This card has supporting text below as a natural lead-in to\r\n additional content.\r\n </p>\r\n <p class=\"card-text\">\r\n <small class=\"text-muted\">Last updated 3 mins ago</small>\r\n </p>\r\n </div>\r\n </div>\r\n <div class=\"card\">\r\n <img\r\n class=\"card-img-top\"\r\n src=\"https://picsum.photos/200/200?random=3\"\r\n alt=\"Card image cap\"\r\n />\r\n <div class=\"card-body\">\r\n <h5 class=\"card-title\">Card title</h5>\r\n <p class=\"card-text\">\r\n This card has supporting text below as a natural lead-in to\r\n additional content.\r\n </p>\r\n <p class=\"card-text\">\r\n <small class=\"text-muted\">Last updated 3 mins ago</small>\r\n </p>\r\n </div>\r\n </div>\r\n <div class=\"card\">\r\n <img\r\n class=\"card-img-top\"\r\n src=\"https://picsum.photos/200/200?random=2\"\r\n alt=\"Card image cap\"\r\n />\r\n <div class=\"card-body\">\r\n <h5 class=\"card-title\">Card title</h5>\r\n <p class=\"card-text\">\r\n This card has supporting text below as a natural lead-in to\r\n additional content.\r\n </p>\r\n <p class=\"card-text\">\r\n <small class=\"text-muted\">Last updated 3 mins ago</small>\r\n </p>\r\n </div>\r\n </div>\r\n <div class=\"card\">\r\n <img\r\n class=\"card-img-top\"\r\n src=\"https://picsum.photos/200/200?random=1\"\r\n alt=\"Card image cap\"\r\n />\r\n <div class=\"card-body\">\r\n <h5 class=\"card-title\">Card title</h5>\r\n <p class=\"card-text\">\r\n This card has supporting text below as a natural lead-in to\r\n additional content.\r\n </p>\r\n <p class=\"card-text\">\r\n <small class=\"text-muted\">Last updated 3 mins ago</small>\r\n </p>\r\n </div>\r\n </div>\r\n <div class=\"card\">\r\n <img\r\n class=\"card-img-top\"\r\n src=\"https://picsum.photos/200/200?random=7\"\r\n alt=\"Card image cap\"\r\n />\r\n <div class=\"card-body\">\r\n <h5 class=\"card-title\">Card title</h5>\r\n <p class=\"card-text\">\r\n This card has supporting text below as a natural lead-in to\r\n additional content.\r\n </p>\r\n <p class=\"card-text\">\r\n <small class=\"text-muted\">Last updated 3 mins ago</small>\r\n </p>\r\n </div>\r\n </div>\r\n <div class=\"card\">\r\n <img\r\n class=\"card-img-top\"\r\n src=\"https://picsum.photos/200/200?random=8\"\r\n alt=\"Card image cap\"\r\n />\r\n <div class=\"card-body\">\r\n <h5 class=\"card-title\">Card title</h5>\r\n <p class=\"card-text\">\r\n This card has supporting text below as a natural lead-in to\r\n additional content.\r\n </p>\r\n <p class=\"card-text\">\r\n <small class=\"text-muted\">Last updated 3 mins ago</small>\r\n </p>\r\n </div>\r\n </div>\r\n <div class=\"card\">\r\n <img\r\n class=\"card-img-top\"\r\n src=\"https://picsum.photos/200/200?random=9\"\r\n alt=\"Card image cap\"\r\n />\r\n <div class=\"card-body\">\r\n <h5 class=\"card-title\">Card title</h5>\r\n <p class=\"card-text\">\r\n This card has supporting text below as a natural lead-in to\r\n additional content.\r\n </p>\r\n <p class=\"card-text\">\r\n <small class=\"text-muted\">Last updated 3 mins ago</small>\r\n </p>\r\n </div>\r\n </div>\r\n </div>\r\n</div>And in our CSS file we just put a 5 column layout for the card column like so:
\n.grid {\r\n display: grid;\r\n grid-template-columns: repeat(5, 1fr);\r\n grid-row: auto;\r\n}Don’t worry too much about the code, you can view the result here on Glitch. Now to test how this page looks like you either have to have the device handy, or if you don’t have it like me, just use the Surface Duo Emulator which I find really cool. For example, here is how the page looks like at the moment:
\nYou can see right away that it’s not a good look, I mean who would be willing to spend a second on this site? So how do we fix it? I think we’re now on the same page, so let’s dive in.
\nSolution
\nBut don’t you worry, we’ve got you covered by two brand new experimental APIs that will enable you to effectively lay your elements on the screen where you want them to be.
\n\nThe former along with a set of environment variables allows you to be aware of the geometry of the fold. The latter is an API which can be used alongside the media feature to work with non-DOM targets like Canvas 2D and WebGL.
\nDetecting display regions
\nAs I mentioned earlier, the **screen-spanning** media feature allows you to be aware of the fact that the page is spanned across multiple display regions. But how do we use it? Let’s have a look at the syntax. At its core, you will have the ability to use the below media query:
@media (screen-spanning: <value>) { }The allowed values are:
\n- \n
- single-fold-vertical: which describes the state of the viewport, when it’s spanning across a single fold and the fold’s posture is vertical. This would mean the device is in double portrait mode like below: \n
\n \n \n \n ![\"double](\"/static/99d6bb43a607c28986686147482caa73/20e5d/double-portrait.jpg\" "\\"\\"")
\n \n
\n Image from Microsoft Surface Duo blog\n
The code for this mode would be:
\n@media (screen-spanning: single-fold-vertical) { \r\n /* styles applied in double-portrait (wide) mode */ \r\n}- \n
- single-fold-horizontal: which describes the state of the viewport, when it’s spanning across a single fold but this time the posture is horizontal. This would match the double portrait tall mode like below: \n
\n \n \n \n
Now is the time to fix the two middle columns. One way to fix the middle column problem is to add an empty column which has no content. But it’s easier said than done. If you’re willing to play with the width of the columns, you can get away with something like this:
\n@media (screen-spanning: single-fold-vertical) {\r\n .grid { \r\n grid-template-columns: repeat(4, 23%);\r\n grid-gap: 25px;\r\n }\r\n .card:nth-child(4n + 2) {\r\n margin-right: 5px;\r\n }\r\n .card:nth-child(4n + 3) {\r\n margin-left: 10px;\r\n }\r\n}This will result in:
\nYou have a few options here:
\n- \n
- Create a shortcut and pass the required arguments \n
- Use command line to start it \n
I am going to use Windows Terminal. Run the below command to fire up the emulator with MongoDB support:
\n& 'C:\\Program Files\\Azure Cosmos DB Emulator\\CosmosDB.Emulator.exe' /EnableMongoDbEndpointYou will be prompted to approve the emulator making changes to your system and once approved, you will see the emulator starting and the interface will open in your default browser.
\nGetting the connection string
\nThe very first thing you’d see is the quick start which should look something like this:
\nSeed the database
\nFirst let’s create a JSON file which contains some celebrities 😎:
\n[{\r\n \"age\": 18,\r\n \"birth_place\": \"Harij, Gujarat, India\",\r\n \"birth_sign\": \"Pisces\",\r\n \"birth_year\": \"1996\",\r\n \"birthday\": \"September 28\",\r\n \"name\": \"Daxeel Soni\",\r\n \"occupation\": \"Developer of this API. More: www.daxeelsoni.in\",\r\n \"photo_url\": \"http://daxeelsoni.in/images/me.jpg\"\r\n}, {\r\n \"age\": 28,\r\n \"birth_place\": \"Houston\",\r\n \"birth_sign\": \"Libra\",\r\n \"birth_year\": \"1987\",\r\n \"birthday\": \"September 28\",\r\n \"name\": \"Hilary Duff\",\r\n \"occupation\": \"TV Actress\",\r\n \"photo_url\": \"http://www.famousbirthdays.com/thumbnails/duff-hilary-medium.jpg\"\r\n}, {\r\n \"age\": 38,\r\n \"birth_place\": \"Columbia\",\r\n \"birth_sign\": \"Libra\",\r\n \"birth_year\": \"1977\",\r\n \"birthday\": \"September 28\",\r\n \"name\": \"Young Jeezy\",\r\n \"occupation\": \"Rapper\",\r\n \"photo_url\": \"http://www.famousbirthdays.com/thumbnails/jeezy-young-medium.jpg\"\r\n}, {\r\n \"age\": 48,\r\n \"birth_place\": \"Roanoke\",\r\n \"birth_sign\": \"Libra\",\r\n \"birth_year\": \"1967\",\r\n \"birthday\": \"September 28\",\r\n \"name\": \"Challen Cates\",\r\n \"occupation\": \"TV Actress\",\r\n \"photo_url\": \"http://www.famousbirthdays.com/thumbnails/cates-challen-medium.jpg\"\r\n}]Now that we have our JSON file, let’s seed the database. Replace the initial connect code with this:
\napp.listen(5000, () => {\r\n MongoClient.connect(\r\n CONNECTION_URL,\r\n {\r\n useNewUrlParser: true,\r\n sslValidate: false,\r\n },\r\n (error, client) => {\r\n if (error) {\r\n throw error;\r\n }\r\n database = client.db(DATABASE_NAME);\r\n collection = database.collection(\"celebrities\");\r\n collection.estimatedDocumentCount({}, (erorr, numOfRecords) => {\r\n if (numOfRecords <= 0) {\r\n fs.readFile(\"./info.json\", \"utf8\", (err, data) => {\r\n if (err) {\r\n console.log(`Error reading file from disk: ${err}`);\r\n } else {\r\n // parse JSON string to JSON object\r\n const celebrities = JSON.parse(data);\r\n\r\n collection.insertMany(celebrities, (error, result) => {\r\n if (error) {\r\n console.log(`Error in saving seed data: ${error}`);\r\n }\r\n\r\n console.log(`Seed data inserted into the database!`);\r\n });\r\n }\r\n });\r\n } else {\r\n console.log(`Connected to database`);\r\n }\r\n });\r\n }\r\n );\r\n});All we’re doing here is to get the number of records in the collection and if there is nothing, read the JSON file and write it to the collection.
\nDon’t forget to add const fs = require('fs') at the top with other require statements.
Now if you run npm start would should see the application start and then the seed data inserted message.
Creating the endpoint
\nAnd now all we need is to add our get endpoint to be able to fetch our celebrities. Don’t forget to add it before you create your listener:
\napp.get(\"/api/celebrities\", (request, response) => {\r\n collection.find({}).toArray((error, result) => {\r\n if(error) {\r\n return response.status(500).send(error);\r\n }\r\n response.send(result);\r\n });\r\n});Testing the application
\nYou’re now ready to get your celebrities via the API. Simply open a browser and head over to http://localhost:5000/api/celebrities or just use the below command:
curl -X GET http://localhost:5000/api/celebritiesSummary
\nIn this guide we saw how to use Azure Cosmos DB Emulator with MongoDb API to have a local MongoDb available for our local development and proof of concepts. Hope this has helped you save some time and also the trouble of installing yet another software on your system (of course if you already are using the emulator 😊).
\nEnjoy hacking and let us know what awesome projects you’re doing using the emulator.
\nPS: You can find the finished code in my GitHub repository here.
","timeToRead":5,"frontmatter":{"title":"How to use Azure Cosmos Emulator as a local MongoDb database 🌍","unformattedDate":"2020-11-30T00:00:00.000Z","date":"Nov 30, 2020","path":"/az-cosmos-emulator/","author":"Yaser Adel Mehraban","tags":["azure","cosmosdb","emulator","mongodb"],"thumbnail":null}}},{"node":{"id":"98876b21-77a3-5449-9d49-a72d10a259ee","html":"How many times have you been working on multiple systems and realised you are trying to paste something which you have copied on the other system? Well with the help of this article you can now share your clipboard between your Windows and Mac devices 😎.
\n\nWindows to Windows
\nIf you have multiple windows devices, it’s very easy. Simply open your control panel and search for Clipboard Settings.
\nOnce opened, set the Sync across devices option to on. If you want to prevent sensitive data to be synced and do it on a case by case basis, set the Never automatically sync text that I copy option to on instead.
\n![\"Clipboard](\"/1c3782258e317f014eda43682c3642ad/clipboard-settings-windows.jpg\")
While you’re at it, turn clipboard history on too to have a beautiful clipboard history available by pressing Win+V.
\nUse the copied text
\nNow if you copy something into your clipboard, based on assuming you wanted to sync everything, simply paste, or open your clipboard history on the target device to see it.
\n\n\n⚠️ If you selected never automatically sync option, you can press Win+V to open up your clipboard history and select what you want to be synced across your devices after copying the items.
\n
Additional tip
\nIf you choose to use clipboard history, make sure you pin items you use frequently to save yourself some more time too.
\npostcss config file is not picked up. So after a few try and errors, I finally got it working and thought to jot down what I went through to make it easier for my future self, and hopefully a few of my fellow developers around the world.
Vue CLI
\nYou can setup your Vue project with simply importing the script tag and start coding, but I normally like to use Vue CLI to get started because it takes care of the many things for me and gives a really good starting point.
\nSo let’s start by installing Vue CLI if you don’t have it already:
\nnpm install -g @vue/cli\r\n# OR\r\nyarn global add @vue/cliThis will install the Vue CLI for you and once that’s done, you’d be ready to create your project. If you already have CLI installed, make sure you update it first to get support for Vue v3 preview.
\nCreating the project
\nIn order to create your project, you need to call the CLI and give your project name:
\nvue create vue-tailwindcssThis command will start the wizard and asks you what version of Vue you want to use and what additional options you want to have.
\nYou can choose between default seetings, or making a completely custom setup. I will normally choose custom which gives me more freedom as to what I want to setup.
\nFrom here press Entre on Choose Vue version, and select 3.x (Preview).
\nCustomisation
\nIf you want to customise any of the default styles, you need to modify the theme. To do so, run:
\nnpx tailwind initThis will create a tailwind.config.js file for you in the root of your directory. To demo an example customisation, let’s say we want to add some space between the photo and the right hand side of the page. Currently the photo is having an position:absolute and right:0 because it has the lg:right-0 class.
So we want to add a new class which has 10% margin on the right hand side of the image. For that to work, we will need below code in our tailwindcss.config.js:
module.exports = {\r\n future: {\r\n // removeDeprecatedGapUtilities: true,\r\n // purgeLayersByDefault: true,\r\n },\r\n purge: [],\r\n theme: {\r\n inset: {\r\n '0': 0,\r\n auto: 'auto',\r\n '1/10': '10%',\r\n },\r\n extend: {},\r\n },\r\n variants: {},\r\n plugins: [],\r\n}Pay attention that I’ve added a 1/10 with the value of 10% which we can use. Now all we need to do is to add lg:right-1/10 to the image container which pushes the image to the left by 10%:
<div class=\"lg:absolute lg:inset-y-0 lg:right-1/10 lg:w-1/2\">\r\n</div>And now it should look like this:
\nSummary
\nWe saw how to add Tailwindcss library to our Vue 3 application created by Vue CLI. Hopefully this will help some of you out there facing the same issue as me. See you next time 👏🏽.
You can find the code in my GitHub repository.
","timeToRead":9,"frontmatter":{"title":"Get started with Vue 3 and Tailwindcss","unformattedDate":"2020-10-22T00:00:00.000Z","date":"Oct 22, 2020","path":"/vue-tailwind/","author":"Yaser Adel Mehraban","tags":["showdev","webdev","vue","tailwind"],"thumbnail":null}}}]}},"pageContext":{"limit":10,"skip":10,"numPages":13,"currentPage":2}},"staticQueryHashes":[],"slicesMap":{}}