Hi Everyone 👋 !!! Today we are announcing the beta release of LoginRadius CLI. I am very much excited about it.
\nDeveloper Experience plays a crucial role for us. We always think about the ways we can minimize the juggling between a quickstart tutorial, dashboard, and terminal.\nThe LoginRadius CLI will simplify your flow by just using some simple commands to register, login, add site, add social, etc., and enables you to get the job done in very little time without leaving the terminal.
\nCheck out a few examples of how LoginRadius CLI can help manage your Loginradius Dashboard.
\nThis command will help you to log in to the CLI. Once you logged in to the CLI, you can configure all your LoginRadius Applications through CLI.
\nGet your API Credentials in a single command. You can also reset your secret and generate sott using the LoginRadius CLI.
\nYou can update the LoginRadius IDX Page theme from the predefined themes available through LoginRadius CLI.
\n\n\nYou can check out the Theme Customization section in the LoginRadius Dashboard for all the available customization options.
\n
With the help of LoginRadius CLI, you can add social logins to your LoginRadius IDX Page.
\nRun lr --help to get the list of all available commands. Also you can checkout the manual for all the commands supported.
The LoginRadius CLI is available for Windows, macOS, and Linux. Check out the installation on our README.
\nWe hope you’ll love the LoginRadius CLI. And we’re even more excited about the future as we explore what it looks like to build a truly delightful experience with LoginRadius on the command line.
\nWe can’t wait to hear about your experience with LoginRadius CLI, and we’d love your feedback. Please create an issue in our open source repository or discuss what more commands you feel should be there on our community page.
\n\n","frontmatter":{"title":"Introducing LoginRadius CLI","author":{"id":"Mohammed Modi","github":"mohammed786","avatar":null},"date":"July 02, 2021","updated_date":null,"tags":["Authentication","DevTools","CLI","LoginRadius CLI"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/65b9c38d8aa61635972b0d2271c28c36/bc59e/cli.png","srcSet":"/static/65b9c38d8aa61635972b0d2271c28c36/69585/cli.png 200w,\n/static/65b9c38d8aa61635972b0d2271c28c36/497c6/cli.png 400w,\n/static/65b9c38d8aa61635972b0d2271c28c36/bc59e/cli.png 512w","sizes":"(max-width: 512px) 100vw, 512px"}}}},"fields":{"authorId":"Mohammed Modi","slug":"/engineering/introducing-loginradius-cli/"}}},{"node":{"id":"a1e85c8f-42f3-515f-8968-273689bb7e04","html":"Hello Guys!!!, today we will be implemented the authentication in the Angular 2+ application within 5 mins using LoginRadius.
\nTo implement authentication in the angular app first let's start with registering in the Loginradius and creating the application using LoginRadius CLI.
\nDeveloper Experience plays a crucial role for us. We always think about the ways we can minimize the juggling between a quickstart tutorial, dashboard, and terminal. The LoginRadius CLI will simplify your flow by just using some simple commands to register, create an application, log in, etc., and enables you to get the job done in very little time without leaving the terminal.
\nInstall the tap via:
\n$ brew tap loginradius/tapThen, you can install LR CLI via:
\n$ brew install lrAfter installing the CLI, you can register into the LoginRadius via the below command.
\n$ lr registerThis command will open the Loginradius in the browser to register yourself and create the app.
\nOnce you successfully register you will be able to see the below message on the browser, you can close the tab and come back to the CLI.
\nYou are Successfully Authenticated, Kindly Close this browser window and go back to CLI.Once you login/register using the CLI, You can now run the lr get config command to get your API credentials.
A callback URL is a URL in your application where LoginRadius redirects the user after they have authenticated. The callback URL for your app must be added to your Application Configuration. If this field is not set, users will be unable to log in to the application and get an error.
\nTo get the list of whitelisted domains, you can run lr get domain command from the cmd prompt. And to add a domain in the list using lr add domain command.
\n\nIf you are following this tutorial, you should set the
\nhttp://localhostas a whitelisted domain. Check the below image for how to add the domain using LoginRadius CLI.
app/profile folder generated by ng CLI.
import { Component, OnInit } from '@angular/core';\nimport { Router } from '@angular/router';\nimport config from '../config';\nimport { ProfileService } from '../profile.service';\nimport { Profile } from './profile';\n\n@Component({\n selector: 'app-profile',\n templateUrl: './profile.component.html',\n styleUrls: ['./profile.component.scss'],\n})\nexport class ProfileComponent implements OnInit {\n profile: Profile;\n loginRadius: any;\n\n constructor(private configService: ProfileService, private router: Router) {\n const token = localStorage.getItem('token');\n }\n\n ngOnInit(): void {\n this.configService.getProfile().subscribe(\n (data: Profile) => {\n this.profile = { ...data };\n },\n (err: any) => {\n if (err.status === 403) {\n localStorage.removeItem('token');\n this.router.navigate(['login']);\n }\n }\n );\n }\n\n logout() {\n localStorage.removeItem('token');\n window.location.href = `https://${config.APP_NAME}.hub.loginradius.com/auth.aspx?action=logout`;\n }\n}Similary add the below code to profile.component.html file.
<div class="container">\n <h1>Hello {{ profile?.Email[0]?.Value }}</h1>\n <button (click)="logout()">LogOut</button>\n</div>The profile component will call the LoginRadius API to fetch the profile details and store them in the profile variable. Using that profile, we are displaying the email in the HTML.\nIt also has the logout() function where we pass the action=logout in the LoginRadius Auth Page, which will help us log out the user.
In the profile component, you can see the two things are used.
\nYou can generate the service in the angular using ng CLI by using this command ng generate service profile which will create profile.service.ts with required configuration. Add the below code in the profile.service.ts file.
import { HttpClient } from '@angular/common/http';\nimport { Injectable } from '@angular/core';\nimport config from './config';\nimport { Profile } from './profile/profile';\n\n@Injectable({\n providedIn: 'root'\n})\nexport class ProfileService {\n\n constructor(private http: HttpClient) {}\n\n getProfile() {\n // now returns an Observable of Config\n return this.http.get<Profile>(\n `https://api.loginradius.com/identity/v2/auth/account?access_token=${localStorage.getItem(\n 'token'\n )}&apikey=${config.API_KEY}`\n );\n }\n}We will use the HTTP module to call the Rest API so let's add the HttpClientModule in the app.module.ts file.
import { HttpClientModule } from '@angular/common/http';\n...\n\n@NgModule({\n imports: [\n ...\n HttpClientModule\n ...\n ],\n})\nexport class AppModule { }Now let's create a Profile model which will be used for storing the user profile.
Add src/app/profile/profile.ts
export interface Profile {\n Email: {\n Type: string;\n Value: string;\n }[];\n}Lets modify the app-routing.module.ts and add the below Routes in it.
import { NgModule } from '@angular/core';\nimport { RouterModule, Routes } from '@angular/router';\nimport { AppComponent } from './app.component';\nimport { LoginComponent } from './login/login.component';\nimport { ProfileComponent } from './profile/profile.component';\n\nconst routes: Routes = [\n {\n path: 'login',\n component: LoginComponent\n },\n { path: 'profile',\n component: ProfileComponent\n }\n];\n\n@NgModule({\n imports: [RouterModule.forRoot(routes)],\n exports: [RouterModule]\n})\nexport class AppRoutingModule { }Finally, to gather all, we need to modify the app.component.ts and add the routing logic.
import { Component, OnInit } from '@angular/core';\nimport { Router } from '@angular/router';\n@Component({\n selector: 'app-root',\n templateUrl: './app.component.html',\n styleUrls: ['./app.component.scss'],\n})\nexport class AppComponent implements OnInit {\n constructor(private router: Router) {}\n\n ngOnInit() {\n if (window.location.pathname === "/") {\n if (localStorage.getItem('token')) {\n this.router.navigate(['/profile']);\n } else {\n this.router.navigate(['/login']);\n }\n }\n }\n}And add the router-outlet to the app.component.html file.
<router-outlet></router-outlet>\n\nYou can find the full code in github
\n
Run ng serve to start the local server, and you will be able to see the output on locahost:4200.
You can configure the LoginRadius Auth Page by adding social login methods like Facebook, Google, etc. To add the login method, you can use the command lr get social and lr add social command. Check the below image on how to add the social configuration.
After adding, visit the LoginRadius Auth Page either by visiting locahost:4200 and log out. Or using the command lr demo. You will find the new login method added.
LoginRadius Dashboard Support three pre-defined themes for you. You can check out the Theme Customization section in the LoginRadius Dashboard for all the customization options available.
\nYou can also get/set your current theme using LoginRadius CLI by using the commands like lr get theme and lr set theme.
The LoginRadius CLI is opensourced in the LoginRadius Organization and you can contribute to it if you find any bugs or improvement by following the contributing guidelines. You can also checkout our open source page if you wish to contribute more in LoginRadius.
\nWith the help of LoginRadius CLI, you can setup the authentication for your Angular application in just 5 minutes. LoginRadius will take care of all the authentication-related stuff for your application so that you can focus on your application development.
\nI hope you like this tutorial. Kindly provide feedback suggestions in the comment section below.
\nCheers!!!
\n","frontmatter":{"title":"Implement Authentication in Angular 2+ application using LoginRadius CLI in 5 mins","author":{"id":"Mohammed Modi","github":"mohammed786","avatar":null},"date":"April 14, 2021","updated_date":null,"tags":["Authentication","Angular","CLI","LoginRadius CLI"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/7c2ac2ca4ca6e495e226891293c79e92/14b42/angulat_demo_auth.jpg","srcSet":"/static/7c2ac2ca4ca6e495e226891293c79e92/f836f/angulat_demo_auth.jpg 200w,\n/static/7c2ac2ca4ca6e495e226891293c79e92/2244e/angulat_demo_auth.jpg 400w,\n/static/7c2ac2ca4ca6e495e226891293c79e92/14b42/angulat_demo_auth.jpg 800w,\n/static/7c2ac2ca4ca6e495e226891293c79e92/47498/angulat_demo_auth.jpg 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}}},"fields":{"authorId":"Mohammed Modi","slug":"/engineering/implementing-authentication-in-angular-2-plus-with-loginradius-cli/"}}},{"node":{"id":"65ad665b-2a44-53a9-a3d2-a562dc3cea50","html":"I want to explain the inspiration for React Hooks in this walkthrough, what React Hook is and the advantages of hooks, and more. This article covers only an introduction to React Hooks. React Hooks have been introduced in React function components as a way of utilising state and side effects.
\nHave you ever assigned a task to change the functional component which is full of UI and business logic to a Class Component just because the new feature requires the use of state, just to toggle some text colour to red on some events occurred?
\nChances are there if you are a react developer, Hopefully we can solve this using the Hooks.
\nHooks are features that allow you to “hook into” the features of React state and lifecycle from function components. Hooks do not function inside classes. Without classes, they let you use React.
\n\n\nHooks are a new addition in React 16.8. They let you use state and other React features without writing a class.
\n
Dan Abramov has provided a well-rounded introduction to the API, and how and why the framework that many of us use has evolved to where it is now. You can read about it and watch his ReactConf 2018 keynote introducing the hooks proposal.
\nThe key takeaway maybe this:
\n\n\nIf the React community embraces hooks, it will reduce the number of concepts you need to juggle when writing React applications. Hooks let you always use functions instead of having to constantly switch between functions, classes, higher-order components, and render props.
\n
React Hooks enables the functional components to attach the local state to it, so that you can use React functionality without using a class component.
\nAdvantages of react hooks:
\nAs you all know there are two ways to create the React components, one is using the function and other is using the class, there is always a confusion between one v/s other.
\nLet us assume we have a simple class component and then we will convert it to a functional with hooks and see the difference.
\nimport React, { Component } from "react";\nclass Greeting extends Component {\n state = {\n text: "",\n };\n handleChange = (e) => {\n this.setState({ text: e.target.value });\n };\n render() {\n return <input value={this.state.text} onChange={this.handleChange} />;\n }\n}\nexport default Greeting; import React, { useState } from "react";\nexport default () => {\n const [text, setText] = useState("");\n return (\n <input\n value={text}\n onChange={(e) => {\n setText(e.target.value);\n }}\n />\n );\n};\n\nIf you disagree with any of the above, you can play with it in practice. I’m sure that would change your mind!
\n
Let us understand some basic hooks with examples.
\nI will take one example and will explain all the hooks in that example using a various scenarios.
\nimport React, { useState } from 'react';\n\nconst App = () => {\n const [message, setMessage] = useState('Hi there, how are you?');\n\n return <h1>{message}</h1>\n};\n\nexport default App;In this example variable message will save the value Hi there, how are you using the useState() hooks. It will be similar to this code we write in the constructor() of class component.
this.state = {\n message: "Hi there, how are you?"\n}\n\nIf you are wondering about the
\nsetMessage@line 3 then be calm, I will explain later in this tutorial
React useEffect() function can be executed in 3 different React component life cycles that are
Let's understand the useEffect() hook by taking the above example. So let's say I want to change the message 1 second after the component is mounted.
import React, { useState, useEffect } from "react";\n\nconst App = () => {\n const [message, setMessage] = useState("Hi there, how are you?");\n\n useEffect(() => {\n console.log("trigger use effect hook");\n\n setTimeout(() => {\n setMessage("I'm fine, thanks for asking.");\n }, 1000);\n });\n\n return <h1>{message}</h1>;\n};\n\nexport default App;As you can see, In this example we have used the useEffect hook to trigger the setMessage method the change the message variable after 1 second.
But there is one problem, while executing this component you can see that the console.log will trigger twice. The reason is the useEffect hook will by default trigger on change of either state or props similar to the componentDidUpdate method in our class component.
To overcome this kind of case we need to pass the Empty array ([]) as the second argument in the useEffect hooks. So updated code will look like this
\nimport React, { useState, useEffect } from 'react';\n\nconst App = () => {\n const [message, setMessage] = useState('Hi there, how are you?');\n\n useEffect(() => {\n console.log('trigger use effect hook');\n\n setTimeout(() => {\n setMessage("I'm fine, thanks for asking.");\n }, 1000)\n }, []);\n\n return <h1>{message}</h1>\n};\n\nexport default App;The above code means that hook will never be triggered as we have an empty array there, if we want to trigger the hook on a specific variable change of props or state we can add that variable in the array.
For eg : [state.message] here hook will fire on the update of message variable only.
I have covered the two basic and important hooks in this tutorial, there are many more types of hooks available in React, you can find the detailed explanation in the React docs.
\n\n\nWe can use eslint-plugin-react-hooks this eslint plugin that ensures the above two rules.
\n
So, from multiple points of view, we have covered the power of Hooks and seen how we can use controlled state in our Components without utilizing classes.
\nI hope you find this article useful, Happy Reading !!!
\n","frontmatter":{"title":"React Hooks: A Beginners Guide","author":{"id":"Mohammed Modi","github":"mohammed786","avatar":null},"date":"August 07, 2020","updated_date":null,"tags":["React","Hooks"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.36986301369863,"src":"/static/35867498747d433ab6d7d6e31ba37b17/ee604/react-hooks.png","srcSet":"/static/35867498747d433ab6d7d6e31ba37b17/69585/react-hooks.png 200w,\n/static/35867498747d433ab6d7d6e31ba37b17/497c6/react-hooks.png 400w,\n/static/35867498747d433ab6d7d6e31ba37b17/ee604/react-hooks.png 800w,\n/static/35867498747d433ab6d7d6e31ba37b17/f3583/react-hooks.png 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}}},"fields":{"authorId":"Mohammed Modi","slug":"/engineering/react-hooks-guide/"}}},{"node":{"id":"d7159b2f-2bb9-517b-9ef7-132934acbb69","html":"Today we will learn about the progressive web app, a very interesting and trending topic in current times, We will start with the basic steps first on how Progressive Web App works with vanilla js. Also, we’ll cover the concept of PWAS without using any of the frameworks, it's just a plain vanillaJS.
A Progressive Web app is an application which is built on top of HTML, JS and CSS with some extra features like service worker and manifest.json file. These extra features will give the ability to run the web application offline.
Various big companies are moving towards the progressive web app instead of native apps, as it gives some much flexibility to end-users. In some websites you can find the + icon at the right side of the address bar, those are progressive web apps.
\nWe will be using npm to start our project, so firstly create a root folder using this command mkdir first-pwa-app or another name of your choice then go to that directory by using this command cd first-pwa-app. Run npm init
npm init\n\npackage name: (first-pwa-app)\nversion: (1.0.0)\ndescription: This is the first PWA example\nentry point: (index.js): index.html\ntest command:\ngit repository:\nkeywords:\nauthor: Mohammed Modi\nlicense: (ISC)Once you fill up those details your final output of the package.json file will be below
{\n "name": "first-pwa-app",\n "version": "1.0.0",\n "description": "This is the first PWA example",\n "main": "index.html",\n "scripts": {\n "test": "echo \\"Error: no test specified\\" && exit 1"\n },\n "author": "Mohammed Modi",\n "license": "ISC"\n}After that, we need to install the serve dependency to serve the application in localhost so install it using npm npm i serve --save. And then add a script in the package.json file.
{\n ...\n "scripts": {\n "test": "echo \\"Error: no test specified\\" && exit 1",\n "serve": "serve ."\n },\n ...\n}So finally our application is ready to serve in localhost. Now let's add some html and css
Create a directory for the app and add js, css, and images subdirectories. It should look like this when you’re finished:
\n/first-pwa-app # Project Folder\n /css # Stylesheets\n /js # Javascript\n /images # Image files.\n package.json\n package-lock.json\n index.html\n manifest.json\n sw.jsYou will understand the use of manifest.json and sw.js files once we move ahead in this tutorial.
When writing the code for Progressive Web Application we need to keep in mind two requirements
\nFor this app, to handle the first requirement we will add the static text in the Html page and for the second requirement, we will use the viewport.
\nSo let's add this code inside the index.html file.
<!DOCTYPE html>\n<html lang="en">\n <head>\n <meta charset="utf-8" />\n <title>My First PWA</title>\n <link rel="stylesheet" href="css/style.css" />\n <meta name="viewport" content="width=device-width, initial-scale=1.0" />\n </head>\n <body class="fullscreen">\n <div class="container">\n <h1 class="title">My First PWA!</h1>\n </div>\n </body>\n</html>Next, we need to create a file css/style.css and paste this code inside this
body {\n font-family: sans-serif;\n}\n\n/* Make content area fill the entire browser window */\n/* Make content area fill the entire browser window */\nhtml,\n.fullscreen {\n display: flex;\n height: 100%;\n margin: 0;\n padding: 0;\n width: 100%;\n}\n\n/* Center the content in the browser window */\n.container {\n margin: auto;\n}\n\n.title {\n font-size: 3rem;\n}Once you add the code save all the files and run the script npm run serve which will start your application in http://localhost:5000/
As we can see our application is running in the browser, let test it using the LightHouse Extension in Google Chrome browser. For the best result, I recommend testing in an incognito tab of google chrome.
\nAs you can see we have green signals for both of our above requirement:
\nBut still, there is lots of work to do, so let's start with the first feature of PWA's.
\nLet's create a new file called manifest.json in the root of our application. To understand more about the manifest file check out [this doc]
{\n "name": "My First Progressive Web app",\n "short_name": "First PWA",\n "lang": "en-US",\n "start_url": "/index.html",\n "display": "standalone",\n "background_color": "white",\n "theme_color": "white"\n}Now update the index.html head tag by adding the manifest.json file as a link
<head>\n ...\n <link rel="manifest" href="/manifest.json" />\n ...\n</head>We should also declare the theme colour which should match with your manifest.json file as meta tag.
<head>\n ...\n <meta name="theme-color" content="white" />\n ...\n</head>Once you run the lighthouse test again you can see we got green signals in some points like
\npwa-icon-256.png and pwa-icon-256.png for this demo you can find in this repo. You can use various sizes in it. And finally, add the favicon.png in the root of the project.
So let's add the icons attribute after the short-name
{\n "name": "My First Progressive Web app",\n "short_name": "First PWA",\n "icons": [\n {\n "src": ".images/pwa-icon-256.png",\n "sizes": "256x256",\n "type": "image/png"\n },\n {\n "src": ".images/pwa-icon-512.png",\n "sizes": "512x512",\n "type": "image/png"\n }\n ],\n "lang": "en-US",\n "start_url": "/index.html",\n "display": "standalone",\n "background_color": "white",\n "theme_color": "white"\n}And the index.html will head can will look like
\n<head>\n ...\n <link rel="apple-touch-icon" href="images/pwa-icon-256.png" />\n ...\n</head>You can also verify the manifest.json file by opening Chrome DevTools, in the Application Tab, the first tab in the sidebar manifest
After running the test again, we can see all the manifest.json related issues are solved, The remaining issues can be resolved by adding the service worker.
The next requirement of our app will be the service worker. The service worker is a script that runs in the background without any user interaction.
\nThe task of service worker will be to download and cache our content and then serve it when the user is offline. To understand more on service workers you can check this doc from mozilla.
\nTo integrate service workers we need to create a file called sw.js in the root of our project.
\n\nNote: Service worker will only have the access to the files of the current and sub-directories hence we need to place it in the root of our project
\n
let cacheName = "my-first-pwa";\nlet filesToCache = ["/", "/index.html", "/css/style.css", "/js/main.js"];\n\n/* Start the service worker and cache all of the app's content */\nself.addEventListener("install", (e) => {\n e.waitUntil(\n caches.open(cacheName).then(function (cache) {\n return cache.addAll(filesToCache);\n })\n );\n});\n\n/* Serve cached content when offline */\nself.addEventListener("fetch", (e) => {\n e.respondWith(\n caches.match(e.request).then((response) => {\n return response || fetch(e.request);\n })\n );\n});The first 2 variables cacheName and filesToCache are used to create an offline cache in the browser. cacheName is used to create a cache of specific name and filesToCache will be the list of files that we need to cache, / will store the root files that is index.html even if the user does not specify the file name in the URL and then all other files specified in the array.
\n\nNote: Here I have used the
\nfilesToCachearray as a list of static files just to demonstrate the purpose of PWA, it will stop working in production if even one file fails to load.
Finally, we will load our service worker, for that create js/main.js file and copy the below code.
window.onload = () => {\n "use strict";\n\n if ("serviceWorker" in navigator) {\n navigator.serviceWorker.register("./sw.js");\n }\n};And add this script in the index.html file.
...\n<script src="js/main.js"></script>So the final version of our index.html file will look like:
<!DOCTYPE html>\n<html lang="en">\n <head>\n <meta charset="utf-8" />\n <title>Hello World</title>\n <link rel="apple-touch-icon" href="images/pwa-icon-256.png" />\n <link rel="stylesheet" href="css/style.css" />\n <link rel="manifest" href="/manifest.json" />\n <meta name="viewport" content="width=device-width, initial-scale=1.0" />\n <meta name="theme-color" content="white" />\n </head>\n <body class="fullscreen">\n <div class="container">\n <h1 class="title">Hello World!</h1>\n </div>\n <script src="js/main.js"></script>\n </body>\n</html>Now our application is made as fully PWA supported, you can verify it by running the lighthouse test.
\nWe are done with the code, now the last thing remaining in to host it in any of the https domain. As the PWA will be required to run in the secure domain.
You can get the full source code of this example in this Github repo
\nI hope you enjoyed the progressive web apps using vanilla js tutorial and found it useful. Please let me know what you think in the comments below.
\n","frontmatter":{"title":"How to Build a PWA in Vanilla JS","author":{"id":"Mohammed Modi","github":"mohammed786","avatar":null},"date":"June 26, 2020","updated_date":null,"tags":["PWA","JavaScript"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.7699115044247788,"src":"/static/1c496ce8fd476e70f4dbf1a97f08619a/ee604/cover.png","srcSet":"/static/1c496ce8fd476e70f4dbf1a97f08619a/69585/cover.png 200w,\n/static/1c496ce8fd476e70f4dbf1a97f08619a/497c6/cover.png 400w,\n/static/1c496ce8fd476e70f4dbf1a97f08619a/ee604/cover.png 800w,\n/static/1c496ce8fd476e70f4dbf1a97f08619a/f3583/cover.png 1200w,\n/static/1c496ce8fd476e70f4dbf1a97f08619a/e4d72/cover.png 1280w","sizes":"(max-width: 800px) 100vw, 800px"}}}},"fields":{"authorId":"Mohammed Modi","slug":"/engineering/build-pwa-using-vanilla-javascript/"}}},{"node":{"id":"8ea36e93-04d5-54e6-a5d7-7fe5d7dd8707","html":"Deno is a JavaScript/TypeScript runtime with secure defaults and great developer experience. It's built on V8, Rust, and Tokio.\nI suggest you watch these talks by Ryan: He talks about his mistakes with Nodejs here and a more in-depth look into deno here
\nIn this article, we're going to build a simple cli tool to demonstrate some of the features of deno. Our cli will be interacting with a COVID API to fetch live data.
\n\n\nRequirement: make sure you have deno installed. If you don't, refer to this link. It's pretty straightforward.
\n
Deno has the entry file mod.ts so we will follow the same in this article if you are following this article along with the coding you can create a folder named covid-cli, inside that folder you can create a file called mod.ts and copy the below code there.
const { args } = Deno;\nimport { parse } from "https://deno.land/std/flags/mod.ts";\n\nconsole.dir(parse(args));Here the parse(args, options = {}); contains two parameters where args is an Array and options is an object, let try to run the above code using this cmd.
deno run mod.ts arg1 -f hello --flag World --booleanFlagAfter running the above code you will see the output as
\n{ _: [ "arg1" ], f: "hello", flag: "World", booleanFlag: true }\n\nThe first property in the object is always an array containing all arguments that did not have an option associated with them(i.e it doesn't match -f or --flag). If you do not pass a corresponding value to a flag, it defaults to true.
\n
I will be using the this postman doc for all the COVID related API and we will perform the below to action through our CLI.
\nLet's write out the function for our first command, so our mod.ts file will look like this.
const { args } = Deno;\nimport { parse } from "https://deno.land/std/flags/mod.ts";\n\n// flags:\n// -h, --help: display help message\n// -g, --global: display global stats\n// -c, --country: get data of mentioned country\n\nconst BASE_URL: string = "https://api.covid19api.com/"\nconst parsedArgs = parse(args)\n\nasync function getGlobalStats() {\n const res = await fetch(`${BASE_URL}summary`)\n const data = await res.json();\n console.log(data["Global"])\n}Here, we have an async function that returns the data from our API call. We're making a fetch request (yes, deno has browser functionality in-built) to the API endpoint to get the global stat of covid19.
\nThe function for the second command looks very similar, just we need to filter our data only for a particular country which is provided.
\nasync function getCountryStats(country: string) {\n if (country) {\n const res = await fetch(`${BASE_URL}summary`);\n const data = await res.json();\n const index = data["Countries"].findIndex((c: any) => c.Country.toLowerCase() === country.toLowerCase())\n if (index !== -1) {\n console.log(data["Countries"][index])\n } else {\n console.log("Country Not Found")\n }\n } else {\n console.log("Country Name is needed")\n }\n}We will now write our main() function. We have a switch statement to check the first flag that was passed and calls the appropriate function. The default case simply displays a welcome message. Let add the below code in our mod.ts file
async function main() {\n switch (Object.keys(parsedArgs)[1]) {\n case "help":\n case "h":\n console.log(displayHelpMsg());\n break;\n case "global":\n case "g":\n await getGlobalStats();\n break;\n case "country":\n case "c":\n let country = parsedArgs.c || parsedArgs.country || ""\n await getCountryStats(country)\n break;\n default:\n console.log(displayHelpMsg());\n }\n}\n\nmain()And our displayHelpMsg() will look something like this
function displayHelpMsg() {\n return "flags:\\n-h, --help: display help message\\n-g, --global: display global stats\\n-c, --country: get data of mentioned country ";\n}To test our program, we're going to run $ deno run --allow-net mod.ts -g. We should get the following result:
You can build a lot with it, ranging from cli Programs to HTTP servers. Do have a look at one of my blog where I have built a basic calculator app using the abc module.
\n","frontmatter":{"title":"Build A Simple CLI Tool using Deno","author":{"id":"Mohammed Modi","github":"mohammed786","avatar":null},"date":"June 08, 2020","updated_date":null,"tags":["Deno","CLI","Programming"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.7857142857142858,"src":"/static/313a3b2de31b5d15db618e72b377a867/ee604/cli-tool.png","srcSet":"/static/313a3b2de31b5d15db618e72b377a867/69585/cli-tool.png 200w,\n/static/313a3b2de31b5d15db618e72b377a867/497c6/cli-tool.png 400w,\n/static/313a3b2de31b5d15db618e72b377a867/ee604/cli-tool.png 800w,\n/static/313a3b2de31b5d15db618e72b377a867/5493e/cli-tool.png 860w","sizes":"(max-width: 800px) 100vw, 800px"}}}},"fields":{"authorId":"Mohammed Modi","slug":"/engineering/build-a-cli-tool-using-deno/"}}},{"node":{"id":"9ba286db-188f-5465-9ccc-2b0995a25184","html":"Hello, let's create a simple web app using deno, In this blog, I will be using the Deno Third-Party Module called abc for creating a simple web application.
\nI am assuming that you are familiar with the basic setup of deno. If not you can start with basic deno installation from here
\nSo without wasting time Let's jump into the code and write a simple hello world program using the abc module.
\nCreate a file index.ts, and copy the code there.
import { Application } from "https://deno.land/x/abc@v1.0.0-rc10/mod.ts";\n\nconst app = new Application();\n\napp\n .get("/hello", (c) => {\n return "Hello, Abc!";\n })\n .start({ port: 8000 });After saving the file you can run the code using the below cmd
\ndeno run --allow-net=0.0.0.0:8000 index.tsExplanation:\nDeno is secure by default. Therefore, unless you specifically enable it, a deno module has no file, network, or environment access for example. Access to security-sensitive areas or functions requires the use of permissions to be granted to a deno process on the command line.
\n--allow-net=\\<allow-net> Allow network access. You can specify an optional, comma-separated list of domains to provide a whitelist of allowed domains. For more information on the different kind of permissions needed in the deno you can visit Permissions in Demo
Now once you run the above cmd you can see the Hello, Abc! in the browser by redirecting to http://localhost:8000/hello
Now let's try to serve the static file using the abc module. In the above example, app will have lots of different methods that we can use, one of them is static(), it used to serve the static files.
Let us create a folder called public in the root of the project. And inside that create an index.html file. Your index.html will look something like this.
<!doctype html>\n<html>\n <head>\n <title>Deno Web Application</title>\n </head>\n \n <body>\n <div>\n <h1>Deno Web Application</h1>\n </div>\n </body>\n</html>After creating this file let's modify our index.tsx file by adding the below code.
import { Application } from "https://deno.land/x/abc@v1.0.0-rc10/mod.ts";\n\nconst app = new Application();\n\napp\n .get("/hello", (c) => {\n return "Hello World"\n })\n .static("/", "./public")\n .start({ port: 8000 });Explanation:\nAs you can see .static(\"/\", \"./public\") we have added this route / and we are serving our static file using the static() method provided by the abc module.
static() registers a new route with path prefix to serve static files from the provided root directory.
Let's try to run this using the previous cmd that is
\ndeno run --allow-net=0.0.0.0:8000 index.tsOops!! once you try to run this it will compile successfully but when you visit this path\nhttp://localhost:8000/index.html, you will get below error in the browser.
{"statusCode":500,"error":"Internal Server Error","message":"read access to <CWD>, run again with the --allow-read flag"}It's because as we know deno requires the permission to read the file from the system. Hence to run the above cmd with --allow-read flag will solve our problem. So let's use this cmd to compile our index file.
deno run --allow-read --allow-net=0.0.0.0:8000 index.tsAfter successful compile, you will see the output as below.
\nHence after the successful serving of our static file, we can also add js in it. Let start with the basic calculator app for now.
Firstly Let's modify our index.html file and add the below code
<html>\n <head>\n <script src="script.js"></script>\n <link rel="stylesheet" type="text/css" href="style.css">\n </head>\n <!-- create table -->\n <body>\n <div class="title">Deno Calculator App</div>\n <table border="1">\n <tr>\n <td colspan="3"><input type="text" id="result" /></td>\n <!-- clr() function will call clr to clear all value -->\n <td><input type="button" value="c" onclick="clr()" /></td>\n </tr>\n <tr>\n <!-- create button and assign value to each button -->\n <!-- dis("1") will call function dis to display value -->\n <td><input type="button" value="1" onclick="dis('1')" /></td>\n <td><input type="button" value="2" onclick="dis('2')" /></td>\n <td><input type="button" value="3" onclick="dis('3')" /></td>\n <td><input type="button" value="/" onclick="dis('/')" /></td>\n </tr>\n <tr>\n <td><input type="button" value="4" onclick="dis('4')" /></td>\n <td><input type="button" value="5" onclick="dis('5')" /></td>\n <td><input type="button" value="6" onclick="dis('6')" /></td>\n <td><input type="button" value="-" onclick="dis('-')" /></td>\n </tr>\n <tr>\n <td><input type="button" value="7" onclick="dis('7')" /></td>\n <td><input type="button" value="8" onclick="dis('8')" /></td>\n <td><input type="button" value="9" onclick="dis('9')" /></td>\n <td><input type="button" value="+" onclick="dis('+')" /></td>\n </tr>\n <tr>\n <td><input type="button" value="." onclick="dis('.')" /></td>\n <td><input type="button" value="0" onclick="dis('0')" /></td>\n <!-- solve function call function solve to evaluate value -->\n <td><input type="button" value="=" onclick="solve()" /></td>\n <td><input type="button" value="*" onclick="dis('*')" /></td>\n </tr>\n </table>\n </body>\n</html>As you can see the above code we have already imported our js and css inside to so Let's create JS file called script.js and add the following functions in it.
//function that display value\nfunction dis(val) {\n document.getElementById("result").value += val;\n}\n\n//function that evaluates the digit and return result\nfunction solve() {\n let x = document.getElementById("result").value;\n let y = eval(x);\n document.getElementById("result").value = y;\n}\n\n//function that clear the display\nfunction clr() {\n document.getElementById("result").value = "";\n}And also add some css into it by creating style.css file.
.title {\n margin-bottom: 10px;\n text-align: center;\n width: 210px;\n color: #0d8dcf;\n border: solid black 2px;\n}\n\ninput[type="button"] {\n background-color: #0d8dcf;\n color: black;\n border: solid black 2px;\n width: 100%;\n}\n\ninput[type="text"] {\n background-color: white;\n border: solid black 2px;\n width: 100%;\n}Great!!! Our calculator app is now almost ready, let's save all the file and reload the http://localhost:8000/index.html.
You can see our calculator app in the browser like below.
\nIf you'd like to see the full code, the repository is linked here.
\n","frontmatter":{"title":"Creating a Web Application using Deno","author":{"id":"Mohammed Modi","github":"mohammed786","avatar":null},"date":"June 03, 2020","updated_date":null,"tags":["Deno"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.8018018018018018,"src":"/static/f298cd015f4f5a18176173e399b9bd68/14b42/deno.jpg","srcSet":"/static/f298cd015f4f5a18176173e399b9bd68/f836f/deno.jpg 200w,\n/static/f298cd015f4f5a18176173e399b9bd68/2244e/deno.jpg 400w,\n/static/f298cd015f4f5a18176173e399b9bd68/14b42/deno.jpg 800w,\n/static/f298cd015f4f5a18176173e399b9bd68/47498/deno.jpg 1200w,\n/static/f298cd015f4f5a18176173e399b9bd68/ec6c5/deno.jpg 1280w","sizes":"(max-width: 800px) 100vw, 800px"}}}},"fields":{"authorId":"Mohammed Modi","slug":"/engineering/a-webapp-in-deno/"}}}]},"authorYaml":{"id":"Mohammed Modi","bio":"Mohammed Modi is a software developer at LoginRadius and have an experience in working in most of the javascript framework including React, NodeJS, Angular etc.","github":"mohammed786","stackoverflow":"5688477","linkedin":"mohammed-modi-2016307a","medium":"@mohammedmodi","twitter":"momscoolguy","avatar":null}},"pageContext":{"id":"Mohammed Modi","__params":{"id":"mohammed-modi"}}},"staticQueryHashes":["1171199041","1384082988","2100481360","23180105","528864852"]}