{"@attributes":{"version":"2.0"},"channel":{"title":"DEV Community: Francis Sunday","description":"The latest articles on DEV Community by Francis Sunday (@codehakase).","link":"https:\/\/dev.to\/codehakase","image":{"url":"https:\/\/media2.dev.to\/dynamic\/image\/width=90,height=90,fit=cover,gravity=auto,format=auto\/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F26692%2F51245c26-62f1-4723-b342-c61209b818b2.jpeg","title":"DEV Community: Francis Sunday","link":"https:\/\/dev.to\/codehakase"},"language":"en","item":[{"title":"Building Small Containers for Kubernetes","pubDate":"Sun, 02 Dec 2018 20:06:40 +0000","link":"https:\/\/dev.to\/codehakase\/building-small-containers-for-kubernetes-290j","guid":"https:\/\/dev.to\/codehakase\/building-small-containers-for-kubernetes-290j","description":"<blockquote>\n<p>This is a cross post. Original post can be found on my <a href=\"https:\/\/hakaselogs.me\" rel=\"noopener noreferrer\">Blog<\/a><\/p>\n<\/blockquote>\n\n<p>The first step to deploying any app to <a href=\"https:\/\/kubernetes.io\" rel=\"noopener noreferrer\">Kubernetes<\/a>, is to bundle the app in a container. There are several official, and community-backed container images for various languages and distros, and most of these containers can be really large, or sometimes contain overheads your app may never need\/use.<\/p>\n\n<p>Thanks to <a href=\"https:\/\/docker.io\" rel=\"noopener noreferrer\">Docker<\/a>, you can easily create container images in a few steps; specify a base image, add your app-specific changes, and build your container.<br>\n<\/p>\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight docker\"><code><span class=\"k\">FROM<\/span><span class=\"s\"> golang:alpine<\/span>\n\n<span class=\"k\">WORKDIR<\/span><span class=\"s\"> \/app<\/span>\n\n<span class=\"k\">ADD<\/span><span class=\"s\"> . \/app<\/span>\n\n<span class=\"k\">EXPOSE<\/span><span class=\"s\"> 8080<\/span>\n\n<span class=\"k\">ENTRYPOINT<\/span><span class=\"s\"> [\"\/app\/run\"]<\/span>\n<\/code><\/pre>\n\n<\/div>\n\n\n\n<p>We specified a base image (Linux alpine in this case), set the working directory to be used in the container, exposed a network port, and an entry point, which will start the app in the container. With the Dockerfile set, we can build the container.<br>\n<\/p>\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code><span class=\"nv\">$ <\/span>docker build myapp <span class=\"nb\">.<\/span>\n<\/code><\/pre>\n\n<\/div>\n\n\n\n<p>While the above process is pretty straight forward, there are some issues to put into consideration. Using the default images can lead to large container images, security vulnerabilities, and memory overheads.<\/p>\n\n<h4>\n  \n  \n  Let's flesh out a sample app\n<\/h4>\n\n<p>We'll write a simple app in Go, that exposes a single HTTP route that returns a string when hit. We will build a Docker image from it.<br>\n<\/p>\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight go\"><code><span class=\"k\">package<\/span> <span class=\"n\">main<\/span>\n\n<span class=\"k\">import<\/span> <span class=\"p\">(<\/span>\n    <span class=\"s\">\"fmt\"<\/span>\n    <span class=\"s\">\"log\"<\/span>\n    <span class=\"s\">\"net\/http\"<\/span>\n    <span class=\"s\">\"time\"<\/span>\n<span class=\"p\">)<\/span>\n\n<span class=\"k\">func<\/span> <span class=\"n\">main<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n    <span class=\"n\">r<\/span> <span class=\"o\">:=<\/span> <span class=\"n\">http<\/span><span class=\"o\">.<\/span><span class=\"n\">NewServeMux<\/span><span class=\"p\">()<\/span>\n    <span class=\"n\">r<\/span><span class=\"o\">.<\/span><span class=\"n\">HandleFunc<\/span><span class=\"p\">(<\/span><span class=\"s\">\"\/api\/\"<\/span><span class=\"p\">,<\/span> <span class=\"k\">func<\/span><span class=\"p\">(<\/span><span class=\"n\">w<\/span> <span class=\"n\">http<\/span><span class=\"o\">.<\/span><span class=\"n\">ResponseWriter<\/span><span class=\"p\">,<\/span> <span class=\"n\">r<\/span> <span class=\"o\">*<\/span><span class=\"n\">http<\/span><span class=\"o\">.<\/span><span class=\"n\">Request<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n        <span class=\"n\">fmt<\/span><span class=\"o\">.<\/span><span class=\"n\">Fprintf<\/span><span class=\"p\">(<\/span><span class=\"n\">w<\/span><span class=\"p\">,<\/span> <span class=\"s\">\"Hello From Go!\"<\/span><span class=\"p\">)<\/span>\n    <span class=\"p\">})<\/span>\n    <span class=\"n\">s<\/span> <span class=\"o\">:=<\/span> <span class=\"o\">&amp;<\/span><span class=\"n\">http<\/span><span class=\"o\">.<\/span><span class=\"n\">Server<\/span><span class=\"p\">{<\/span>\n        <span class=\"n\">Addr<\/span><span class=\"o\">:<\/span>        <span class=\"s\">\":8080\"<\/span><span class=\"p\">,<\/span>\n        <span class=\"n\">Handler<\/span><span class=\"o\">:<\/span>     <span class=\"n\">r<\/span><span class=\"p\">,<\/span>\n        <span class=\"n\">ReadTimeout<\/span><span class=\"o\">:<\/span> <span class=\"m\">10<\/span> <span class=\"o\">*<\/span> <span class=\"n\">time<\/span><span class=\"o\">.<\/span><span class=\"n\">Second<\/span><span class=\"p\">,<\/span>\n    <span class=\"p\">}<\/span>\n    <span class=\"n\">fmt<\/span><span class=\"o\">.<\/span><span class=\"n\">Println<\/span><span class=\"p\">(<\/span><span class=\"s\">\"Starting server on port 8080\"<\/span><span class=\"p\">)<\/span>\n    <span class=\"n\">log<\/span><span class=\"o\">.<\/span><span class=\"n\">Fatal<\/span><span class=\"p\">(<\/span><span class=\"n\">s<\/span><span class=\"o\">.<\/span><span class=\"n\">ListenAndServe<\/span><span class=\"p\">())<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n\n<\/div>\n\n\n\n<p>Let's build the Docker image with our app. First, we need to create a Dockerfile.<br>\n<\/p>\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight docker\"><code><span class=\"k\">FROM<\/span><span class=\"s\"> golang:latest<\/span>\n\n<span class=\"k\">RUN <\/span><span class=\"nb\">mkdir<\/span> \/app\n<span class=\"k\">ADD<\/span><span class=\"s\"> . \/app\/<\/span>\n<span class=\"k\">WORKDIR<\/span><span class=\"s\"> \/app<\/span>\n<span class=\"k\">RUN <\/span>go build <span class=\"nt\">-o<\/span> myapp .\n\n<span class=\"k\">CMD<\/span><span class=\"s\"> [\"\/app\/myapp\"]<\/span>\n<\/code><\/pre>\n\n<\/div>\n\n\n\n<p>Build the image.<\/p>\n\n<blockquote>\n<p>PS: Replace tag with anything of choice: \/appname<br>\n<\/p>\n<\/blockquote>\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code><span class=\"nv\">$ <\/span>docker build <span class=\"nt\">-t<\/span> codehakase\/goapp <span class=\"nb\">.<\/span>\n<\/code><\/pre>\n\n<\/div>\n\n\n\n<p>That's it! We just Dockerized a simple Go app. Let's take a look at the image we<br>\njust built.<br>\n<a href=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fu0zdsca0l82itykuekm8.png\" class=\"article-body-image-wrapper\"><img src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fu0zdsca0l82itykuekm8.png\" alt=\"docker images list\" width=\"800\" height=\"83\"><\/a><\/p>\n\n<p>For a simple Go app, the image is over 700 megabytes. The Go binary itself is<br>\nprobably a few megabytes in size, and the additional overhead is wasted space,<br>\nand can also be a hiding place for bugs and security vulnerabilities.<\/p>\n\n<p>What is taking up so much space? In this scenario, the container needs Go<br>\ninstalled, along with all the dependencies Go relies on, and all of this sits on<br>\ntop of a Debian or Linux distro.<\/p>\n\n<p>There are two ways to reduce container image sizes, actually three of which the<br>\nthird is more often used in the Go community:<\/p>\n\n<ol>\n<li>Using Small Base Images<\/li>\n<li>The Builder Pattern<\/li>\n<li>Using Empty Images<\/li>\n<\/ol>\n\n<p>Using small base images are the easiest way to reduce container image size. The<br>\nstack\/language in use probably provides an official image that's much smaller<br>\nthan the default image.<\/p>\n\n<p>Let's update the Dockerfile to use a small base image. We're going to use<br>\n<code>golang:alpine<\/code> in this case.<br>\n<\/p>\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight docker\"><code><span class=\"k\">FROM<\/span><span class=\"s\"> golang:alpine<\/span>\n\n<span class=\"k\">RUN <\/span><span class=\"nb\">mkdir<\/span> \/app\n<span class=\"k\">ADD<\/span><span class=\"s\"> . \/app\/<\/span>\n<span class=\"k\">WORKDIR<\/span><span class=\"s\"> \/app<\/span>\n<span class=\"k\">RUN <\/span>go build <span class=\"nt\">-o<\/span> myapp .\n\n<span class=\"k\">CMD<\/span><span class=\"s\"> [\"\/app\/myapp\"]<\/span>\n<\/code><\/pre>\n\n<\/div>\n\n\n\n<p>Rebuild image.<br>\n<\/p>\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code><span class=\"nv\">$ <\/span>docker build <span class=\"nt\">-t<\/span> codehakase\/goapp <span class=\"nb\">.<\/span>\n<\/code><\/pre>\n\n<\/div>\n\n\n\n<p>With the update to the Dockerfile, our image is now smaller compared to the<br>\nprevious image.<br>\n<a href=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7bncjz4evrn5riy227px.png\" class=\"article-body-image-wrapper\"><img src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7bncjz4evrn5riy227px.png\" alt=\"using small base images\" width=\"800\" height=\"100\"><\/a><\/p>\n\n<p>This image size if still quite large, and we can even go smaller using the<br>\nBuilder Pattern. Since we're using a compiled language (Go) in this example, in<br>\nthe builder pattern, we should note that compiled languages often requires tools<br>\nthat are not necessarily needed to run the code. These tools are mostly for<br>\nbuilding and compiling to a binary. With the builder pattern, we can remove<br>\nthese tools in the final container.<\/p>\n\n<p>To use the Builder pattern in our existing example, we'll compile our code in a<br>\ncontainer, and then use the compiled code to package the final container, without<br>\nall the required tools.<br>\n<\/p>\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight docker\"><code><span class=\"k\">FROM<\/span><span class=\"w\"> <\/span><span class=\"s\">golang:alpine<\/span><span class=\"w\"> <\/span><span class=\"k\">AS<\/span><span class=\"w\"> <\/span><span class=\"s\">main-env<\/span>\n<span class=\"k\">RUN <\/span><span class=\"nb\">mkdir<\/span> \/app\n<span class=\"k\">ADD<\/span><span class=\"s\"> . \/app\/<\/span>\n<span class=\"k\">WORKDIR<\/span><span class=\"s\"> \/app<\/span>\n<span class=\"k\">RUN <\/span><span class=\"nb\">cd<\/span> \/app <span class=\"o\">&amp;&amp;<\/span> go build <span class=\"nt\">-o<\/span> myapp\n\n<span class=\"k\">FROM<\/span><span class=\"s\"> alpine<\/span>\n<span class=\"k\">WORKDIR<\/span><span class=\"s\"> \/app<\/span>\n<span class=\"k\">COPY<\/span><span class=\"s\"> --from=main-env \/app\/myapp \/app<\/span>\n<span class=\"k\">EXPOSE<\/span><span class=\"s\"> 8080<\/span>\n\n<span class=\"k\">ENTRYPOINT<\/span><span class=\"s\"> .\/myapp<\/span>\n<\/code><\/pre>\n\n<\/div>\n\n\n\n<p>We updated the Dockerfile to use the builder pattern. First, it builds and<br>\ncompiles the app in the <code>alpine<\/code> container and name the step <code>main-env<\/code>, and<br>\nthen copies the binary from the previous step to the new container.<\/p>\n\n<p>Rebuild the multistage Dockerfile.<br>\n<\/p>\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code><span class=\"nv\">$ <\/span>docker build <span class=\"nt\">-t<\/span> codehakase\/goapp <span class=\"nb\">.<\/span>\n<\/code><\/pre>\n\n<\/div>\n\n\n\n<p>The result of the build is a new container which is just a little over 10<br>\nmegabytes.<br>\n<a href=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F6jwgbchoabylpj9elqlz.png\" class=\"article-body-image-wrapper\"><img src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F6jwgbchoabylpj9elqlz.png\" alt=\"builder pattern\" width=\"800\" height=\"143\"><\/a><\/p>\n\n<p>Remember the first image we built that was over 700 megabytes? We've been able<br>\nto cut that down to 10.7 megabytes using the builder pattern.<\/p>\n\n<p>We can still reduce this number a bit, by making use of scratch (empty)<br>\nimages. What's a scratch image? It's a special docker image that's empty. To use<br>\nthis, we need to first build our app outside the docker environment and add the<br>\ncompiled binary to the container.<br>\n<\/p>\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code><span class=\"nv\">$ <\/span>go build <span class=\"nt\">-o<\/span> myapp <span class=\"nb\">.<\/span>\n<\/code><\/pre>\n\n<\/div>\n\n\n\n<p>We'll update the Dockerfile to add the binary to a scratch image.<br>\n<\/p>\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight docker\"><code><span class=\"k\">FROM<\/span><span class=\"s\"> scratch<\/span>\n<span class=\"k\">ADD<\/span><span class=\"s\"> myapp \/<\/span>\n<span class=\"k\">CMD<\/span><span class=\"s\"> [\"\/myapp\"]<\/span>\n<\/code><\/pre>\n\n<\/div>\n\n\n\n<p>Let's build this image and see how large it turns out.<br>\n<a href=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvc4jpwn266pmrafzcgcp.png\" class=\"article-body-image-wrapper\"><img src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvc4jpwn266pmrafzcgcp.png\" alt=\"scratch image\" width=\"800\" height=\"170\"><\/a><\/p>\n\n<p>We got it down to 6.5 megabytes, cool! Let's try running our container to test<br>\nour app.<br>\n<\/p>\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code><span class=\"nv\">$ <\/span>docker run <span class=\"nt\">-it<\/span> codehakase\/goapp\n<\/code><\/pre>\n\n<\/div>\n\n\n\n<p>You may get an error like this:<br>\n<a href=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fm12mvv7fcfdkd5zsb0e3.png\" class=\"article-body-image-wrapper\"><img src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fm12mvv7fcfdkd5zsb0e3.png\" width=\"800\" height=\"77\"><\/a><\/p>\n\n<p>Reason for this error, is the Go binary is looking for libraries on the OS its<br>\nrunning on, since the scratch image is empty, there are no libraries to look in.<br>\nWe need to modify the build command to statically compile our Go app:<br>\n<\/p>\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code><span class=\"nv\">$ GO_ENABLED<\/span><span class=\"o\">=<\/span>0 <span class=\"nv\">GOOS<\/span><span class=\"o\">=<\/span>linux go build <span class=\"nt\">-a<\/span> <span class=\"nt\">-installsuffix<\/span> cgo <span class=\"nt\">-o<\/span> myapp <span class=\"nb\">.<\/span>\n<\/code><\/pre>\n\n<\/div>\n\n\n\n<p>Rebuild with <code>docker build -t codehakase\/goapp<\/code>, and run the our container<br>\nagain, forwarding the port on the container to our machine:<br>\n<\/p>\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code><span class=\"nv\">$ <\/span>docker run <span class=\"nt\">-it<\/span> <span class=\"nt\">-p<\/span> 8080:8080 codehakase\/goapp\n  Starting server on port 8080\n<\/code><\/pre>\n\n<\/div>\n\n\n\n<p>Navigate to <code>http:\/\/localhost:8080\/api<\/code> to test the response from the app.<\/p>\n\n<h3>\n  \n  \n  Conclusion\n<\/h3>\n\n<p>The goal of this article was to explain how to reduce container sizes<br>\nspecifically for Go apps. With smaller containers, you have more performance, as<br>\nbuilding your containers say in a CI environment is going to be faster, pushing<br>\nyour built images to a container registry will take less amount of time, and<br>\nmost importantly pulling these containers to your distributed kubernetes<br>\nclusters will be faster, as smaller containers are less likely to delay a<br>\ndeployment for a new cluster.<\/p>\n\n<p>If you have any suggestions or comments, leave a comment below or ping<br>\n<a href=\"https:\/\/twitter.com\/codehakase\" rel=\"noopener noreferrer\">@codehakase<\/a><\/p>\n\n","category":["kubernetes","go","docker","webdev"]},{"title":"Live coding streams recommendations?","pubDate":"Tue, 18 Sep 2018 15:11:27 +0000","link":"https:\/\/dev.to\/codehakase\/live-coding-streams-recommendations-31o9","guid":"https:\/\/dev.to\/codehakase\/live-coding-streams-recommendations-31o9","description":"<p>Hello!<\/p>\n\n<p>I've been searching, and following up with some live coding streams on youtube and twitch, specifically targeted towards backend engineering and devops. I'd like to get your recommendations so I check them out also.<\/p>\n\n<p>Thanks!<\/p>\n\n","category":["discuss","livecoding","backend","devops"]},{"title":"Explain Meta Programming Like I'm Five","pubDate":"Sat, 21 Apr 2018 17:40:13 +0000","link":"https:\/\/dev.to\/codehakase\/explain-meta-programming-like-im-five-j6c","guid":"https:\/\/dev.to\/codehakase\/explain-meta-programming-like-im-five-j6c","description":"<p>What it is, it's benefits, where it comes to play.<\/p>\n\n","category":"explainlikeimfive"},{"title":"Building a Web App With Go, Gin and React","pubDate":"Sat, 21 Apr 2018 16:44:48 +0000","link":"https:\/\/dev.to\/codehakase\/building-a-web-app-with-go-gin-and-react-5ke","guid":"https:\/\/dev.to\/codehakase\/building-a-web-app-with-go-gin-and-react-5ke","description":"<blockquote>\n<p>This article was originally posted on <a href=\"https:\/\/hakaselogs.me\/2018-04-20\/building-a-web-app-with-go-gin-and-react\" rel=\"noopener noreferrer\">My Blog<\/a><\/p>\n<\/blockquote>\n\n<p><strong>TL;DR:<\/strong> In this tutorial, I'll show you how easy it is to build a web application with Go and the Gin framework and add authentication to it. Check out the Github <a href=\"https:\/\/github.com\/codehakase\/golang-gin\" rel=\"noopener noreferrer\">repo<\/a> for the code we're going to write.<\/p>\n\n\n\n\n<p><strong>Gin<\/strong> is a high-performance micro-framework that delivers a very minimalistic framework that carries with it only the most essential features, libraries, and functionalities needed to build web applications and microservices. It makes it simple to build a request handling pipeline from modular, reusable pieces. It does this by allowing you to write middleware that can be plugged into one or more request handlers or groups of request handlers.<\/p>\n\n<h2>\n  \n  \n  Gin Features\n<\/h2>\n\n<p>Gin is a fast, simple yet fully featured and very efficient web framework for Go. Check out some of the features below that makes it a worthy framework to consider for your next Golang project.<\/p>\n\n<ul>\n<li>\n<strong>Speed:<\/strong> Gin is built for speed. The framework offers a Radix tree based routing, small memory foot print. No reflection. Predictable API performance.<\/li>\n<li>\n<strong>Crash-Free<\/strong>:  Gin has the capability of catching crashes or panics during runtime, and can recover from it, this way your application will be always available.<\/li>\n<li>\n<strong>Routing:<\/strong> Gin provides a routing interface to allow you express how your web application or API routes should look.<\/li>\n<li>\n<strong>JSON Validation:<\/strong> Gin can parse and validate the JSON requests easily, checking for the existence of required values.<\/li>\n<li>\n<strong>Error Management:<\/strong> Gin provides a convenient way to collect all the errors occurred during a HTTP request. Eventually, a middleware can write them to a log file, to a database and send them through the network.<\/li>\n<li>\n<strong>Built-In Rendering:<\/strong> Gin provides an easy to use API for JSON, XML, and HTML rendering.<\/li>\n<\/ul>\n\n<h2>\n  \n  \n  Prerequisites\n<\/h2>\n\n<p>To follow along with this tutorial, you'll need to have Go installed on your machine, a web browser to view the app, and a command line to execute build commands.<\/p>\n\n<p><strong>Go<\/strong> or as its normally called; <em>\"Golang\"<\/em>, is a programming language developed by Google for building modern software. Go is a language designed to get stuff done efficiently and fast. The key benefits of Go include:<\/p>\n\n<ul>\n<li>  Strongly typed and garbage collected<\/li>\n<li>  Blazing fast compile times<\/li>\n<li>  Concurrency built in<\/li>\n<li>  Extensive standard library<\/li>\n<\/ul>\n\n<p>Head over to the <a href=\"https:\/\/golang.org\/dl\/\" rel=\"noopener noreferrer\">downloads section<\/a> of the Go website, to get Go running on your machine.<\/p>\n\n<h2>\n  \n  \n  Building An App With Gin\n<\/h2>\n\n<p>We'll be building a simple joke listing app with <strong>Gin<\/strong>. Our app will simply list some silly dad jokes. We are going to add authentication to it, all logged-in users will have the privilege to like and view jokes.<\/p>\n\n<p>This will allow us illustrate how <strong>Gin<\/strong> can be used to develop web applications, and\/or APIs.<\/p>\n\n<p><a href=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fg7jb4yc6epgvyxoo8gr9.png\" class=\"article-body-image-wrapper\"><img src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fg7jb4yc6epgvyxoo8gr9.png\" alt=\"golang-gin-demo-shot\" width=\"800\" height=\"453\"><\/a><\/p>\n\n<p>We'll be making use of the following functionalities offered by Gin:<\/p>\n\n<ul>\n<li>Middleware<\/li>\n<li>Routing<\/li>\n<li>Routes Grouping<\/li>\n<\/ul>\n\n<h3>\n  \n  \n  Ready, Set, Go\n<\/h3>\n\n<p>We will write our entire Go application in a <code>main.go<\/code> file. Since its a small application, its going to be easy to build the application with just  <code>go run<\/code> from the terminal.<\/p>\n\n<p>We'll create a new directory <code>golang-gin<\/code> in our Go workspace, and then a <code>main.go<\/code> file in it:<br>\n<\/p>\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code><span class=\"nv\">$ <\/span><span class=\"nb\">mkdir<\/span> <span class=\"nt\">-p<\/span> <span class=\"nv\">$GOPATH<\/span>\/src\/github.com\/user\/golang-gin\n<span class=\"nv\">$ <\/span><span class=\"nb\">cd<\/span> <span class=\"nv\">$GOPATH<\/span>\/src\/github.com\/user\/golang-gin\n<span class=\"nv\">$ <\/span><span class=\"nb\">touch <\/span>main.go\n<\/code><\/pre>\n\n<\/div>\n\n\n\n<p>The content of the <code>main.go<\/code> file:<br>\n<\/p>\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight go\"><code><span class=\"k\">package<\/span> <span class=\"n\">main<\/span>\n\n<span class=\"k\">import<\/span> <span class=\"p\">(<\/span>\n  <span class=\"s\">\"net\/http\"<\/span>\n\n  <span class=\"s\">\"github.com\/gin-gonic\/contrib\/static\"<\/span>\n  <span class=\"s\">\"github.com\/gin-gonic\/gin\"<\/span>\n<span class=\"p\">)<\/span>\n\n<span class=\"k\">func<\/span> <span class=\"n\">main<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n  <span class=\"c\">\/\/ Set the router as the default one shipped with Gin<\/span>\n  <span class=\"n\">router<\/span> <span class=\"o\">:=<\/span> <span class=\"n\">gin<\/span><span class=\"o\">.<\/span><span class=\"n\">Default<\/span><span class=\"p\">()<\/span>\n\n  <span class=\"c\">\/\/ Serve frontend static files<\/span>\n  <span class=\"n\">router<\/span><span class=\"o\">.<\/span><span class=\"n\">Use<\/span><span class=\"p\">(<\/span><span class=\"n\">static<\/span><span class=\"o\">.<\/span><span class=\"n\">Serve<\/span><span class=\"p\">(<\/span><span class=\"s\">\"\/\"<\/span><span class=\"p\">,<\/span> <span class=\"n\">static<\/span><span class=\"o\">.<\/span><span class=\"n\">LocalFile<\/span><span class=\"p\">(<\/span><span class=\"s\">\".\/views\"<\/span><span class=\"p\">,<\/span> <span class=\"no\">true<\/span><span class=\"p\">)))<\/span>\n\n  <span class=\"c\">\/\/ Setup route group for the API<\/span>\n  <span class=\"n\">api<\/span> <span class=\"o\">:=<\/span> <span class=\"n\">router<\/span><span class=\"o\">.<\/span><span class=\"n\">Group<\/span><span class=\"p\">(<\/span><span class=\"s\">\"\/api\"<\/span><span class=\"p\">)<\/span>\n  <span class=\"p\">{<\/span>\n    <span class=\"n\">api<\/span><span class=\"o\">.<\/span><span class=\"n\">GET<\/span><span class=\"p\">(<\/span><span class=\"s\">\"\/\"<\/span><span class=\"p\">,<\/span> <span class=\"k\">func<\/span><span class=\"p\">(<\/span><span class=\"n\">c<\/span> <span class=\"o\">*<\/span><span class=\"n\">gin<\/span><span class=\"o\">.<\/span><span class=\"n\">Context<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n      <span class=\"n\">c<\/span><span class=\"o\">.<\/span><span class=\"n\">JSON<\/span><span class=\"p\">(<\/span><span class=\"n\">http<\/span><span class=\"o\">.<\/span><span class=\"n\">StatusOK<\/span><span class=\"p\">,<\/span> <span class=\"n\">gin<\/span><span class=\"o\">.<\/span><span class=\"n\">H<\/span> <span class=\"p\">{<\/span>\n        <span class=\"s\">\"message\"<\/span><span class=\"o\">:<\/span> <span class=\"s\">\"pong\"<\/span><span class=\"p\">,<\/span>\n      <span class=\"p\">})<\/span>\n    <span class=\"p\">})<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"c\">\/\/ Start and run the server<\/span>\n  <span class=\"n\">router<\/span><span class=\"o\">.<\/span><span class=\"n\">Run<\/span><span class=\"p\">(<\/span><span class=\"s\">\":3000\"<\/span><span class=\"p\">)<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n\n<\/div>\n\n\n\n<p>We'll need to create some more directories for our static files. In the same directory as the <code>main.go<\/code> file, let's create a <code>views<\/code> folder. In the <code>views<\/code> folder, create a <code>js<\/code> folder and an <code>index.html<\/code> file in it.<\/p>\n\n<p>The <code>index.html<\/code> file will be very simple for now:<br>\n<\/p>\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight html\"><code><span class=\"cp\">&lt;!DOCTYPE html&gt;<\/span>\n<span class=\"nt\">&lt;html&gt;<\/span>\n<span class=\"nt\">&lt;head&gt;<\/span>\n  <span class=\"nt\">&lt;title&gt;<\/span>Jokeish App<span class=\"nt\">&lt;\/title&gt;<\/span>\n<span class=\"nt\">&lt;\/head&gt;<\/span>\n\n<span class=\"nt\">&lt;body&gt;<\/span>\n  <span class=\"nt\">&lt;h1&gt;<\/span>Welcome to the Jokeish App<span class=\"nt\">&lt;\/h1&gt;<\/span>\n<span class=\"nt\">&lt;\/body&gt;<\/span>\n<span class=\"nt\">&lt;\/html&gt;<\/span>\n<\/code><\/pre>\n\n<\/div>\n\n\n\n<p>Before we test what we have to far, let's install the added dependencies:<br>\n<\/p>\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code><span class=\"nv\">$ <\/span>go get <span class=\"nt\">-u<\/span> github.com\/gin-gonic\/gin\n<span class=\"nv\">$ <\/span>go get <span class=\"nt\">-u<\/span> github.com\/gin-gonic\/contrib\/static\n<\/code><\/pre>\n\n<\/div>\n\n\n\n<p>To see what's working, we'll need to start our server by running <code>go run main.go<\/code>.<\/p>\n\n<p><a href=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2pjazfuf3e7iwqua9jg4.png\" class=\"article-body-image-wrapper\"><img src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2pjazfuf3e7iwqua9jg4.png\" alt=\"go-gin-gorun-1\" width=\"800\" height=\"507\"><\/a><\/p>\n\n<p>Once the application is running, navigate to <code>http:\/\/localhost:3000<\/code> in your browser. If all went well, you should see level 1 header text <strong>Welcome to the Jokeish App<\/strong> displayed.<\/p>\n\n<p><a href=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fum8zczqw10ug0wucicht.png\" class=\"article-body-image-wrapper\"><img src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fum8zczqw10ug0wucicht.png\" alt=\"golang-welcome-de\" width=\"800\" height=\"308\"><\/a><\/p>\n\n<h3>\n  \n  \n  Defining The API\n<\/h3>\n\n<p>Let's add some more code in our <code>main.go<\/code> file, for our API definitions. We'll update our <code>main<\/code> function with two routes <code>\/jokes\/<\/code> and <code>\/jokes\/like\/:jokeID<\/code>, to the route group <code>\/api\/<\/code>.<br>\n<\/p>\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight go\"><code><span class=\"k\">func<\/span> <span class=\"n\">main<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n  <span class=\"c\">\/\/ ... leave the code above untouched...<\/span>\n\n  <span class=\"c\">\/\/ Our API will consit of just two routes<\/span>\n  <span class=\"c\">\/\/ \/jokes - which will retrieve a list of jokes a user can see<\/span>\n  <span class=\"c\">\/\/ \/jokes\/like\/:jokeID - which will capture likes sent to a particular joke<\/span>\n  <span class=\"n\">api<\/span><span class=\"o\">.<\/span><span class=\"n\">GET<\/span><span class=\"p\">(<\/span><span class=\"s\">\"\/jokes\"<\/span><span class=\"p\">,<\/span> <span class=\"n\">JokeHandler<\/span><span class=\"p\">)<\/span>\n  <span class=\"n\">api<\/span><span class=\"o\">.<\/span><span class=\"n\">POST<\/span><span class=\"p\">(<\/span><span class=\"s\">\"\/jokes\/like\/:jokeID\"<\/span><span class=\"p\">,<\/span> <span class=\"n\">LikeJoke<\/span><span class=\"p\">)<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"c\">\/\/ JokeHandler retrieves a list of available jokes<\/span>\n<span class=\"k\">func<\/span> <span class=\"n\">JokeHandler<\/span><span class=\"p\">(<\/span><span class=\"n\">c<\/span> <span class=\"o\">*<\/span><span class=\"n\">gin<\/span><span class=\"o\">.<\/span><span class=\"n\">Context<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n  <span class=\"n\">c<\/span><span class=\"o\">.<\/span><span class=\"n\">Header<\/span><span class=\"p\">(<\/span><span class=\"s\">\"Content-Type\"<\/span><span class=\"p\">,<\/span> <span class=\"s\">\"application\/json\"<\/span><span class=\"p\">)<\/span>\n  <span class=\"n\">c<\/span><span class=\"o\">.<\/span><span class=\"n\">JSON<\/span><span class=\"p\">(<\/span><span class=\"n\">http<\/span><span class=\"o\">.<\/span><span class=\"n\">StatusOK<\/span><span class=\"p\">,<\/span> <span class=\"n\">gin<\/span><span class=\"o\">.<\/span><span class=\"n\">H<\/span> <span class=\"p\">{<\/span>\n    <span class=\"s\">\"message\"<\/span><span class=\"o\">:<\/span><span class=\"s\">\"Jokes handler not implemented yet\"<\/span><span class=\"p\">,<\/span>\n  <span class=\"p\">})<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"c\">\/\/ LikeJoke increments the likes of a particular joke Item<\/span>\n<span class=\"k\">func<\/span> <span class=\"n\">LikeJoke<\/span><span class=\"p\">(<\/span><span class=\"n\">c<\/span> <span class=\"o\">*<\/span><span class=\"n\">gin<\/span><span class=\"o\">.<\/span><span class=\"n\">Context<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n  <span class=\"n\">c<\/span><span class=\"o\">.<\/span><span class=\"n\">Header<\/span><span class=\"p\">(<\/span><span class=\"s\">\"Content-Type\"<\/span><span class=\"p\">,<\/span> <span class=\"s\">\"application\/json\"<\/span><span class=\"p\">)<\/span>\n  <span class=\"n\">c<\/span><span class=\"o\">.<\/span><span class=\"n\">JSON<\/span><span class=\"p\">(<\/span><span class=\"n\">http<\/span><span class=\"o\">.<\/span><span class=\"n\">StatusOK<\/span><span class=\"p\">,<\/span> <span class=\"n\">gin<\/span><span class=\"o\">.<\/span><span class=\"n\">H<\/span> <span class=\"p\">{<\/span>\n    <span class=\"s\">\"message\"<\/span><span class=\"o\">:<\/span><span class=\"s\">\"LikeJoke handler not implemented yet\"<\/span><span class=\"p\">,<\/span>\n  <span class=\"p\">})<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n\n<\/div>\n\n\n\n<p>The content of the <code>main.go<\/code> file, should look like this:<br>\n<\/p>\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight go\"><code><span class=\"k\">package<\/span> <span class=\"n\">main<\/span>\n\n<span class=\"k\">import<\/span> <span class=\"p\">(<\/span>\n  <span class=\"s\">\"net\/http\"<\/span>\n\n  <span class=\"s\">\"github.com\/gin-gonic\/contrib\/static\"<\/span>\n  <span class=\"s\">\"github.com\/gin-gonic\/gin\"<\/span>\n<span class=\"p\">)<\/span>\n\n<span class=\"k\">func<\/span> <span class=\"n\">main<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n  <span class=\"c\">\/\/ Set the router as the default one shipped with Gin<\/span>\n  <span class=\"n\">router<\/span> <span class=\"o\">:=<\/span> <span class=\"n\">gin<\/span><span class=\"o\">.<\/span><span class=\"n\">Default<\/span><span class=\"p\">()<\/span>\n\n  <span class=\"c\">\/\/ Serve frontend static files<\/span>\n  <span class=\"n\">router<\/span><span class=\"o\">.<\/span><span class=\"n\">Use<\/span><span class=\"p\">(<\/span><span class=\"n\">static<\/span><span class=\"o\">.<\/span><span class=\"n\">Serve<\/span><span class=\"p\">(<\/span><span class=\"s\">\"\/\"<\/span><span class=\"p\">,<\/span> <span class=\"n\">static<\/span><span class=\"o\">.<\/span><span class=\"n\">LocalFile<\/span><span class=\"p\">(<\/span><span class=\"s\">\".\/views\"<\/span><span class=\"p\">,<\/span> <span class=\"no\">true<\/span><span class=\"p\">)))<\/span>\n\n  <span class=\"c\">\/\/ Setup route group for the API<\/span>\n  <span class=\"n\">api<\/span> <span class=\"o\">:=<\/span> <span class=\"n\">router<\/span><span class=\"o\">.<\/span><span class=\"n\">Group<\/span><span class=\"p\">(<\/span><span class=\"s\">\"\/api\"<\/span><span class=\"p\">)<\/span>\n  <span class=\"p\">{<\/span>\n    <span class=\"n\">api<\/span><span class=\"o\">.<\/span><span class=\"n\">GET<\/span><span class=\"p\">(<\/span><span class=\"s\">\"\/\"<\/span><span class=\"p\">,<\/span> <span class=\"k\">func<\/span><span class=\"p\">(<\/span><span class=\"n\">c<\/span> <span class=\"o\">*<\/span><span class=\"n\">gin<\/span><span class=\"o\">.<\/span><span class=\"n\">Context<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n      <span class=\"n\">c<\/span><span class=\"o\">.<\/span><span class=\"n\">JSON<\/span><span class=\"p\">(<\/span><span class=\"n\">http<\/span><span class=\"o\">.<\/span><span class=\"n\">StatusOK<\/span><span class=\"p\">,<\/span> <span class=\"n\">gin<\/span><span class=\"o\">.<\/span><span class=\"n\">H<\/span> <span class=\"p\">{<\/span>\n        <span class=\"s\">\"message\"<\/span><span class=\"o\">:<\/span> <span class=\"s\">\"pong\"<\/span><span class=\"p\">,<\/span>\n      <span class=\"p\">})<\/span>\n    <span class=\"p\">})<\/span>\n  <span class=\"p\">}<\/span>\n  <span class=\"c\">\/\/ Our API will consit of just two routes<\/span>\n  <span class=\"c\">\/\/ \/jokes - which will retrieve a list of jokes a user can see<\/span>\n  <span class=\"c\">\/\/ \/jokes\/like\/:jokeID - which will capture likes sent to a particular joke<\/span>\n  <span class=\"n\">api<\/span><span class=\"o\">.<\/span><span class=\"n\">GET<\/span><span class=\"p\">(<\/span><span class=\"s\">\"\/jokes\"<\/span><span class=\"p\">,<\/span> <span class=\"n\">JokeHandler<\/span><span class=\"p\">)<\/span>\n  <span class=\"n\">api<\/span><span class=\"o\">.<\/span><span class=\"n\">POST<\/span><span class=\"p\">(<\/span><span class=\"s\">\"\/jokes\/like\/:jokeID\"<\/span><span class=\"p\">,<\/span> <span class=\"n\">LikeJoke<\/span><span class=\"p\">)<\/span>\n\n  <span class=\"c\">\/\/ Start and run the server<\/span>\n  <span class=\"n\">router<\/span><span class=\"o\">.<\/span><span class=\"n\">Run<\/span><span class=\"p\">(<\/span><span class=\"s\">\":3000\"<\/span><span class=\"p\">)<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"c\">\/\/ JokeHandler retrieves a list of available jokes<\/span>\n<span class=\"k\">func<\/span> <span class=\"n\">JokeHandler<\/span><span class=\"p\">(<\/span><span class=\"n\">c<\/span> <span class=\"o\">*<\/span><span class=\"n\">gin<\/span><span class=\"o\">.<\/span><span class=\"n\">Context<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n  <span class=\"n\">c<\/span><span class=\"o\">.<\/span><span class=\"n\">Header<\/span><span class=\"p\">(<\/span><span class=\"s\">\"Content-Type\"<\/span><span class=\"p\">,<\/span> <span class=\"s\">\"application\/json\"<\/span><span class=\"p\">)<\/span>\n  <span class=\"n\">c<\/span><span class=\"o\">.<\/span><span class=\"n\">JSON<\/span><span class=\"p\">(<\/span><span class=\"n\">http<\/span><span class=\"o\">.<\/span><span class=\"n\">StatusOK<\/span><span class=\"p\">,<\/span> <span class=\"n\">gin<\/span><span class=\"o\">.<\/span><span class=\"n\">H<\/span> <span class=\"p\">{<\/span>\n    <span class=\"s\">\"message\"<\/span><span class=\"o\">:<\/span><span class=\"s\">\"Jokes handler not implemented yet\"<\/span><span class=\"p\">,<\/span>\n  <span class=\"p\">})<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"c\">\/\/ LikeJoke increments the likes of a particular joke Item<\/span>\n<span class=\"k\">func<\/span> <span class=\"n\">LikeJoke<\/span><span class=\"p\">(<\/span><span class=\"n\">c<\/span> <span class=\"o\">*<\/span><span class=\"n\">gin<\/span><span class=\"o\">.<\/span><span class=\"n\">Context<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n  <span class=\"n\">c<\/span><span class=\"o\">.<\/span><span class=\"n\">Header<\/span><span class=\"p\">(<\/span><span class=\"s\">\"Content-Type\"<\/span><span class=\"p\">,<\/span> <span class=\"s\">\"application\/json\"<\/span><span class=\"p\">)<\/span>\n  <span class=\"n\">c<\/span><span class=\"o\">.<\/span><span class=\"n\">JSON<\/span><span class=\"p\">(<\/span><span class=\"n\">http<\/span><span class=\"o\">.<\/span><span class=\"n\">StatusOK<\/span><span class=\"p\">,<\/span> <span class=\"n\">gin<\/span><span class=\"o\">.<\/span><span class=\"n\">H<\/span> <span class=\"p\">{<\/span>\n    <span class=\"s\">\"message\"<\/span><span class=\"o\">:<\/span><span class=\"s\">\"LikeJoke handler not implemented yet\"<\/span><span class=\"p\">,<\/span>\n  <span class=\"p\">})<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n\n<\/div>\n\n\n\n<p>Let's run our app again <code>go run main.go<\/code>, and access our routes; <code>http:\/\/localhost:3000\/api\/jokes<\/code> will return a <code>200 OK<\/code> header response, with message <code>jokes handler not implemented yet<\/code>, and a POST request to <code>http:\/\/localhost:3000\/api\/jokes\/like\/1<\/code> returns a <code>200 OK<\/code> header, and message <code>Likejoke handler not implemented yet<\/code>.<\/p>\n\n<h3>\n  \n  \n  Jokes Data\n<\/h3>\n\n<p>Since we already have our routes definition set, which does only one thing, which is to return a json response, we'll spice our codebase a bit by adding some more code to it.<br>\n<\/p>\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight go\"><code><span class=\"c\">\/\/ ... leave the code above untouched...<\/span>\n\n<span class=\"c\">\/\/ Let's create our Jokes struct. This will contain information about a Joke<\/span>\n\n<span class=\"c\">\/\/ Joke contains information about a single Joke<\/span>\n<span class=\"k\">type<\/span> <span class=\"n\">Joke<\/span> <span class=\"k\">struct<\/span> <span class=\"p\">{<\/span>\n  <span class=\"n\">ID<\/span>     <span class=\"kt\">int<\/span>     <span class=\"s\">`json:\"id\" binding:\"required\"`<\/span>\n  <span class=\"n\">Likes<\/span>  <span class=\"kt\">int<\/span>     <span class=\"s\">`json:\"likes\"`<\/span>\n  <span class=\"n\">Joke<\/span>   <span class=\"kt\">string<\/span>  <span class=\"s\">`json:\"joke\" binding:\"required\"`<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"c\">\/\/ We'll create a list of jokes<\/span>\n<span class=\"k\">var<\/span> <span class=\"n\">jokes<\/span> <span class=\"o\">=<\/span> <span class=\"p\">[]<\/span><span class=\"n\">Joke<\/span><span class=\"p\">{<\/span>\n  <span class=\"n\">Joke<\/span><span class=\"p\">{<\/span><span class=\"m\">1<\/span><span class=\"p\">,<\/span> <span class=\"m\">0<\/span><span class=\"p\">,<\/span> <span class=\"s\">\"Did you hear about the restaurant on the moon? Great food, no atmosphere.\"<\/span><span class=\"p\">},<\/span>\n  <span class=\"n\">Joke<\/span><span class=\"p\">{<\/span><span class=\"m\">2<\/span><span class=\"p\">,<\/span> <span class=\"m\">0<\/span><span class=\"p\">,<\/span> <span class=\"s\">\"What do you call a fake noodle? An Impasta.\"<\/span><span class=\"p\">},<\/span>\n  <span class=\"n\">Joke<\/span><span class=\"p\">{<\/span><span class=\"m\">3<\/span><span class=\"p\">,<\/span> <span class=\"m\">0<\/span><span class=\"p\">,<\/span> <span class=\"s\">\"How many apples grow on a tree? All of them.\"<\/span><span class=\"p\">},<\/span>\n  <span class=\"n\">Joke<\/span><span class=\"p\">{<\/span><span class=\"m\">4<\/span><span class=\"p\">,<\/span> <span class=\"m\">0<\/span><span class=\"p\">,<\/span> <span class=\"s\">\"Want to hear a joke about paper? Nevermind it's tearable.\"<\/span><span class=\"p\">},<\/span>\n  <span class=\"n\">Joke<\/span><span class=\"p\">{<\/span><span class=\"m\">5<\/span><span class=\"p\">,<\/span> <span class=\"m\">0<\/span><span class=\"p\">,<\/span> <span class=\"s\">\"I just watched a program about beavers. It was the best dam program I've ever seen.\"<\/span><span class=\"p\">},<\/span>\n  <span class=\"n\">Joke<\/span><span class=\"p\">{<\/span><span class=\"m\">6<\/span><span class=\"p\">,<\/span> <span class=\"m\">0<\/span><span class=\"p\">,<\/span> <span class=\"s\">\"Why did the coffee file a police report? It got mugged.\"<\/span><span class=\"p\">},<\/span>\n  <span class=\"n\">Joke<\/span><span class=\"p\">{<\/span><span class=\"m\">7<\/span><span class=\"p\">,<\/span> <span class=\"m\">0<\/span><span class=\"p\">,<\/span> <span class=\"s\">\"How does a penguin build it's house? Igloos it together.\"<\/span><span class=\"p\">},<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"k\">func<\/span> <span class=\"n\">main<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n  <span class=\"c\">\/\/ ... leave this block untouched...<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"c\">\/\/ JokeHandler retrieves a list of available jokes<\/span>\n<span class=\"k\">func<\/span> <span class=\"n\">JokeHandler<\/span><span class=\"p\">(<\/span><span class=\"n\">c<\/span> <span class=\"o\">*<\/span><span class=\"n\">gin<\/span><span class=\"o\">.<\/span><span class=\"n\">Context<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n  <span class=\"n\">c<\/span><span class=\"o\">.<\/span><span class=\"n\">Header<\/span><span class=\"p\">(<\/span><span class=\"s\">\"Content-Type\"<\/span><span class=\"p\">,<\/span> <span class=\"s\">\"application\/json\"<\/span><span class=\"p\">)<\/span>\n  <span class=\"n\">c<\/span><span class=\"o\">.<\/span><span class=\"n\">JSON<\/span><span class=\"p\">(<\/span><span class=\"n\">http<\/span><span class=\"o\">.<\/span><span class=\"n\">StatusOK<\/span><span class=\"p\">,<\/span> <span class=\"n\">jokes<\/span><span class=\"p\">)<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"c\">\/\/ LikeJoke increments the likes of a particular joke Item<\/span>\n<span class=\"k\">func<\/span> <span class=\"n\">LikeJoke<\/span><span class=\"p\">(<\/span><span class=\"n\">c<\/span> <span class=\"o\">*<\/span><span class=\"n\">gin<\/span><span class=\"o\">.<\/span><span class=\"n\">Context<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n  <span class=\"c\">\/\/ confirm Joke ID sent is valid<\/span>\n  <span class=\"c\">\/\/ remember to import the `strconv` package<\/span>\n  <span class=\"k\">if<\/span> <span class=\"n\">jokeid<\/span><span class=\"p\">,<\/span> <span class=\"n\">err<\/span> <span class=\"o\">:=<\/span> <span class=\"n\">strconv<\/span><span class=\"o\">.<\/span><span class=\"n\">Atoi<\/span><span class=\"p\">(<\/span><span class=\"n\">c<\/span><span class=\"o\">.<\/span><span class=\"n\">Param<\/span><span class=\"p\">(<\/span><span class=\"s\">\"jokeID\"<\/span><span class=\"p\">));<\/span> <span class=\"n\">err<\/span> <span class=\"o\">==<\/span> <span class=\"no\">nil<\/span> <span class=\"p\">{<\/span>\n    <span class=\"c\">\/\/ find joke, and increment likes<\/span>\n    <span class=\"k\">for<\/span> <span class=\"n\">i<\/span> <span class=\"o\">:=<\/span> <span class=\"m\">0<\/span><span class=\"p\">;<\/span> <span class=\"n\">i<\/span> <span class=\"o\">&lt;<\/span> <span class=\"nb\">len<\/span><span class=\"p\">(<\/span><span class=\"n\">jokes<\/span><span class=\"p\">);<\/span> <span class=\"n\">i<\/span><span class=\"o\">++<\/span> <span class=\"p\">{<\/span>\n      <span class=\"k\">if<\/span> <span class=\"n\">jokes<\/span><span class=\"p\">[<\/span><span class=\"n\">i<\/span><span class=\"p\">]<\/span><span class=\"o\">.<\/span><span class=\"n\">ID<\/span> <span class=\"o\">==<\/span> <span class=\"n\">jokeid<\/span> <span class=\"p\">{<\/span>\n        <span class=\"n\">jokes<\/span><span class=\"p\">[<\/span><span class=\"n\">i<\/span><span class=\"p\">]<\/span><span class=\"o\">.<\/span><span class=\"n\">Likes<\/span> <span class=\"o\">+=<\/span> <span class=\"m\">1<\/span>\n      <span class=\"p\">}<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"c\">\/\/ return a pointer to the updated jokes list<\/span>\n    <span class=\"n\">c<\/span><span class=\"o\">.<\/span><span class=\"n\">JSON<\/span><span class=\"p\">(<\/span><span class=\"n\">http<\/span><span class=\"o\">.<\/span><span class=\"n\">StatusOK<\/span><span class=\"p\">,<\/span> <span class=\"o\">&amp;<\/span><span class=\"n\">jokes<\/span><span class=\"p\">)<\/span>\n  <span class=\"p\">}<\/span> <span class=\"k\">else<\/span> <span class=\"p\">{<\/span>\n    <span class=\"c\">\/\/ Joke ID is invalid<\/span>\n    <span class=\"n\">c<\/span><span class=\"o\">.<\/span><span class=\"n\">AbortWithStatus<\/span><span class=\"p\">(<\/span><span class=\"n\">http<\/span><span class=\"o\">.<\/span><span class=\"n\">StatusNotFound<\/span><span class=\"p\">)<\/span>\n  <span class=\"p\">}<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"c\">\/\/ NB: Replace the JokeHandler and LikeJoke functions in the previous version to the ones above<\/span>\n<\/code><\/pre>\n\n<\/div>\n\n\n\n<p>With our code looking good, lets go ahead and test our API. We can test with <code>cURL<\/code> or <code>postman<\/code> , and sending a <code>GET<\/code> request to <code>http:\/\/localhost:3000\/jokes<\/code> to get the full list of jokes, and a <code>POST<\/code> request to <code>http:\/\/localhost:3000\/jokes\/like\/{jokeid}<\/code> to increment the likes of a joke.<br>\n<\/p>\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code><span class=\"nv\">$ <\/span>curl http:\/\/localhost:3000\/api\/jokes\n\n<span class=\"nv\">$ <\/span>curl <span class=\"nt\">-X<\/span> POST http:\/\/localhost:3000\/api\/jokes\/like\/4\n<\/code><\/pre>\n\n<\/div>\n\n\n\n<h3>\n  \n  \n  Building the UI (React)\n<\/h3>\n\n<p>We have our API in place, so let's build a frontend to present the data from our API. For this, we'll be using React. We won't go too deep into React as it will be out of scope for this tutorial. If you need to learn more about React, checkout the official <a href=\"https:\/\/facebook.github.io\/react\/docs\/tutorial.html\" rel=\"noopener noreferrer\">tutorial<\/a>. You can implement the UI with any frontend framework you're comfortable with.<\/p>\n\n<h3>\n  \n  \n  Setup\n<\/h3>\n\n<p>We'll edit the <code>index.html<\/code> file to add external libraries needed to run React, we'll then need to create an<code>app.jsx<\/code> file in the <code>views\/js<\/code> directory, which will contain our React code.<\/p>\n\n<p>Our <code>index.html<\/code> file should look like this:<br>\n<\/p>\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight html\"><code><span class=\"cp\">&lt;!DOCTYPE html&gt;<\/span>\n<span class=\"nt\">&lt;html&gt;<\/span>\n\n<span class=\"nt\">&lt;head&gt;<\/span>\n  <span class=\"nt\">&lt;meta<\/span> <span class=\"na\">charset=<\/span><span class=\"s\">\"UTF-8\"<\/span> <span class=\"nt\">\/&gt;<\/span>\n  <span class=\"nt\">&lt;meta<\/span> <span class=\"na\">name=<\/span><span class=\"s\">\"viewport\"<\/span> <span class=\"na\">content=<\/span><span class=\"s\">\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no\"<\/span> <span class=\"nt\">\/&gt;<\/span>\n  <span class=\"nt\">&lt;title&gt;<\/span>Jokeish App<span class=\"nt\">&lt;\/title&gt;<\/span>\n  <span class=\"nt\">&lt;script <\/span><span class=\"na\">src=<\/span><span class=\"s\">\"http:\/\/code.jquery.com\/jquery-2.1.4.min.js\"<\/span><span class=\"nt\">&gt;&lt;\/script&gt;<\/span>\n  <span class=\"nt\">&lt;script <\/span><span class=\"na\">src=<\/span><span class=\"s\">\"https:\/\/cdn.auth0.com\/js\/auth0\/9.0\/auth0.min.js\"<\/span><span class=\"nt\">&gt;&lt;\/script&gt;<\/span>\n  <span class=\"nt\">&lt;script <\/span><span class=\"na\">type=<\/span><span class=\"s\">\"application\/javascript\"<\/span> <span class=\"na\">src=<\/span><span class=\"s\">\"https:\/\/unpkg.com\/react@16.0.0\/umd\/react.production.min.js\"<\/span><span class=\"nt\">&gt;&lt;\/script&gt;<\/span>\n  <span class=\"nt\">&lt;script <\/span><span class=\"na\">type=<\/span><span class=\"s\">\"application\/javascript\"<\/span> <span class=\"na\">src=<\/span><span class=\"s\">\"https:\/\/unpkg.com\/react-dom@16.0.0\/umd\/react-dom.production.min.js\"<\/span><span class=\"nt\">&gt;&lt;\/script&gt;<\/span>\n  <span class=\"nt\">&lt;script <\/span><span class=\"na\">type=<\/span><span class=\"s\">\"application\/javascript\"<\/span> <span class=\"na\">src=<\/span><span class=\"s\">\"https:\/\/unpkg.com\/babel-standalone@6.26.0\/babel.js\"<\/span><span class=\"nt\">&gt;&lt;\/script&gt;<\/span>\n  <span class=\"nt\">&lt;script <\/span><span class=\"na\">type=<\/span><span class=\"s\">\"text\/babel\"<\/span> <span class=\"na\">src=<\/span><span class=\"s\">\"js\/app.jsx\"<\/span><span class=\"nt\">&gt;&lt;\/script&gt;<\/span>\n  <span class=\"nt\">&lt;link<\/span> <span class=\"na\">href=<\/span><span class=\"s\">\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.6\/css\/bootstrap.min.css\"<\/span> <span class=\"na\">rel=<\/span><span class=\"s\">\"stylesheet\"<\/span><span class=\"nt\">&gt;<\/span>\n<span class=\"nt\">&lt;\/head&gt;<\/span>\n\n<span class=\"nt\">&lt;body&gt;<\/span>\n  <span class=\"nt\">&lt;div<\/span> <span class=\"na\">id=<\/span><span class=\"s\">\"app\"<\/span><span class=\"nt\">&gt;&lt;\/div&gt;<\/span>\n<span class=\"nt\">&lt;\/body&gt;<\/span>\n\n<span class=\"nt\">&lt;\/html&gt;<\/span>\n<\/code><\/pre>\n\n<\/div>\n\n\n\n<h3>\n  \n  \n  Building our Components\n<\/h3>\n\n<p>In React views are broken down into components. We'll need to build some components. An <code>App<\/code> component as the main entry, that launches the application, a <code>Home<\/code> component which will face non logged-in users, a <code>LoggedIn<\/code> component with content only visible by authenticated users, and a <code>Joke<\/code> component to display a list of jokes. We'll write all these components in the <code>app.jsx<\/code> file.<\/p>\n\n<h3>\n  \n  \n  The App component\n<\/h3>\n\n<p>This component bootstraps our entire React app. It decides on which component to show when a user is authenticated or not. We'll start off with just its base, and later update it with more functionality.<br>\n<\/p>\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"kd\">class<\/span> <span class=\"nc\">App<\/span> <span class=\"kd\">extends<\/span> <span class=\"nc\">React<\/span><span class=\"p\">.<\/span><span class=\"nx\">Component<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nf\">render<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">loggedIn<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n      <span class=\"k\">return <\/span><span class=\"p\">(<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">LoggedIn<\/span> <span class=\"o\">\/&gt;<\/span><span class=\"p\">);<\/span>\n    <span class=\"p\">}<\/span> <span class=\"k\">else<\/span> <span class=\"p\">{<\/span>\n      <span class=\"k\">return <\/span><span class=\"p\">(<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">Home<\/span> <span class=\"o\">\/&gt;<\/span><span class=\"p\">);<\/span>\n    <span class=\"p\">}<\/span>\n  <span class=\"p\">}<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n\n<\/div>\n\n\n\n<h3>\n  \n  \n  The Home component\n<\/h3>\n\n<p>This component is shown to non logged-in users. And a button which opens a Hosted lock screen (we'll add this functionality later), where they can signup, or login.<br>\n<\/p>\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight jsx\"><code><span class=\"kd\">class<\/span> <span class=\"nc\">Home<\/span> <span class=\"kd\">extends<\/span> <span class=\"nc\">React<\/span><span class=\"p\">.<\/span><span class=\"nx\">Component<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nf\">render<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\n      <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"container\"<\/span><span class=\"p\">&gt;<\/span>\n        <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"col-xs-8 col-xs-offset-2 jumbotron text-center\"<\/span><span class=\"p\">&gt;<\/span>\n          <span class=\"p\">&lt;<\/span><span class=\"nt\">h1<\/span><span class=\"p\">&gt;<\/span>Jokeish<span class=\"p\">&lt;\/<\/span><span class=\"nt\">h1<\/span><span class=\"p\">&gt;<\/span>\n          <span class=\"p\">&lt;<\/span><span class=\"nt\">p<\/span><span class=\"p\">&gt;<\/span>A load of Dad jokes XD<span class=\"p\">&lt;\/<\/span><span class=\"nt\">p<\/span><span class=\"p\">&gt;<\/span>\n          <span class=\"p\">&lt;<\/span><span class=\"nt\">p<\/span><span class=\"p\">&gt;<\/span>Sign in to get access <span class=\"p\">&lt;\/<\/span><span class=\"nt\">p<\/span><span class=\"p\">&gt;<\/span>\n          <span class=\"p\">&lt;<\/span><span class=\"nt\">a<\/span> <span class=\"na\">onClick<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">authenticate<\/span><span class=\"si\">}<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"btn btn-primary btn-lg btn-login btn-block\"<\/span><span class=\"p\">&gt;<\/span>Sign In<span class=\"p\">&lt;\/<\/span><span class=\"nt\">a<\/span><span class=\"p\">&gt;<\/span>\n        <span class=\"p\">&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n      <span class=\"p\">&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n    <span class=\"p\">)<\/span>\n  <span class=\"p\">}<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n\n<\/div>\n\n\n\n<h3>\n  \n  \n  LoggedIn component\n<\/h3>\n\n<p>This component is displayed when a user is authenticated. It stores in its <code>state<\/code> an array of jokes which is populated when the component mounts.<br>\n<\/p>\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight jsx\"><code><span class=\"kd\">class<\/span> <span class=\"nc\">LoggedIn<\/span> <span class=\"kd\">extends<\/span> <span class=\"nc\">React<\/span><span class=\"p\">.<\/span><span class=\"nx\">Component<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nf\">constructor<\/span><span class=\"p\">(<\/span><span class=\"nx\">props<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">super<\/span><span class=\"p\">(<\/span><span class=\"nx\">props<\/span><span class=\"p\">);<\/span>\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">state<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span>\n      <span class=\"na\">jokes<\/span><span class=\"p\">:<\/span> <span class=\"p\">[]<\/span>\n    <span class=\"p\">}<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nf\">render<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\n      <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"container\"<\/span><span class=\"p\">&gt;<\/span>\n        <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"col-lg-12\"<\/span><span class=\"p\">&gt;<\/span>\n          <span class=\"p\">&lt;<\/span><span class=\"nt\">br<\/span> <span class=\"p\">\/&gt;<\/span>\n          <span class=\"p\">&lt;<\/span><span class=\"nt\">span<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"pull-right\"<\/span><span class=\"p\">&gt;&lt;<\/span><span class=\"nt\">a<\/span> <span class=\"na\">onClick<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">logout<\/span><span class=\"si\">}<\/span><span class=\"p\">&gt;<\/span>Log out<span class=\"p\">&lt;\/<\/span><span class=\"nt\">a<\/span><span class=\"p\">&gt;&lt;\/<\/span><span class=\"nt\">span<\/span><span class=\"p\">&gt;<\/span>\n          <span class=\"p\">&lt;<\/span><span class=\"nt\">h2<\/span><span class=\"p\">&gt;<\/span>Jokeish<span class=\"p\">&lt;\/<\/span><span class=\"nt\">h2<\/span><span class=\"p\">&gt;<\/span>\n          <span class=\"p\">&lt;<\/span><span class=\"nt\">p<\/span><span class=\"p\">&gt;<\/span>Let's feed you with some funny Jokes!!!<span class=\"p\">&lt;\/<\/span><span class=\"nt\">p<\/span><span class=\"p\">&gt;<\/span>\n          <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"row\"<\/span><span class=\"p\">&gt;<\/span>\n            <span class=\"si\">{<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">state<\/span><span class=\"p\">.<\/span><span class=\"nx\">jokes<\/span><span class=\"p\">.<\/span><span class=\"nf\">map<\/span><span class=\"p\">(<\/span><span class=\"kd\">function<\/span><span class=\"p\">(<\/span><span class=\"nx\">joke<\/span><span class=\"p\">,<\/span> <span class=\"nx\">i<\/span><span class=\"p\">){<\/span>\n              <span class=\"k\">return <\/span><span class=\"p\">(&lt;<\/span><span class=\"nc\">Joke<\/span> <span class=\"na\">key<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">i<\/span><span class=\"si\">}<\/span> <span class=\"na\">joke<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">joke<\/span><span class=\"si\">}<\/span> <span class=\"p\">\/&gt;);<\/span>\n            <span class=\"p\">})<\/span><span class=\"si\">}<\/span>\n          <span class=\"p\">&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n        <span class=\"p\">&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n      <span class=\"p\">&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n    <span class=\"p\">)<\/span>\n  <span class=\"p\">}<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n\n<\/div>\n\n\n\n<h3>\n  \n  \n  The Joke component\n<\/h3>\n\n<p>The <code>Joke<\/code> component will contain information about each item from the jokes response to be displayed.<br>\n<\/p>\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight jsx\"><code><span class=\"kd\">class<\/span> <span class=\"nc\">Joke<\/span> <span class=\"kd\">extends<\/span> <span class=\"nc\">React<\/span><span class=\"p\">.<\/span><span class=\"nx\">Component<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nf\">constructor<\/span><span class=\"p\">(<\/span><span class=\"nx\">props<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">super<\/span><span class=\"p\">(<\/span><span class=\"nx\">props<\/span><span class=\"p\">);<\/span>\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">state<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span>\n      <span class=\"na\">liked<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"\"<\/span>\n    <span class=\"p\">}<\/span>\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">like<\/span> <span class=\"o\">=<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">like<\/span><span class=\"p\">.<\/span><span class=\"nf\">bind<\/span><span class=\"p\">(<\/span><span class=\"k\">this<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nf\">like<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n    <span class=\"c1\">\/\/ ... we'll add this block later<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nf\">render<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\n      <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"col-xs-4\"<\/span><span class=\"p\">&gt;<\/span>\n        <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"panel panel-default\"<\/span><span class=\"p\">&gt;<\/span>\n          <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"panel-heading\"<\/span><span class=\"p\">&gt;<\/span>#<span class=\"si\">{<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">props<\/span><span class=\"p\">.<\/span><span class=\"nx\">joke<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"si\">}<\/span> <span class=\"p\">&lt;<\/span><span class=\"nt\">span<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"pull-right\"<\/span><span class=\"p\">&gt;<\/span><span class=\"si\">{<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">state<\/span><span class=\"p\">.<\/span><span class=\"nx\">liked<\/span><span class=\"si\">}<\/span><span class=\"p\">&lt;\/<\/span><span class=\"nt\">span<\/span><span class=\"p\">&gt;&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n          <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"panel-body\"<\/span><span class=\"p\">&gt;<\/span>\n            <span class=\"si\">{<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">props<\/span><span class=\"p\">.<\/span><span class=\"nx\">joke<\/span><span class=\"p\">.<\/span><span class=\"nx\">joke<\/span><span class=\"si\">}<\/span>\n          <span class=\"p\">&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n          <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"panel-footer\"<\/span><span class=\"p\">&gt;<\/span>\n            <span class=\"si\">{<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">props<\/span><span class=\"p\">.<\/span><span class=\"nx\">joke<\/span><span class=\"p\">.<\/span><span class=\"nx\">likes<\/span><span class=\"si\">}<\/span> Likes <span class=\"ni\">&amp;nbsp;<\/span>\n            <span class=\"p\">&lt;<\/span><span class=\"nt\">a<\/span> <span class=\"na\">onClick<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">like<\/span><span class=\"si\">}<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"btn btn-default\"<\/span><span class=\"p\">&gt;<\/span>\n              <span class=\"p\">&lt;<\/span><span class=\"nt\">span<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"glyphicon glyphicon-thumbs-up\"<\/span><span class=\"p\">&gt;&lt;\/<\/span><span class=\"nt\">span<\/span><span class=\"p\">&gt;<\/span>\n            <span class=\"p\">&lt;\/<\/span><span class=\"nt\">a<\/span><span class=\"p\">&gt;<\/span>\n          <span class=\"p\">&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n        <span class=\"p\">&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n      <span class=\"p\">&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n    <span class=\"p\">)<\/span>\n  <span class=\"p\">}<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n\n<\/div>\n\n\n\n<p>We've written our components, now let's tell React where to render the app. We'll add the block of code below to the bottom of our <code>app.jsx<\/code> file.<br>\n<\/p>\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"nx\">ReactDOM<\/span><span class=\"p\">.<\/span><span class=\"nf\">render<\/span><span class=\"p\">(<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">App<\/span> <span class=\"o\">\/&gt;<\/span><span class=\"p\">,<\/span> <span class=\"nb\">document<\/span><span class=\"p\">.<\/span><span class=\"nf\">getElementById<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">app<\/span><span class=\"dl\">'<\/span><span class=\"p\">));<\/span>\n<\/code><\/pre>\n\n<\/div>\n\n\n\n<p>Let's restart our Go server <code>go run main.go<\/code>, and head over to our app's URL <code>http:\/\/localhost:3000\/<\/code>. You'd see the <code>Home<\/code> component is being rendered.<\/p>\n\n<p><a href=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fs4xfkaewkwdvktn5cl00.png\" class=\"article-body-image-wrapper\"><img src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fs4xfkaewkwdvktn5cl00.png\" alt=\"golang-gin-home-component\" width=\"800\" height=\"453\"><\/a><\/p>\n\n<h2>\n  \n  \n  Securing our Jokes App With Auth0\n<\/h2>\n\n<blockquote>\n<p>Disclaimer: This isn't a sponsored content.<\/p>\n<\/blockquote>\n\n<p><strong>Auth0<\/strong> issues <a href=\"https:\/\/jwt.io\/\" rel=\"noopener noreferrer\">JSON Web Tokens<\/a> on every login for your users. This means that you can have a solid <a href=\"https:\/\/auth0.com\/docs\/identityproviders\" rel=\"noopener noreferrer\">identity infrastructure<\/a>, including <a href=\"https:\/\/auth0.com\/docs\/sso\/single-sign-on\" rel=\"noopener noreferrer\">single sign-on<\/a>, user management, support for social identity providers (Facebook, Github, Twitter, etc.), enterprise identity providers (Active Directory, LDAP, SAML, etc.) and your own database of users with just a few lines of code.<\/p>\n\n<p>We can easily set up authentication in our GIN app by using Auth0. You'll need an ccount to follow along with this part. If you don't already have an Auth0 account, <a href=\"https:\/\/auth0.com\/signup\" rel=\"noopener noreferrer\">sign up<\/a> for one now.<\/p>\n\n<h3>\n  \n  \n  Creating the API client\n<\/h3>\n\n<p>Our tokens will be generated with Auth0, so we need to create an API and a Client from our Auth0 dashboard. If you haven't already, <a href=\"https:\/\/auth0.com\/signup\" rel=\"noopener noreferrer\">sign up<\/a> for an Auth0 account.<\/p>\n\n<p>To create a new API, navigate to the <a href=\"https:\/\/manage.auth0.com\/#\/apis\" rel=\"noopener noreferrer\">APIs section<\/a> in your dashboard, and click the <strong>Create API<\/strong> button.<\/p>\n\n<p><a href=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fpl8sznh9iwiduhnqw71h.png\" class=\"article-body-image-wrapper\"><img src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fpl8sznh9iwiduhnqw71h.png\" alt=\"golang-gin-apis-section\" width=\"800\" height=\"453\"><\/a><\/p>\n\n<p>Choose an API <strong>name<\/strong>, and an <strong>identifier<\/strong>. The identifier will be the <strong>audience<\/strong> for the middleware. The <strong>Signing Algorithm<\/strong> should be <strong>RS256<\/strong>.<\/p>\n\n<p>To create a new Client, navigate to the <a href=\"\">clients section<\/a> in your dashboard, and click the <strong>Create Client<\/strong> button, and select type <code>Regular Web Applications<\/code>.<\/p>\n\n<p><a href=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fhn7i34cx4kqnwmugj2ec.png\" class=\"article-body-image-wrapper\"><img src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fhn7i34cx4kqnwmugj2ec.png\" alt=\"golang-gin-create-client\" width=\"800\" height=\"453\"><\/a><\/p>\n\n<p>Once the client is created, take note of the <code>client_id<\/code> and <code>client_secret<\/code>, as we'll need it later.<\/p>\n\n<p><a href=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F240owe9ez3aevjde661g.png\" class=\"article-body-image-wrapper\"><img src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F240owe9ez3aevjde661g.png\" alt=\"golang-gin-client-page\" width=\"800\" height=\"453\"><\/a><\/p>\n\n<p>We need to add the credentials needed for our API to an environment vairable. In the root directory, create a new file <code>.env<\/code> and add the following to it, with the details from the Auth0 dashboard:<br>\n<\/p>\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>export AUTH0_API_CLIENT_SECRET=\"\"\nexport AUTH0_CLIENT_ID=\"\"\nexport AUTH0_DOMAIN=\"yourdomain.auth0.com\"\nexport AUTH0_API_AUDIENCE=\"\"\n<\/code><\/pre>\n\n<\/div>\n\n\n\n<h3>\n  \n  \n  Securing our API Endpoints\n<\/h3>\n\n<p>Currently, our API is open to the world, so we need to secure them, so only authorized users can access them.<\/p>\n\n<p>We are going to make use of a <strong>JWT Middleware<\/strong> to check for a valid <em>JSON Web Token<\/em> from each requests hitting our Endpoints.<\/p>\n\n<p>Let's create our middleware:<br>\n<\/p>\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight go\"><code>\n<span class=\"c\">\/\/ ...<\/span>\n\n<span class=\"k\">var<\/span> <span class=\"n\">jwtMiddleWare<\/span> <span class=\"o\">*<\/span><span class=\"n\">jwtmiddleware<\/span><span class=\"o\">.<\/span><span class=\"n\">JWTMiddleware<\/span>\n\n<span class=\"k\">func<\/span> <span class=\"n\">main<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n  <span class=\"n\">jwtMiddleware<\/span> <span class=\"o\">:=<\/span> <span class=\"n\">jwtmiddleware<\/span><span class=\"o\">.<\/span><span class=\"n\">New<\/span><span class=\"p\">(<\/span><span class=\"n\">jwtmiddleware<\/span><span class=\"o\">.<\/span><span class=\"n\">Options<\/span><span class=\"p\">{<\/span>\n    <span class=\"n\">ValidationKeyGetter<\/span><span class=\"o\">:<\/span> <span class=\"k\">func<\/span><span class=\"p\">(<\/span><span class=\"n\">token<\/span> <span class=\"o\">*<\/span><span class=\"n\">jwt<\/span><span class=\"o\">.<\/span><span class=\"n\">Token<\/span><span class=\"p\">)<\/span> <span class=\"p\">(<\/span><span class=\"k\">interface<\/span><span class=\"p\">{},<\/span> <span class=\"kt\">error<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n      <span class=\"n\">aud<\/span> <span class=\"o\">:=<\/span> <span class=\"n\">os<\/span><span class=\"o\">.<\/span><span class=\"n\">Getenv<\/span><span class=\"p\">(<\/span><span class=\"s\">\"AUTH0_API_AUDIENCE\"<\/span><span class=\"p\">)<\/span>\n      <span class=\"n\">checkAudience<\/span> <span class=\"o\">:=<\/span> <span class=\"n\">token<\/span><span class=\"o\">.<\/span><span class=\"n\">Claims<\/span><span class=\"o\">.<\/span><span class=\"p\">(<\/span><span class=\"n\">jwt<\/span><span class=\"o\">.<\/span><span class=\"n\">MapClaims<\/span><span class=\"p\">)<\/span><span class=\"o\">.<\/span><span class=\"n\">VerifyAudience<\/span><span class=\"p\">(<\/span><span class=\"n\">aud<\/span><span class=\"p\">,<\/span> <span class=\"no\">false<\/span><span class=\"p\">)<\/span>\n      <span class=\"k\">if<\/span> <span class=\"o\">!<\/span><span class=\"n\">checkAudience<\/span> <span class=\"p\">{<\/span>\n        <span class=\"k\">return<\/span> <span class=\"n\">token<\/span><span class=\"p\">,<\/span> <span class=\"n\">errors<\/span><span class=\"o\">.<\/span><span class=\"n\">New<\/span><span class=\"p\">(<\/span><span class=\"s\">\"Invalid audience.\"<\/span><span class=\"p\">)<\/span>\n      <span class=\"p\">}<\/span>\n      <span class=\"c\">\/\/ verify iss claim<\/span>\n      <span class=\"n\">iss<\/span> <span class=\"o\">:=<\/span> <span class=\"n\">os<\/span><span class=\"o\">.<\/span><span class=\"n\">Getenv<\/span><span class=\"p\">(<\/span><span class=\"s\">\"AUTH0_DOMAIN\"<\/span><span class=\"p\">)<\/span>\n      <span class=\"n\">checkIss<\/span> <span class=\"o\">:=<\/span> <span class=\"n\">token<\/span><span class=\"o\">.<\/span><span class=\"n\">Claims<\/span><span class=\"o\">.<\/span><span class=\"p\">(<\/span><span class=\"n\">jwt<\/span><span class=\"o\">.<\/span><span class=\"n\">MapClaims<\/span><span class=\"p\">)<\/span><span class=\"o\">.<\/span><span class=\"n\">VerifyIssuer<\/span><span class=\"p\">(<\/span><span class=\"n\">iss<\/span><span class=\"p\">,<\/span> <span class=\"no\">false<\/span><span class=\"p\">)<\/span>\n      <span class=\"k\">if<\/span> <span class=\"o\">!<\/span><span class=\"n\">checkIss<\/span> <span class=\"p\">{<\/span>\n        <span class=\"k\">return<\/span> <span class=\"n\">token<\/span><span class=\"p\">,<\/span> <span class=\"n\">errors<\/span><span class=\"o\">.<\/span><span class=\"n\">New<\/span><span class=\"p\">(<\/span><span class=\"s\">\"Invalid issuer.\"<\/span><span class=\"p\">)<\/span>\n      <span class=\"p\">}<\/span>\n\n      <span class=\"n\">cert<\/span><span class=\"p\">,<\/span> <span class=\"n\">err<\/span> <span class=\"o\">:=<\/span> <span class=\"n\">getPemCert<\/span><span class=\"p\">(<\/span><span class=\"n\">token<\/span><span class=\"p\">)<\/span>\n      <span class=\"k\">if<\/span> <span class=\"n\">err<\/span> <span class=\"o\">!=<\/span> <span class=\"no\">nil<\/span> <span class=\"p\">{<\/span>\n        <span class=\"n\">log<\/span><span class=\"o\">.<\/span><span class=\"n\">Fatalf<\/span><span class=\"p\">(<\/span><span class=\"s\">\"could not get cert: %+v\"<\/span><span class=\"p\">,<\/span> <span class=\"n\">err<\/span><span class=\"p\">)<\/span>\n      <span class=\"p\">}<\/span>\n\n      <span class=\"n\">result<\/span><span class=\"p\">,<\/span> <span class=\"n\">_<\/span> <span class=\"o\">:=<\/span> <span class=\"n\">jwt<\/span><span class=\"o\">.<\/span><span class=\"n\">ParseRSAPublicKeyFromPEM<\/span><span class=\"p\">([]<\/span><span class=\"kt\">byte<\/span><span class=\"p\">(<\/span><span class=\"n\">cert<\/span><span class=\"p\">))<\/span>\n      <span class=\"k\">return<\/span> <span class=\"n\">result<\/span><span class=\"p\">,<\/span> <span class=\"no\">nil<\/span>\n    <span class=\"p\">},<\/span>\n    <span class=\"n\">SigningMethod<\/span><span class=\"o\">:<\/span> <span class=\"n\">jwt<\/span><span class=\"o\">.<\/span><span class=\"n\">SigningMethodRS256<\/span><span class=\"p\">,<\/span>\n  <span class=\"p\">})<\/span>\n\n  <span class=\"c\">\/\/ register our actual jwtMiddleware<\/span>\n  <span class=\"n\">jwtMiddleWare<\/span> <span class=\"o\">=<\/span> <span class=\"n\">jwtMiddleware<\/span>\n\n  <span class=\"c\">\/\/ ... the rest of the code below this function doesn't change yet<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"c\">\/\/ authMiddleware intercepts the requests, and check for a valid jwt token<\/span>\n<span class=\"k\">func<\/span> <span class=\"n\">authMiddleware<\/span><span class=\"p\">()<\/span> <span class=\"n\">gin<\/span><span class=\"o\">.<\/span><span class=\"n\">HandlerFunc<\/span> <span class=\"p\">{<\/span>\n  <span class=\"k\">return<\/span> <span class=\"k\">func<\/span><span class=\"p\">(<\/span><span class=\"n\">c<\/span> <span class=\"o\">*<\/span><span class=\"n\">gin<\/span><span class=\"o\">.<\/span><span class=\"n\">Context<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"c\">\/\/ Get the client secret key<\/span>\n    <span class=\"n\">err<\/span> <span class=\"o\">:=<\/span> <span class=\"n\">jwtMiddleWare<\/span><span class=\"o\">.<\/span><span class=\"n\">CheckJWT<\/span><span class=\"p\">(<\/span><span class=\"n\">c<\/span><span class=\"o\">.<\/span><span class=\"n\">Writer<\/span><span class=\"p\">,<\/span> <span class=\"n\">c<\/span><span class=\"o\">.<\/span><span class=\"n\">Request<\/span><span class=\"p\">)<\/span>\n    <span class=\"k\">if<\/span> <span class=\"n\">err<\/span> <span class=\"o\">!=<\/span> <span class=\"no\">nil<\/span> <span class=\"p\">{<\/span>\n      <span class=\"c\">\/\/ Token not found<\/span>\n      <span class=\"n\">fmt<\/span><span class=\"o\">.<\/span><span class=\"n\">Println<\/span><span class=\"p\">(<\/span><span class=\"n\">err<\/span><span class=\"p\">)<\/span>\n      <span class=\"n\">c<\/span><span class=\"o\">.<\/span><span class=\"n\">Abort<\/span><span class=\"p\">()<\/span>\n      <span class=\"n\">c<\/span><span class=\"o\">.<\/span><span class=\"n\">Writer<\/span><span class=\"o\">.<\/span><span class=\"n\">WriteHeader<\/span><span class=\"p\">(<\/span><span class=\"n\">http<\/span><span class=\"o\">.<\/span><span class=\"n\">StatusUnauthorized<\/span><span class=\"p\">)<\/span>\n      <span class=\"n\">c<\/span><span class=\"o\">.<\/span><span class=\"n\">Writer<\/span><span class=\"o\">.<\/span><span class=\"n\">Write<\/span><span class=\"p\">([]<\/span><span class=\"kt\">byte<\/span><span class=\"p\">(<\/span><span class=\"s\">\"Unauthorized\"<\/span><span class=\"p\">))<\/span>\n      <span class=\"k\">return<\/span>\n    <span class=\"p\">}<\/span>\n  <span class=\"p\">}<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n\n<\/div>\n\n\n\n<p>The above code, we have a new <code>jwtMiddleWare<\/code> variable which is initialized in the <code>main<\/code> function, and is used in the <code>authMiddleware<\/code> middle function. If you notice, we are pulling our server-side credentials from an environment variable (one of the tenets of a <strong>12-factor app<\/strong>). Our middleware checks and receives a token from a request, it calls the <code>jwtMiddleWare.CheckJWT<\/code> method to validate the token sent.<\/p>\n\n<p>Let's also write the function to return the JSON Web Keys:<br>\n<\/p>\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight go\"><code><span class=\"c\">\/\/ ... the code above is untouched...<\/span>\n\n<span class=\"c\">\/\/ Jwks stores a slice of JSON Web Keys<\/span>\n<span class=\"k\">type<\/span> <span class=\"n\">Jwks<\/span> <span class=\"k\">struct<\/span> <span class=\"p\">{<\/span>\n  <span class=\"n\">Keys<\/span> <span class=\"p\">[]<\/span><span class=\"n\">JSONWebKeys<\/span> <span class=\"s\">`json:\"keys\"`<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"k\">type<\/span> <span class=\"n\">JSONWebKeys<\/span> <span class=\"k\">struct<\/span> <span class=\"p\">{<\/span>\n  <span class=\"n\">Kty<\/span> <span class=\"kt\">string<\/span>   <span class=\"s\">`json:\"kty\"`<\/span>\n  <span class=\"n\">Kid<\/span> <span class=\"kt\">string<\/span>   <span class=\"s\">`json:\"kid\"`<\/span>\n  <span class=\"n\">Use<\/span> <span class=\"kt\">string<\/span>   <span class=\"s\">`json:\"use\"`<\/span>\n  <span class=\"n\">N<\/span>   <span class=\"kt\">string<\/span>   <span class=\"s\">`json:\"n\"`<\/span>\n  <span class=\"n\">E<\/span>   <span class=\"kt\">string<\/span>   <span class=\"s\">`json:\"e\"`<\/span>\n  <span class=\"n\">X5c<\/span> <span class=\"p\">[]<\/span><span class=\"kt\">string<\/span> <span class=\"s\">`json:\"x5c\"`<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"k\">func<\/span> <span class=\"n\">main<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n  <span class=\"c\">\/\/ ... the code in this method is untouched...<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"k\">func<\/span> <span class=\"n\">getPemCert<\/span><span class=\"p\">(<\/span><span class=\"n\">token<\/span> <span class=\"o\">*<\/span><span class=\"n\">jwt<\/span><span class=\"o\">.<\/span><span class=\"n\">Token<\/span><span class=\"p\">)<\/span> <span class=\"p\">(<\/span><span class=\"kt\">string<\/span><span class=\"p\">,<\/span> <span class=\"kt\">error<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n  <span class=\"n\">cert<\/span> <span class=\"o\">:=<\/span> <span class=\"s\">\"\"<\/span>\n  <span class=\"n\">resp<\/span><span class=\"p\">,<\/span> <span class=\"n\">err<\/span> <span class=\"o\">:=<\/span> <span class=\"n\">http<\/span><span class=\"o\">.<\/span><span class=\"n\">Get<\/span><span class=\"p\">(<\/span><span class=\"n\">os<\/span><span class=\"o\">.<\/span><span class=\"n\">Getenv<\/span><span class=\"p\">(<\/span><span class=\"s\">\"AUTH0_DOMAIN\"<\/span><span class=\"p\">)<\/span> <span class=\"o\">+<\/span> <span class=\"s\">\".well-known\/jwks.json\"<\/span><span class=\"p\">)<\/span>\n  <span class=\"k\">if<\/span> <span class=\"n\">err<\/span> <span class=\"o\">!=<\/span> <span class=\"no\">nil<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">return<\/span> <span class=\"n\">cert<\/span><span class=\"p\">,<\/span> <span class=\"n\">err<\/span>\n  <span class=\"p\">}<\/span>\n  <span class=\"k\">defer<\/span> <span class=\"n\">resp<\/span><span class=\"o\">.<\/span><span class=\"n\">Body<\/span><span class=\"o\">.<\/span><span class=\"n\">Close<\/span><span class=\"p\">()<\/span>\n\n  <span class=\"k\">var<\/span> <span class=\"n\">jwks<\/span> <span class=\"o\">=<\/span> <span class=\"n\">Jwks<\/span><span class=\"p\">{}<\/span>\n  <span class=\"n\">err<\/span> <span class=\"o\">=<\/span> <span class=\"n\">json<\/span><span class=\"o\">.<\/span><span class=\"n\">NewDecoder<\/span><span class=\"p\">(<\/span><span class=\"n\">resp<\/span><span class=\"o\">.<\/span><span class=\"n\">Body<\/span><span class=\"p\">)<\/span><span class=\"o\">.<\/span><span class=\"n\">Decode<\/span><span class=\"p\">(<\/span><span class=\"o\">&amp;<\/span><span class=\"n\">jwks<\/span><span class=\"p\">)<\/span>\n\n  <span class=\"k\">if<\/span> <span class=\"n\">err<\/span> <span class=\"o\">!=<\/span> <span class=\"no\">nil<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">return<\/span> <span class=\"n\">cert<\/span><span class=\"p\">,<\/span> <span class=\"n\">err<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"n\">x5c<\/span> <span class=\"o\">:=<\/span> <span class=\"n\">jwks<\/span><span class=\"o\">.<\/span><span class=\"n\">Keys<\/span><span class=\"p\">[<\/span><span class=\"m\">0<\/span><span class=\"p\">]<\/span><span class=\"o\">.<\/span><span class=\"n\">X5c<\/span>\n  <span class=\"k\">for<\/span> <span class=\"n\">k<\/span><span class=\"p\">,<\/span> <span class=\"n\">v<\/span> <span class=\"o\">:=<\/span> <span class=\"k\">range<\/span> <span class=\"n\">x5c<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">if<\/span> <span class=\"n\">token<\/span><span class=\"o\">.<\/span><span class=\"n\">Header<\/span><span class=\"p\">[<\/span><span class=\"s\">\"kid\"<\/span><span class=\"p\">]<\/span> <span class=\"o\">==<\/span> <span class=\"n\">jwks<\/span><span class=\"o\">.<\/span><span class=\"n\">Keys<\/span><span class=\"p\">[<\/span><span class=\"n\">k<\/span><span class=\"p\">]<\/span><span class=\"o\">.<\/span><span class=\"n\">Kid<\/span> <span class=\"p\">{<\/span>\n      <span class=\"n\">cert<\/span> <span class=\"o\">=<\/span> <span class=\"s\">\"-----BEGIN CERTIFICATE-----<\/span><span class=\"se\">\\n<\/span><span class=\"s\">\"<\/span> <span class=\"o\">+<\/span> <span class=\"n\">v<\/span> <span class=\"o\">+<\/span> <span class=\"s\">\"<\/span><span class=\"se\">\\n<\/span><span class=\"s\">-----END CERTIFICATE-----\"<\/span>\n    <span class=\"p\">}<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"k\">if<\/span> <span class=\"n\">cert<\/span> <span class=\"o\">==<\/span> <span class=\"s\">\"\"<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">return<\/span> <span class=\"n\">cert<\/span><span class=\"p\">,<\/span> <span class=\"n\">errors<\/span><span class=\"o\">.<\/span><span class=\"n\">New<\/span><span class=\"p\">(<\/span><span class=\"s\">\"unable to find appropriate key.\"<\/span><span class=\"p\">)<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"k\">return<\/span> <span class=\"n\">cert<\/span><span class=\"p\">,<\/span> <span class=\"no\">nil<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n\n<\/div>\n\n\n\n<h3>\n  \n  \n  Using the JWT Middleware\n<\/h3>\n\n<p>Using the middleware is very straight forward. We just pass it as a parameter to our routes definition.<br>\n<\/p>\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight go\"><code><span class=\"o\">...<\/span>\n\n<span class=\"n\">api<\/span><span class=\"o\">.<\/span><span class=\"n\">GET<\/span><span class=\"p\">(<\/span><span class=\"s\">\"\/jokes\"<\/span><span class=\"p\">,<\/span> <span class=\"n\">authMiddleware<\/span><span class=\"p\">(),<\/span> <span class=\"n\">JokeHandler<\/span><span class=\"p\">)<\/span>\n<span class=\"n\">api<\/span><span class=\"o\">.<\/span><span class=\"n\">POST<\/span><span class=\"p\">(<\/span><span class=\"s\">\"\/jokes\/like\/:jokeID\"<\/span><span class=\"p\">,<\/span> <span class=\"n\">authMiddleware<\/span><span class=\"p\">(),<\/span> <span class=\"n\">LikeJoke<\/span><span class=\"p\">)<\/span>\n\n<span class=\"o\">...<\/span>\n<\/code><\/pre>\n\n<\/div>\n\n\n\n<p>Our <code>main.go<\/code> file should look like this:<br>\n<\/p>\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight go\"><code><span class=\"k\">package<\/span> <span class=\"n\">main<\/span>\n\n<span class=\"k\">import<\/span> <span class=\"p\">(<\/span>\n  <span class=\"s\">\"encoding\/json\"<\/span>\n  <span class=\"s\">\"errors\"<\/span>\n  <span class=\"s\">\"fmt\"<\/span>\n  <span class=\"s\">\"log\"<\/span>\n  <span class=\"s\">\"net\/http\"<\/span>\n  <span class=\"s\">\"os\"<\/span>\n  <span class=\"s\">\"strconv\"<\/span>\n\n  <span class=\"n\">jwtmiddleware<\/span> <span class=\"s\">\"github.com\/auth0\/go-jwt-middleware\"<\/span>\n  <span class=\"n\">jwt<\/span> <span class=\"s\">\"github.com\/dgrijalva\/jwt-go\"<\/span>\n  <span class=\"s\">\"github.com\/gin-gonic\/contrib\/static\"<\/span>\n  <span class=\"s\">\"github.com\/gin-gonic\/gin\"<\/span>\n<span class=\"p\">)<\/span>\n\n<span class=\"k\">type<\/span> <span class=\"n\">Response<\/span> <span class=\"k\">struct<\/span> <span class=\"p\">{<\/span>\n  <span class=\"n\">Message<\/span> <span class=\"kt\">string<\/span> <span class=\"s\">`json:\"message\"`<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"k\">type<\/span> <span class=\"n\">Jwks<\/span> <span class=\"k\">struct<\/span> <span class=\"p\">{<\/span>\n  <span class=\"n\">Keys<\/span> <span class=\"p\">[]<\/span><span class=\"n\">JSONWebKeys<\/span> <span class=\"s\">`json:\"keys\"`<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"k\">type<\/span> <span class=\"n\">JSONWebKeys<\/span> <span class=\"k\">struct<\/span> <span class=\"p\">{<\/span>\n  <span class=\"n\">Kty<\/span> <span class=\"kt\">string<\/span>   <span class=\"s\">`json:\"kty\"`<\/span>\n  <span class=\"n\">Kid<\/span> <span class=\"kt\">string<\/span>   <span class=\"s\">`json:\"kid\"`<\/span>\n  <span class=\"n\">Use<\/span> <span class=\"kt\">string<\/span>   <span class=\"s\">`json:\"use\"`<\/span>\n  <span class=\"n\">N<\/span>   <span class=\"kt\">string<\/span>   <span class=\"s\">`json:\"n\"`<\/span>\n  <span class=\"n\">E<\/span>   <span class=\"kt\">string<\/span>   <span class=\"s\">`json:\"e\"`<\/span>\n  <span class=\"n\">X5c<\/span> <span class=\"p\">[]<\/span><span class=\"kt\">string<\/span> <span class=\"s\">`json:\"x5c\"`<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"k\">type<\/span> <span class=\"n\">Joke<\/span> <span class=\"k\">struct<\/span> <span class=\"p\">{<\/span>\n  <span class=\"n\">ID<\/span>    <span class=\"kt\">int<\/span>    <span class=\"s\">`json:\"id\" binding:\"required\"`<\/span>\n  <span class=\"n\">Likes<\/span> <span class=\"kt\">int<\/span>    <span class=\"s\">`json:\"likes\"`<\/span>\n  <span class=\"n\">Joke<\/span>  <span class=\"kt\">string<\/span> <span class=\"s\">`json:\"joke\" binding:\"required\"`<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"c\">\/** we'll create a list of jokes *\/<\/span>\n<span class=\"k\">var<\/span> <span class=\"n\">jokes<\/span> <span class=\"o\">=<\/span> <span class=\"p\">[]<\/span><span class=\"n\">Joke<\/span><span class=\"p\">{<\/span>\n  <span class=\"n\">Joke<\/span><span class=\"p\">{<\/span><span class=\"m\">1<\/span><span class=\"p\">,<\/span> <span class=\"m\">0<\/span><span class=\"p\">,<\/span> <span class=\"s\">\"Did you hear about the restaurant on the moon? Great food, no atmosphere.\"<\/span><span class=\"p\">},<\/span>\n  <span class=\"n\">Joke<\/span><span class=\"p\">{<\/span><span class=\"m\">2<\/span><span class=\"p\">,<\/span> <span class=\"m\">0<\/span><span class=\"p\">,<\/span> <span class=\"s\">\"What do you call a fake noodle? An Impasta.\"<\/span><span class=\"p\">},<\/span>\n  <span class=\"n\">Joke<\/span><span class=\"p\">{<\/span><span class=\"m\">3<\/span><span class=\"p\">,<\/span> <span class=\"m\">0<\/span><span class=\"p\">,<\/span> <span class=\"s\">\"How many apples grow on a tree? All of them.\"<\/span><span class=\"p\">},<\/span>\n  <span class=\"n\">Joke<\/span><span class=\"p\">{<\/span><span class=\"m\">4<\/span><span class=\"p\">,<\/span> <span class=\"m\">0<\/span><span class=\"p\">,<\/span> <span class=\"s\">\"Want to hear a joke about paper? Nevermind it's tearable.\"<\/span><span class=\"p\">},<\/span>\n  <span class=\"n\">Joke<\/span><span class=\"p\">{<\/span><span class=\"m\">5<\/span><span class=\"p\">,<\/span> <span class=\"m\">0<\/span><span class=\"p\">,<\/span> <span class=\"s\">\"I just watched a program about beavers. It was the best dam program I've ever seen.\"<\/span><span class=\"p\">},<\/span>\n  <span class=\"n\">Joke<\/span><span class=\"p\">{<\/span><span class=\"m\">6<\/span><span class=\"p\">,<\/span> <span class=\"m\">0<\/span><span class=\"p\">,<\/span> <span class=\"s\">\"Why did the coffee file a police report? It got mugged.\"<\/span><span class=\"p\">},<\/span>\n  <span class=\"n\">Joke<\/span><span class=\"p\">{<\/span><span class=\"m\">7<\/span><span class=\"p\">,<\/span> <span class=\"m\">0<\/span><span class=\"p\">,<\/span> <span class=\"s\">\"How does a penguin build it's house? Igloos it together.\"<\/span><span class=\"p\">},<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"k\">var<\/span> <span class=\"n\">jwtMiddleWare<\/span> <span class=\"o\">*<\/span><span class=\"n\">jwtmiddleware<\/span><span class=\"o\">.<\/span><span class=\"n\">JWTMiddleware<\/span>\n\n<span class=\"k\">func<\/span> <span class=\"n\">main<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n  <span class=\"n\">jwtMiddleware<\/span> <span class=\"o\">:=<\/span> <span class=\"n\">jwtmiddleware<\/span><span class=\"o\">.<\/span><span class=\"n\">New<\/span><span class=\"p\">(<\/span><span class=\"n\">jwtmiddleware<\/span><span class=\"o\">.<\/span><span class=\"n\">Options<\/span><span class=\"p\">{<\/span>\n    <span class=\"n\">ValidationKeyGetter<\/span><span class=\"o\">:<\/span> <span class=\"k\">func<\/span><span class=\"p\">(<\/span><span class=\"n\">token<\/span> <span class=\"o\">*<\/span><span class=\"n\">jwt<\/span><span class=\"o\">.<\/span><span class=\"n\">Token<\/span><span class=\"p\">)<\/span> <span class=\"p\">(<\/span><span class=\"k\">interface<\/span><span class=\"p\">{},<\/span> <span class=\"kt\">error<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n      <span class=\"n\">aud<\/span> <span class=\"o\">:=<\/span> <span class=\"n\">os<\/span><span class=\"o\">.<\/span><span class=\"n\">Getenv<\/span><span class=\"p\">(<\/span><span class=\"s\">\"AUTH0_API_AUDIENCE\"<\/span><span class=\"p\">)<\/span>\n      <span class=\"n\">checkAudience<\/span> <span class=\"o\">:=<\/span> <span class=\"n\">token<\/span><span class=\"o\">.<\/span><span class=\"n\">Claims<\/span><span class=\"o\">.<\/span><span class=\"p\">(<\/span><span class=\"n\">jwt<\/span><span class=\"o\">.<\/span><span class=\"n\">MapClaims<\/span><span class=\"p\">)<\/span><span class=\"o\">.<\/span><span class=\"n\">VerifyAudience<\/span><span class=\"p\">(<\/span><span class=\"n\">aud<\/span><span class=\"p\">,<\/span> <span class=\"no\">false<\/span><span class=\"p\">)<\/span>\n      <span class=\"k\">if<\/span> <span class=\"o\">!<\/span><span class=\"n\">checkAudience<\/span> <span class=\"p\">{<\/span>\n        <span class=\"k\">return<\/span> <span class=\"n\">token<\/span><span class=\"p\">,<\/span> <span class=\"n\">errors<\/span><span class=\"o\">.<\/span><span class=\"n\">New<\/span><span class=\"p\">(<\/span><span class=\"s\">\"Invalid audience.\"<\/span><span class=\"p\">)<\/span>\n      <span class=\"p\">}<\/span>\n      <span class=\"c\">\/\/ verify iss claim<\/span>\n      <span class=\"n\">iss<\/span> <span class=\"o\">:=<\/span> <span class=\"n\">os<\/span><span class=\"o\">.<\/span><span class=\"n\">Getenv<\/span><span class=\"p\">(<\/span><span class=\"s\">\"AUTH0_DOMAIN\"<\/span><span class=\"p\">)<\/span>\n      <span class=\"n\">checkIss<\/span> <span class=\"o\">:=<\/span> <span class=\"n\">token<\/span><span class=\"o\">.<\/span><span class=\"n\">Claims<\/span><span class=\"o\">.<\/span><span class=\"p\">(<\/span><span class=\"n\">jwt<\/span><span class=\"o\">.<\/span><span class=\"n\">MapClaims<\/span><span class=\"p\">)<\/span><span class=\"o\">.<\/span><span class=\"n\">VerifyIssuer<\/span><span class=\"p\">(<\/span><span class=\"n\">iss<\/span><span class=\"p\">,<\/span> <span class=\"no\">false<\/span><span class=\"p\">)<\/span>\n      <span class=\"k\">if<\/span> <span class=\"o\">!<\/span><span class=\"n\">checkIss<\/span> <span class=\"p\">{<\/span>\n        <span class=\"k\">return<\/span> <span class=\"n\">token<\/span><span class=\"p\">,<\/span> <span class=\"n\">errors<\/span><span class=\"o\">.<\/span><span class=\"n\">New<\/span><span class=\"p\">(<\/span><span class=\"s\">\"Invalid issuer.\"<\/span><span class=\"p\">)<\/span>\n      <span class=\"p\">}<\/span>\n\n      <span class=\"n\">cert<\/span><span class=\"p\">,<\/span> <span class=\"n\">err<\/span> <span class=\"o\">:=<\/span> <span class=\"n\">getPemCert<\/span><span class=\"p\">(<\/span><span class=\"n\">token<\/span><span class=\"p\">)<\/span>\n      <span class=\"k\">if<\/span> <span class=\"n\">err<\/span> <span class=\"o\">!=<\/span> <span class=\"no\">nil<\/span> <span class=\"p\">{<\/span>\n        <span class=\"n\">log<\/span><span class=\"o\">.<\/span><span class=\"n\">Fatalf<\/span><span class=\"p\">(<\/span><span class=\"s\">\"could not get cert: %+v\"<\/span><span class=\"p\">,<\/span> <span class=\"n\">err<\/span><span class=\"p\">)<\/span>\n      <span class=\"p\">}<\/span>\n\n      <span class=\"n\">result<\/span><span class=\"p\">,<\/span> <span class=\"n\">_<\/span> <span class=\"o\">:=<\/span> <span class=\"n\">jwt<\/span><span class=\"o\">.<\/span><span class=\"n\">ParseRSAPublicKeyFromPEM<\/span><span class=\"p\">([]<\/span><span class=\"kt\">byte<\/span><span class=\"p\">(<\/span><span class=\"n\">cert<\/span><span class=\"p\">))<\/span>\n      <span class=\"k\">return<\/span> <span class=\"n\">result<\/span><span class=\"p\">,<\/span> <span class=\"no\">nil<\/span>\n    <span class=\"p\">},<\/span>\n    <span class=\"n\">SigningMethod<\/span><span class=\"o\">:<\/span> <span class=\"n\">jwt<\/span><span class=\"o\">.<\/span><span class=\"n\">SigningMethodRS256<\/span><span class=\"p\">,<\/span>\n  <span class=\"p\">})<\/span>\n\n  <span class=\"n\">jwtMiddleWare<\/span> <span class=\"o\">=<\/span> <span class=\"n\">jwtMiddleware<\/span>\n  <span class=\"c\">\/\/ Set the router as the default one shipped with Gin<\/span>\n  <span class=\"n\">router<\/span> <span class=\"o\">:=<\/span> <span class=\"n\">gin<\/span><span class=\"o\">.<\/span><span class=\"n\">Default<\/span><span class=\"p\">()<\/span>\n\n  <span class=\"c\">\/\/ Serve the frontend<\/span>\n  <span class=\"n\">router<\/span><span class=\"o\">.<\/span><span class=\"n\">Use<\/span><span class=\"p\">(<\/span><span class=\"n\">static<\/span><span class=\"o\">.<\/span><span class=\"n\">Serve<\/span><span class=\"p\">(<\/span><span class=\"s\">\"\/\"<\/span><span class=\"p\">,<\/span> <span class=\"n\">static<\/span><span class=\"o\">.<\/span><span class=\"n\">LocalFile<\/span><span class=\"p\">(<\/span><span class=\"s\">\".\/views\"<\/span><span class=\"p\">,<\/span> <span class=\"no\">true<\/span><span class=\"p\">)))<\/span>\n\n  <span class=\"n\">api<\/span> <span class=\"o\">:=<\/span> <span class=\"n\">router<\/span><span class=\"o\">.<\/span><span class=\"n\">Group<\/span><span class=\"p\">(<\/span><span class=\"s\">\"\/api\"<\/span><span class=\"p\">)<\/span>\n  <span class=\"p\">{<\/span>\n    <span class=\"n\">api<\/span><span class=\"o\">.<\/span><span class=\"n\">GET<\/span><span class=\"p\">(<\/span><span class=\"s\">\"\/\"<\/span><span class=\"p\">,<\/span> <span class=\"k\">func<\/span><span class=\"p\">(<\/span><span class=\"n\">c<\/span> <span class=\"o\">*<\/span><span class=\"n\">gin<\/span><span class=\"o\">.<\/span><span class=\"n\">Context<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n      <span class=\"n\">c<\/span><span class=\"o\">.<\/span><span class=\"n\">JSON<\/span><span class=\"p\">(<\/span><span class=\"n\">http<\/span><span class=\"o\">.<\/span><span class=\"n\">StatusOK<\/span><span class=\"p\">,<\/span> <span class=\"n\">gin<\/span><span class=\"o\">.<\/span><span class=\"n\">H<\/span><span class=\"p\">{<\/span>\n        <span class=\"s\">\"message\"<\/span><span class=\"o\">:<\/span> <span class=\"s\">\"pong\"<\/span><span class=\"p\">,<\/span>\n      <span class=\"p\">})<\/span>\n    <span class=\"p\">})<\/span>\n    <span class=\"n\">api<\/span><span class=\"o\">.<\/span><span class=\"n\">GET<\/span><span class=\"p\">(<\/span><span class=\"s\">\"\/jokes\"<\/span><span class=\"p\">,<\/span> <span class=\"n\">authMiddleware<\/span><span class=\"p\">(),<\/span> <span class=\"n\">JokeHandler<\/span><span class=\"p\">)<\/span>\n    <span class=\"n\">api<\/span><span class=\"o\">.<\/span><span class=\"n\">POST<\/span><span class=\"p\">(<\/span><span class=\"s\">\"\/jokes\/like\/:jokeID\"<\/span><span class=\"p\">,<\/span> <span class=\"n\">authMiddleware<\/span><span class=\"p\">(),<\/span> <span class=\"n\">LikeJoke<\/span><span class=\"p\">)<\/span>\n  <span class=\"p\">}<\/span>\n  <span class=\"c\">\/\/ Start the app<\/span>\n  <span class=\"n\">router<\/span><span class=\"o\">.<\/span><span class=\"n\">Run<\/span><span class=\"p\">(<\/span><span class=\"s\">\":3000\"<\/span><span class=\"p\">)<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"k\">func<\/span> <span class=\"n\">getPemCert<\/span><span class=\"p\">(<\/span><span class=\"n\">token<\/span> <span class=\"o\">*<\/span><span class=\"n\">jwt<\/span><span class=\"o\">.<\/span><span class=\"n\">Token<\/span><span class=\"p\">)<\/span> <span class=\"p\">(<\/span><span class=\"kt\">string<\/span><span class=\"p\">,<\/span> <span class=\"kt\">error<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n  <span class=\"n\">cert<\/span> <span class=\"o\">:=<\/span> <span class=\"s\">\"\"<\/span>\n  <span class=\"n\">resp<\/span><span class=\"p\">,<\/span> <span class=\"n\">err<\/span> <span class=\"o\">:=<\/span> <span class=\"n\">http<\/span><span class=\"o\">.<\/span><span class=\"n\">Get<\/span><span class=\"p\">(<\/span><span class=\"n\">os<\/span><span class=\"o\">.<\/span><span class=\"n\">Getenv<\/span><span class=\"p\">(<\/span><span class=\"s\">\"AUTH0_DOMAIN\"<\/span><span class=\"p\">)<\/span> <span class=\"o\">+<\/span> <span class=\"s\">\".well-known\/jwks.json\"<\/span><span class=\"p\">)<\/span>\n  <span class=\"k\">if<\/span> <span class=\"n\">err<\/span> <span class=\"o\">!=<\/span> <span class=\"no\">nil<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">return<\/span> <span class=\"n\">cert<\/span><span class=\"p\">,<\/span> <span class=\"n\">err<\/span>\n  <span class=\"p\">}<\/span>\n  <span class=\"k\">defer<\/span> <span class=\"n\">resp<\/span><span class=\"o\">.<\/span><span class=\"n\">Body<\/span><span class=\"o\">.<\/span><span class=\"n\">Close<\/span><span class=\"p\">()<\/span>\n\n  <span class=\"k\">var<\/span> <span class=\"n\">jwks<\/span> <span class=\"o\">=<\/span> <span class=\"n\">Jwks<\/span><span class=\"p\">{}<\/span>\n  <span class=\"n\">err<\/span> <span class=\"o\">=<\/span> <span class=\"n\">json<\/span><span class=\"o\">.<\/span><span class=\"n\">NewDecoder<\/span><span class=\"p\">(<\/span><span class=\"n\">resp<\/span><span class=\"o\">.<\/span><span class=\"n\">Body<\/span><span class=\"p\">)<\/span><span class=\"o\">.<\/span><span class=\"n\">Decode<\/span><span class=\"p\">(<\/span><span class=\"o\">&amp;<\/span><span class=\"n\">jwks<\/span><span class=\"p\">)<\/span>\n\n  <span class=\"k\">if<\/span> <span class=\"n\">err<\/span> <span class=\"o\">!=<\/span> <span class=\"no\">nil<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">return<\/span> <span class=\"n\">cert<\/span><span class=\"p\">,<\/span> <span class=\"n\">err<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"n\">x5c<\/span> <span class=\"o\">:=<\/span> <span class=\"n\">jwks<\/span><span class=\"o\">.<\/span><span class=\"n\">Keys<\/span><span class=\"p\">[<\/span><span class=\"m\">0<\/span><span class=\"p\">]<\/span><span class=\"o\">.<\/span><span class=\"n\">X5c<\/span>\n  <span class=\"k\">for<\/span> <span class=\"n\">k<\/span><span class=\"p\">,<\/span> <span class=\"n\">v<\/span> <span class=\"o\">:=<\/span> <span class=\"k\">range<\/span> <span class=\"n\">x5c<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">if<\/span> <span class=\"n\">token<\/span><span class=\"o\">.<\/span><span class=\"n\">Header<\/span><span class=\"p\">[<\/span><span class=\"s\">\"kid\"<\/span><span class=\"p\">]<\/span> <span class=\"o\">==<\/span> <span class=\"n\">jwks<\/span><span class=\"o\">.<\/span><span class=\"n\">Keys<\/span><span class=\"p\">[<\/span><span class=\"n\">k<\/span><span class=\"p\">]<\/span><span class=\"o\">.<\/span><span class=\"n\">Kid<\/span> <span class=\"p\">{<\/span>\n      <span class=\"n\">cert<\/span> <span class=\"o\">=<\/span> <span class=\"s\">\"-----BEGIN CERTIFICATE-----<\/span><span class=\"se\">\\n<\/span><span class=\"s\">\"<\/span> <span class=\"o\">+<\/span> <span class=\"n\">v<\/span> <span class=\"o\">+<\/span> <span class=\"s\">\"<\/span><span class=\"se\">\\n<\/span><span class=\"s\">-----END CERTIFICATE-----\"<\/span>\n    <span class=\"p\">}<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"k\">if<\/span> <span class=\"n\">cert<\/span> <span class=\"o\">==<\/span> <span class=\"s\">\"\"<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">return<\/span> <span class=\"n\">cert<\/span><span class=\"p\">,<\/span> <span class=\"n\">errors<\/span><span class=\"o\">.<\/span><span class=\"n\">New<\/span><span class=\"p\">(<\/span><span class=\"s\">\"unable to find appropriate key\"<\/span><span class=\"p\">)<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"k\">return<\/span> <span class=\"n\">cert<\/span><span class=\"p\">,<\/span> <span class=\"no\">nil<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"c\">\/\/ authMiddleware intercepts the requests, and check for a valid jwt token<\/span>\n<span class=\"k\">func<\/span> <span class=\"n\">authMiddleware<\/span><span class=\"p\">()<\/span> <span class=\"n\">gin<\/span><span class=\"o\">.<\/span><span class=\"n\">HandlerFunc<\/span> <span class=\"p\">{<\/span>\n  <span class=\"k\">return<\/span> <span class=\"k\">func<\/span><span class=\"p\">(<\/span><span class=\"n\">c<\/span> <span class=\"o\">*<\/span><span class=\"n\">gin<\/span><span class=\"o\">.<\/span><span class=\"n\">Context<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"c\">\/\/ Get the client secret key<\/span>\n    <span class=\"n\">err<\/span> <span class=\"o\">:=<\/span> <span class=\"n\">jwtMiddleWare<\/span><span class=\"o\">.<\/span><span class=\"n\">CheckJWT<\/span><span class=\"p\">(<\/span><span class=\"n\">c<\/span><span class=\"o\">.<\/span><span class=\"n\">Writer<\/span><span class=\"p\">,<\/span> <span class=\"n\">c<\/span><span class=\"o\">.<\/span><span class=\"n\">Request<\/span><span class=\"p\">)<\/span>\n    <span class=\"k\">if<\/span> <span class=\"n\">err<\/span> <span class=\"o\">!=<\/span> <span class=\"no\">nil<\/span> <span class=\"p\">{<\/span>\n      <span class=\"c\">\/\/ Token not found<\/span>\n      <span class=\"n\">fmt<\/span><span class=\"o\">.<\/span><span class=\"n\">Println<\/span><span class=\"p\">(<\/span><span class=\"n\">err<\/span><span class=\"p\">)<\/span>\n      <span class=\"n\">c<\/span><span class=\"o\">.<\/span><span class=\"n\">Abort<\/span><span class=\"p\">()<\/span>\n      <span class=\"n\">c<\/span><span class=\"o\">.<\/span><span class=\"n\">Writer<\/span><span class=\"o\">.<\/span><span class=\"n\">WriteHeader<\/span><span class=\"p\">(<\/span><span class=\"n\">http<\/span><span class=\"o\">.<\/span><span class=\"n\">StatusUnauthorized<\/span><span class=\"p\">)<\/span>\n      <span class=\"n\">c<\/span><span class=\"o\">.<\/span><span class=\"n\">Writer<\/span><span class=\"o\">.<\/span><span class=\"n\">Write<\/span><span class=\"p\">([]<\/span><span class=\"kt\">byte<\/span><span class=\"p\">(<\/span><span class=\"s\">\"Unauthorized\"<\/span><span class=\"p\">))<\/span>\n      <span class=\"k\">return<\/span>\n    <span class=\"p\">}<\/span>\n  <span class=\"p\">}<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"c\">\/\/ JokeHandler returns a list of jokes available (in memory)<\/span>\n<span class=\"k\">func<\/span> <span class=\"n\">JokeHandler<\/span><span class=\"p\">(<\/span><span class=\"n\">c<\/span> <span class=\"o\">*<\/span><span class=\"n\">gin<\/span><span class=\"o\">.<\/span><span class=\"n\">Context<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n  <span class=\"n\">c<\/span><span class=\"o\">.<\/span><span class=\"n\">Header<\/span><span class=\"p\">(<\/span><span class=\"s\">\"Content-Type\"<\/span><span class=\"p\">,<\/span> <span class=\"s\">\"application\/json\"<\/span><span class=\"p\">)<\/span>\n\n  <span class=\"n\">c<\/span><span class=\"o\">.<\/span><span class=\"n\">JSON<\/span><span class=\"p\">(<\/span><span class=\"n\">http<\/span><span class=\"o\">.<\/span><span class=\"n\">StatusOK<\/span><span class=\"p\">,<\/span> <span class=\"n\">jokes<\/span><span class=\"p\">)<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"k\">func<\/span> <span class=\"n\">LikeJoke<\/span><span class=\"p\">(<\/span><span class=\"n\">c<\/span> <span class=\"o\">*<\/span><span class=\"n\">gin<\/span><span class=\"o\">.<\/span><span class=\"n\">Context<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n  <span class=\"c\">\/\/ Check joke ID is valid<\/span>\n  <span class=\"k\">if<\/span> <span class=\"n\">jokeid<\/span><span class=\"p\">,<\/span> <span class=\"n\">err<\/span> <span class=\"o\">:=<\/span> <span class=\"n\">strconv<\/span><span class=\"o\">.<\/span><span class=\"n\">Atoi<\/span><span class=\"p\">(<\/span><span class=\"n\">c<\/span><span class=\"o\">.<\/span><span class=\"n\">Param<\/span><span class=\"p\">(<\/span><span class=\"s\">\"jokeID\"<\/span><span class=\"p\">));<\/span> <span class=\"n\">err<\/span> <span class=\"o\">==<\/span> <span class=\"no\">nil<\/span> <span class=\"p\">{<\/span>\n    <span class=\"c\">\/\/ find joke and increment likes<\/span>\n    <span class=\"k\">for<\/span> <span class=\"n\">i<\/span> <span class=\"o\">:=<\/span> <span class=\"m\">0<\/span><span class=\"p\">;<\/span> <span class=\"n\">i<\/span> <span class=\"o\">&lt;<\/span> <span class=\"nb\">len<\/span><span class=\"p\">(<\/span><span class=\"n\">jokes<\/span><span class=\"p\">);<\/span> <span class=\"n\">i<\/span><span class=\"o\">++<\/span> <span class=\"p\">{<\/span>\n      <span class=\"k\">if<\/span> <span class=\"n\">jokes<\/span><span class=\"p\">[<\/span><span class=\"n\">i<\/span><span class=\"p\">]<\/span><span class=\"o\">.<\/span><span class=\"n\">ID<\/span> <span class=\"o\">==<\/span> <span class=\"n\">jokeid<\/span> <span class=\"p\">{<\/span>\n        <span class=\"n\">jokes<\/span><span class=\"p\">[<\/span><span class=\"n\">i<\/span><span class=\"p\">]<\/span><span class=\"o\">.<\/span><span class=\"n\">Likes<\/span> <span class=\"o\">=<\/span> <span class=\"n\">jokes<\/span><span class=\"p\">[<\/span><span class=\"n\">i<\/span><span class=\"p\">]<\/span><span class=\"o\">.<\/span><span class=\"n\">Likes<\/span> <span class=\"o\">+<\/span> <span class=\"m\">1<\/span>\n      <span class=\"p\">}<\/span>\n    <span class=\"p\">}<\/span>\n    <span class=\"n\">c<\/span><span class=\"o\">.<\/span><span class=\"n\">JSON<\/span><span class=\"p\">(<\/span><span class=\"n\">http<\/span><span class=\"o\">.<\/span><span class=\"n\">StatusOK<\/span><span class=\"p\">,<\/span> <span class=\"o\">&amp;<\/span><span class=\"n\">jokes<\/span><span class=\"p\">)<\/span>\n  <span class=\"p\">}<\/span> <span class=\"k\">else<\/span> <span class=\"p\">{<\/span>\n    <span class=\"c\">\/\/ the jokes ID is invalid<\/span>\n    <span class=\"n\">c<\/span><span class=\"o\">.<\/span><span class=\"n\">AbortWithStatus<\/span><span class=\"p\">(<\/span><span class=\"n\">http<\/span><span class=\"o\">.<\/span><span class=\"n\">StatusNotFound<\/span><span class=\"p\">)<\/span>\n  <span class=\"p\">}<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n\n<\/div>\n\n\n\n<p>Let's install the <code>jwtmiddleware<\/code> libraries:<br>\n<\/p>\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code><span class=\"nv\">$ <\/span>go get <span class=\"nt\">-u<\/span> github.com\/auth0\/go-jwt-middleware\n<span class=\"nv\">$ <\/span>go get <span class=\"nt\">-u<\/span> github.com\/dgrijalva\/jwt-go\n<\/code><\/pre>\n\n<\/div>\n\n\n\n<p>Let's source our environment file, and restart our app server:<br>\n<\/p>\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight go\"><code><span class=\"err\">$<\/span> <span class=\"n\">source<\/span> <span class=\"o\">.<\/span><span class=\"n\">env<\/span>\n<span class=\"err\">$<\/span> <span class=\"k\">go<\/span> <span class=\"n\">run<\/span> <span class=\"n\">main<\/span><span class=\"o\">.<\/span><span class=\"k\">go<\/span>\n<\/code><\/pre>\n\n<\/div>\n\n\n\n<p>Now if we try accessing any of the endpoints, you'd be faced with a <code>401 Unauthorized<\/code> error. That's because we need to send along a token with the request.<\/p>\n\n<h3>\n  \n  \n  Login with Auth0 and React\n<\/h3>\n\n<p>Let's implement a login system, so users can login or create accounts, so they have access to our jokes. We'll add to our <code>app.jsx<\/code> file, the following Auth0 credentials:<\/p>\n\n<ul>\n<li><code>AUTH0_CLIENT_ID<\/code><\/li>\n<li><code>AUTH0_DOMAIN<\/code><\/li>\n<li>\n<code>AUTH0_CALLBACK_URL<\/code> - The URL of your app<\/li>\n<li><code>AUTH0_API_AUDIENCE<\/code><\/li>\n<\/ul>\n\n<blockquote>\n<p>You can find the <code>AUTH0_CLIENT_ID<\/code>, <code>AUTH0_DOMAIN<\/code>, and <code>AUTH0_API_AUDIENCE<\/code> data from your Auth0 <a href=\"https:\/\/manage.auth0.com\/\" rel=\"noopener noreferrer\">management dashboard<\/a>.<\/p>\n<\/blockquote>\n\n<p>We need to set a <code>callback<\/code> which Auth0 redirects to. Navigate to the Clients section in your dashboard, and in the settings, let's set the callback to <code>http:\/\/localhost:3000<\/code>:<\/p>\n\n<p><a href=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fgr7bclxttd69c22ms9f8.png\" class=\"article-body-image-wrapper\"><img src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fgr7bclxttd69c22ms9f8.png\" alt=\"auth0-golang-gin-allowed-callbacks\" width=\"800\" height=\"453\"><\/a><\/p>\n\n<p>With the credentials in place, lets update our React components.<\/p>\n\n<h4>\n  \n  \n  APP component\n<\/h4>\n\n\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight jsx\"><code><span class=\"kd\">const<\/span> <span class=\"nx\">AUTH0_CLIENT_ID<\/span> <span class=\"o\">=<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">aIAOt9fkMZKrNsSsFqbKj5KTI0ObTDPP<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"kd\">const<\/span> <span class=\"nx\">AUTH0_DOMAIN<\/span> <span class=\"o\">=<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">hakaselabs.auth0.com<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"kd\">const<\/span> <span class=\"nx\">AUTH0_CALLBACK_URL<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">location<\/span><span class=\"p\">.<\/span><span class=\"nx\">href<\/span><span class=\"p\">;<\/span>\n<span class=\"kd\">const<\/span> <span class=\"nx\">AUTH0_API_AUDIENCE<\/span> <span class=\"o\">=<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">golang-gin<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n\n<span class=\"kd\">class<\/span> <span class=\"nc\">App<\/span> <span class=\"kd\">extends<\/span> <span class=\"nc\">React<\/span><span class=\"p\">.<\/span><span class=\"nx\">Component<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nf\">parseHash<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">auth0<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">auth0<\/span><span class=\"p\">.<\/span><span class=\"nc\">WebAuth<\/span><span class=\"p\">({<\/span>\n      <span class=\"na\">domain<\/span><span class=\"p\">:<\/span> <span class=\"nx\">AUTH0_DOMAIN<\/span><span class=\"p\">,<\/span>\n      <span class=\"na\">clientID<\/span><span class=\"p\">:<\/span> <span class=\"nx\">AUTH0_CLIENT_ID<\/span>\n    <span class=\"p\">});<\/span>\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">auth0<\/span><span class=\"p\">.<\/span><span class=\"nf\">parseHash<\/span><span class=\"p\">(<\/span><span class=\"nb\">window<\/span><span class=\"p\">.<\/span><span class=\"nx\">location<\/span><span class=\"p\">.<\/span><span class=\"nx\">hash<\/span><span class=\"p\">,<\/span> <span class=\"p\">(<\/span><span class=\"nx\">err<\/span><span class=\"p\">,<\/span> <span class=\"nx\">authResult<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n      <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">err<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n        <span class=\"k\">return<\/span> <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">log<\/span><span class=\"p\">(<\/span><span class=\"nx\">err<\/span><span class=\"p\">);<\/span>\n      <span class=\"p\">}<\/span>\n      <span class=\"k\">if <\/span><span class=\"p\">(<\/span>\n        <span class=\"nx\">authResult<\/span> <span class=\"o\">!==<\/span> <span class=\"kc\">null<\/span> <span class=\"o\">&amp;&amp;<\/span>\n        <span class=\"nx\">authResult<\/span><span class=\"p\">.<\/span><span class=\"nx\">accessToken<\/span> <span class=\"o\">!==<\/span> <span class=\"kc\">null<\/span> <span class=\"o\">&amp;&amp;<\/span>\n        <span class=\"nx\">authResult<\/span><span class=\"p\">.<\/span><span class=\"nx\">idToken<\/span> <span class=\"o\">!==<\/span> <span class=\"kc\">null<\/span>\n      <span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nx\">localStorage<\/span><span class=\"p\">.<\/span><span class=\"nf\">setItem<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">access_token<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"nx\">authResult<\/span><span class=\"p\">.<\/span><span class=\"nx\">accessToken<\/span><span class=\"p\">);<\/span>\n        <span class=\"nx\">localStorage<\/span><span class=\"p\">.<\/span><span class=\"nf\">setItem<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">id_token<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"nx\">authResult<\/span><span class=\"p\">.<\/span><span class=\"nx\">idToken<\/span><span class=\"p\">);<\/span>\n        <span class=\"nx\">localStorage<\/span><span class=\"p\">.<\/span><span class=\"nf\">setItem<\/span><span class=\"p\">(<\/span>\n          <span class=\"dl\">\"<\/span><span class=\"s2\">profile<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n          <span class=\"nx\">JSON<\/span><span class=\"p\">.<\/span><span class=\"nf\">stringify<\/span><span class=\"p\">(<\/span><span class=\"nx\">authResult<\/span><span class=\"p\">.<\/span><span class=\"nx\">idTokenPayload<\/span><span class=\"p\">)<\/span>\n        <span class=\"p\">);<\/span>\n        <span class=\"nb\">window<\/span><span class=\"p\">.<\/span><span class=\"nx\">location<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">window<\/span><span class=\"p\">.<\/span><span class=\"nx\">location<\/span><span class=\"p\">.<\/span><span class=\"nx\">href<\/span><span class=\"p\">.<\/span><span class=\"nf\">substr<\/span><span class=\"p\">(<\/span>\n          <span class=\"mi\">0<\/span><span class=\"p\">,<\/span>\n          <span class=\"nb\">window<\/span><span class=\"p\">.<\/span><span class=\"nx\">location<\/span><span class=\"p\">.<\/span><span class=\"nx\">href<\/span><span class=\"p\">.<\/span><span class=\"nf\">indexOf<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">#<\/span><span class=\"dl\">\"<\/span><span class=\"p\">)<\/span>\n        <span class=\"p\">);<\/span>\n      <span class=\"p\">}<\/span>\n    <span class=\"p\">});<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nf\">setup<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nx\">$<\/span><span class=\"p\">.<\/span><span class=\"nf\">ajaxSetup<\/span><span class=\"p\">({<\/span>\n      <span class=\"na\">beforeSend<\/span><span class=\"p\">:<\/span> <span class=\"p\">(<\/span><span class=\"nx\">r<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n        <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">localStorage<\/span><span class=\"p\">.<\/span><span class=\"nf\">getItem<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">access_token<\/span><span class=\"dl\">\"<\/span><span class=\"p\">))<\/span> <span class=\"p\">{<\/span>\n          <span class=\"nx\">r<\/span><span class=\"p\">.<\/span><span class=\"nf\">setRequestHeader<\/span><span class=\"p\">(<\/span>\n            <span class=\"dl\">\"<\/span><span class=\"s2\">Authorization<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n            <span class=\"dl\">\"<\/span><span class=\"s2\">Bearer <\/span><span class=\"dl\">\"<\/span> <span class=\"o\">+<\/span> <span class=\"nx\">localStorage<\/span><span class=\"p\">.<\/span><span class=\"nf\">getItem<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">access_token<\/span><span class=\"dl\">\"<\/span><span class=\"p\">)<\/span>\n          <span class=\"p\">);<\/span>\n        <span class=\"p\">}<\/span>\n      <span class=\"p\">}<\/span>\n    <span class=\"p\">});<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nf\">setState<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n    <span class=\"kd\">let<\/span> <span class=\"nx\">idToken<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">localStorage<\/span><span class=\"p\">.<\/span><span class=\"nf\">getItem<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">id_token<\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span>\n    <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">idToken<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n      <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">loggedIn<\/span> <span class=\"o\">=<\/span> <span class=\"kc\">true<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">}<\/span> <span class=\"k\">else<\/span> <span class=\"p\">{<\/span>\n      <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">loggedIn<\/span> <span class=\"o\">=<\/span> <span class=\"kc\">false<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">}<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nf\">componentWillMount<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nf\">setup<\/span><span class=\"p\">();<\/span>\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nf\">parseHash<\/span><span class=\"p\">();<\/span>\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nf\">setState<\/span><span class=\"p\">();<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nf\">render<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">loggedIn<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n      <span class=\"k\">return<\/span> <span class=\"p\">&lt;<\/span><span class=\"nc\">LoggedIn<\/span> <span class=\"p\">\/&gt;;<\/span>\n    <span class=\"p\">}<\/span>\n    <span class=\"k\">return<\/span> <span class=\"p\">&lt;<\/span><span class=\"nc\">Home<\/span> <span class=\"p\">\/&gt;;<\/span>\n  <span class=\"p\">}<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n\n<\/div>\n\n\n\n<p>We updated the App component with three component methods (<code>setup<\/code>, <code>parseHash<\/code> and <code>setState<\/code>), and a lifecycle method <code>componentWillMount<\/code>. The <code>parseHash<\/code> method, initializes the <code>auth0<\/code> <code>webAuth<\/code> client, and parses the hash to a more readable format, saving them to localSt.  to show the lock screen, capture and store the user token and add the correct authorization header to any requests to our API<\/p>\n\n<h4>\n  \n  \n  Home component\n<\/h4>\n\n<p>Our Home component will be updated, we'll add the functionality for the <code>authenticate<\/code> method, which will trigger the hosted lock screen to display, and allow our users login or signup.<br>\n<\/p>\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight jsx\"><code><span class=\"kd\">class<\/span> <span class=\"nc\">Home<\/span> <span class=\"kd\">extends<\/span> <span class=\"nc\">React<\/span><span class=\"p\">.<\/span><span class=\"nx\">Component<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nf\">constructor<\/span><span class=\"p\">(<\/span><span class=\"nx\">props<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">super<\/span><span class=\"p\">(<\/span><span class=\"nx\">props<\/span><span class=\"p\">);<\/span>\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">authenticate<\/span> <span class=\"o\">=<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">authenticate<\/span><span class=\"p\">.<\/span><span class=\"nf\">bind<\/span><span class=\"p\">(<\/span><span class=\"k\">this<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n  <span class=\"nf\">authenticate<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">WebAuth<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">auth0<\/span><span class=\"p\">.<\/span><span class=\"nc\">WebAuth<\/span><span class=\"p\">({<\/span>\n      <span class=\"na\">domain<\/span><span class=\"p\">:<\/span> <span class=\"nx\">AUTH0_DOMAIN<\/span><span class=\"p\">,<\/span>\n      <span class=\"na\">clientID<\/span><span class=\"p\">:<\/span> <span class=\"nx\">AUTH0_CLIENT_ID<\/span><span class=\"p\">,<\/span>\n      <span class=\"na\">scope<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">openid profile<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n      <span class=\"na\">audience<\/span><span class=\"p\">:<\/span> <span class=\"nx\">AUTH0_API_AUDIENCE<\/span><span class=\"p\">,<\/span>\n      <span class=\"na\">responseType<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">token id_token<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n      <span class=\"na\">redirectUri<\/span><span class=\"p\">:<\/span> <span class=\"nx\">AUTH0_CALLBACK_URL<\/span>\n    <span class=\"p\">});<\/span>\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">WebAuth<\/span><span class=\"p\">.<\/span><span class=\"nf\">authorize<\/span><span class=\"p\">();<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nf\">render<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\n      <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"container\"<\/span><span class=\"p\">&gt;<\/span>\n        <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"row\"<\/span><span class=\"p\">&gt;<\/span>\n          <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"col-xs-8 col-xs-offset-2 jumbotron text-center\"<\/span><span class=\"p\">&gt;<\/span>\n            <span class=\"p\">&lt;<\/span><span class=\"nt\">h1<\/span><span class=\"p\">&gt;<\/span>Jokeish<span class=\"p\">&lt;\/<\/span><span class=\"nt\">h1<\/span><span class=\"p\">&gt;<\/span>\n            <span class=\"p\">&lt;<\/span><span class=\"nt\">p<\/span><span class=\"p\">&gt;<\/span>A load of Dad jokes XD<span class=\"p\">&lt;\/<\/span><span class=\"nt\">p<\/span><span class=\"p\">&gt;<\/span>\n            <span class=\"p\">&lt;<\/span><span class=\"nt\">p<\/span><span class=\"p\">&gt;<\/span>Sign in to get access <span class=\"p\">&lt;\/<\/span><span class=\"nt\">p<\/span><span class=\"p\">&gt;<\/span>\n            <span class=\"p\">&lt;<\/span><span class=\"nt\">a<\/span>\n              <span class=\"na\">onClick<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">authenticate<\/span><span class=\"si\">}<\/span>\n              <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"btn btn-primary btn-lg btn-login btn-block\"<\/span>\n            <span class=\"p\">&gt;<\/span>\n              Sign In\n            <span class=\"p\">&lt;\/<\/span><span class=\"nt\">a<\/span><span class=\"p\">&gt;<\/span>\n          <span class=\"p\">&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n        <span class=\"p\">&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n      <span class=\"p\">&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n    <span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n\n<\/div>\n\n\n\n<h4>\n  \n  \n  LoggedIn Component\n<\/h4>\n\n<p>We will update the <code>LoggedIn<\/code> component to communicate with our API, and pull all jokes, pass each joke as a <code>prop<\/code> to the <code>Joke<\/code> component, which renders a bootstrap pannel. Let's write those:<br>\n<\/p>\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight jsx\"><code><span class=\"kd\">class<\/span> <span class=\"nc\">LoggedIn<\/span> <span class=\"kd\">extends<\/span> <span class=\"nc\">React<\/span><span class=\"p\">.<\/span><span class=\"nx\">Component<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nf\">constructor<\/span><span class=\"p\">(<\/span><span class=\"nx\">props<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">super<\/span><span class=\"p\">(<\/span><span class=\"nx\">props<\/span><span class=\"p\">);<\/span>\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">state<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span>\n      <span class=\"na\">jokes<\/span><span class=\"p\">:<\/span> <span class=\"p\">[]<\/span>\n    <span class=\"p\">};<\/span>\n\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">serverRequest<\/span> <span class=\"o\">=<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">serverRequest<\/span><span class=\"p\">.<\/span><span class=\"nf\">bind<\/span><span class=\"p\">(<\/span><span class=\"k\">this<\/span><span class=\"p\">);<\/span>\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">logout<\/span> <span class=\"o\">=<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">logout<\/span><span class=\"p\">.<\/span><span class=\"nf\">bind<\/span><span class=\"p\">(<\/span><span class=\"k\">this<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nf\">logout<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nx\">localStorage<\/span><span class=\"p\">.<\/span><span class=\"nf\">removeItem<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">id_token<\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span>\n    <span class=\"nx\">localStorage<\/span><span class=\"p\">.<\/span><span class=\"nf\">removeItem<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">access_token<\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span>\n    <span class=\"nx\">localStorage<\/span><span class=\"p\">.<\/span><span class=\"nf\">removeItem<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">profile<\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span>\n    <span class=\"nx\">location<\/span><span class=\"p\">.<\/span><span class=\"nf\">reload<\/span><span class=\"p\">();<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nf\">serverRequest<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nx\">$<\/span><span class=\"p\">.<\/span><span class=\"nf\">get<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">http:\/\/localhost:3000\/api\/jokes<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"nx\">res<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n      <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nf\">setState<\/span><span class=\"p\">({<\/span>\n        <span class=\"na\">jokes<\/span><span class=\"p\">:<\/span> <span class=\"nx\">res<\/span>\n      <span class=\"p\">});<\/span>\n    <span class=\"p\">});<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nf\">componentDidMount<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nf\">serverRequest<\/span><span class=\"p\">();<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nf\">render<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\n      <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"container\"<\/span><span class=\"p\">&gt;<\/span>\n        <span class=\"p\">&lt;<\/span><span class=\"nt\">br<\/span> <span class=\"p\">\/&gt;<\/span>\n        <span class=\"p\">&lt;<\/span><span class=\"nt\">span<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"pull-right\"<\/span><span class=\"p\">&gt;<\/span>\n          <span class=\"p\">&lt;<\/span><span class=\"nt\">a<\/span> <span class=\"na\">onClick<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">logout<\/span><span class=\"si\">}<\/span><span class=\"p\">&gt;<\/span>Log out<span class=\"p\">&lt;\/<\/span><span class=\"nt\">a<\/span><span class=\"p\">&gt;<\/span>\n        <span class=\"p\">&lt;\/<\/span><span class=\"nt\">span<\/span><span class=\"p\">&gt;<\/span>\n        <span class=\"p\">&lt;<\/span><span class=\"nt\">h2<\/span><span class=\"p\">&gt;<\/span>Jokeish<span class=\"p\">&lt;\/<\/span><span class=\"nt\">h2<\/span><span class=\"p\">&gt;<\/span>\n        <span class=\"p\">&lt;<\/span><span class=\"nt\">p<\/span><span class=\"p\">&gt;<\/span>Let's feed you with some funny Jokes!!!<span class=\"p\">&lt;\/<\/span><span class=\"nt\">p<\/span><span class=\"p\">&gt;<\/span>\n        <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"row\"<\/span><span class=\"p\">&gt;<\/span>\n          <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"container\"<\/span><span class=\"p\">&gt;<\/span>\n            <span class=\"si\">{<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">state<\/span><span class=\"p\">.<\/span><span class=\"nx\">jokes<\/span><span class=\"p\">.<\/span><span class=\"nf\">map<\/span><span class=\"p\">(<\/span><span class=\"kd\">function<\/span><span class=\"p\">(<\/span><span class=\"nx\">joke<\/span><span class=\"p\">,<\/span> <span class=\"nx\">i<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n              <span class=\"k\">return<\/span> <span class=\"p\">&lt;<\/span><span class=\"nc\">Joke<\/span> <span class=\"na\">key<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">i<\/span><span class=\"si\">}<\/span> <span class=\"na\">joke<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">joke<\/span><span class=\"si\">}<\/span> <span class=\"p\">\/&gt;;<\/span>\n            <span class=\"p\">})<\/span><span class=\"si\">}<\/span>\n          <span class=\"p\">&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n        <span class=\"p\">&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n      <span class=\"p\">&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n    <span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n\n<\/div>\n\n\n\n<h4>\n  \n  \n  Joke Component\n<\/h4>\n\n<p>We'll also update the <code>Joke<\/code> component to format each Joke item passed to it from the Parent compoent (<code>LoggedIn<\/code>), and add a <code>like<\/code> method, which will increment the likes of a Joke.<br>\n<\/p>\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight jsx\"><code><span class=\"kd\">class<\/span> <span class=\"nc\">Joke<\/span> <span class=\"kd\">extends<\/span> <span class=\"nc\">React<\/span><span class=\"p\">.<\/span><span class=\"nx\">Component<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nf\">constructor<\/span><span class=\"p\">(<\/span><span class=\"nx\">props<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">super<\/span><span class=\"p\">(<\/span><span class=\"nx\">props<\/span><span class=\"p\">);<\/span>\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">state<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span>\n      <span class=\"na\">liked<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"\"<\/span><span class=\"p\">,<\/span>\n      <span class=\"na\">jokes<\/span><span class=\"p\">:<\/span> <span class=\"p\">[]<\/span>\n    <span class=\"p\">};<\/span>\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">like<\/span> <span class=\"o\">=<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">like<\/span><span class=\"p\">.<\/span><span class=\"nf\">bind<\/span><span class=\"p\">(<\/span><span class=\"k\">this<\/span><span class=\"p\">);<\/span>\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">serverRequest<\/span> <span class=\"o\">=<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">serverRequest<\/span><span class=\"p\">.<\/span><span class=\"nf\">bind<\/span><span class=\"p\">(<\/span><span class=\"k\">this<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nf\">like<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n    <span class=\"kd\">let<\/span> <span class=\"nx\">joke<\/span> <span class=\"o\">=<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">props<\/span><span class=\"p\">.<\/span><span class=\"nx\">joke<\/span><span class=\"p\">;<\/span>\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nf\">serverRequest<\/span><span class=\"p\">(<\/span><span class=\"nx\">joke<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n  <span class=\"nf\">serverRequest<\/span><span class=\"p\">(<\/span><span class=\"nx\">joke<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nx\">$<\/span><span class=\"p\">.<\/span><span class=\"nf\">post<\/span><span class=\"p\">(<\/span>\n      <span class=\"dl\">\"<\/span><span class=\"s2\">http:\/\/localhost:3000\/api\/jokes\/like\/<\/span><span class=\"dl\">\"<\/span> <span class=\"o\">+<\/span> <span class=\"nx\">joke<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"p\">,<\/span>\n      <span class=\"p\">{<\/span> <span class=\"na\">like<\/span><span class=\"p\">:<\/span> <span class=\"mi\">1<\/span> <span class=\"p\">},<\/span>\n      <span class=\"nx\">res<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">log<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">res... <\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"nx\">res<\/span><span class=\"p\">);<\/span>\n        <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nf\">setState<\/span><span class=\"p\">({<\/span> <span class=\"na\">liked<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">Liked!<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"na\">jokes<\/span><span class=\"p\">:<\/span> <span class=\"nx\">res<\/span> <span class=\"p\">});<\/span>\n        <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">props<\/span><span class=\"p\">.<\/span><span class=\"nx\">jokes<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">res<\/span><span class=\"p\">;<\/span>\n      <span class=\"p\">}<\/span>\n    <span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nf\">render<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\n      <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"col-xs-4\"<\/span><span class=\"p\">&gt;<\/span>\n        <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"panel panel-default\"<\/span><span class=\"p\">&gt;<\/span>\n          <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"panel-heading\"<\/span><span class=\"p\">&gt;<\/span>\n            #<span class=\"si\">{<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">props<\/span><span class=\"p\">.<\/span><span class=\"nx\">joke<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"si\">}{<\/span><span class=\"dl\">\"<\/span><span class=\"s2\"> <\/span><span class=\"dl\">\"<\/span><span class=\"si\">}<\/span>\n            <span class=\"p\">&lt;<\/span><span class=\"nt\">span<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"pull-right\"<\/span><span class=\"p\">&gt;<\/span><span class=\"si\">{<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">state<\/span><span class=\"p\">.<\/span><span class=\"nx\">liked<\/span><span class=\"si\">}<\/span><span class=\"p\">&lt;\/<\/span><span class=\"nt\">span<\/span><span class=\"p\">&gt;<\/span>\n          <span class=\"p\">&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n          <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"panel-body\"<\/span><span class=\"p\">&gt;<\/span><span class=\"si\">{<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">props<\/span><span class=\"p\">.<\/span><span class=\"nx\">joke<\/span><span class=\"p\">.<\/span><span class=\"nx\">joke<\/span><span class=\"si\">}<\/span><span class=\"p\">&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n          <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"panel-footer\"<\/span><span class=\"p\">&gt;<\/span>\n            <span class=\"si\">{<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">props<\/span><span class=\"p\">.<\/span><span class=\"nx\">joke<\/span><span class=\"p\">.<\/span><span class=\"nx\">likes<\/span><span class=\"si\">}<\/span> Likes <span class=\"ni\">&amp;nbsp;<\/span>\n            <span class=\"p\">&lt;<\/span><span class=\"nt\">a<\/span> <span class=\"na\">onClick<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">like<\/span><span class=\"si\">}<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"btn btn-default\"<\/span><span class=\"p\">&gt;<\/span>\n              <span class=\"p\">&lt;<\/span><span class=\"nt\">span<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"glyphicon glyphicon-thumbs-up\"<\/span> <span class=\"p\">\/&gt;<\/span>\n            <span class=\"p\">&lt;\/<\/span><span class=\"nt\">a<\/span><span class=\"p\">&gt;<\/span>\n          <span class=\"p\">&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n        <span class=\"p\">&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n      <span class=\"p\">&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n    <span class=\"p\">)<\/span>\n  <span class=\"p\">}<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n\n<\/div>\n\n\n\n<h3>\n  \n  \n  Putting it all together\n<\/h3>\n\n<p>With the UI and API complete, we can test our app. We'll start of by booting our server <code>source .env &amp;&amp; go run main.go<\/code>, and the navigate to <code>http:\/\/localhost:3000<\/code> from any browser, you should see the <code>Home<\/code> component with a signin button. Clicking on the signin button will redirect to a hosted Lock page, create an account or login, to continue using the application.<\/p>\n\n<p><a href=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fs4xfkaewkwdvktn5cl00.png\" class=\"article-body-image-wrapper\"><img src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fs4xfkaewkwdvktn5cl00.png\" alt=\"golang-gin-home-component\" width=\"800\" height=\"453\"><\/a><br>\n<em>Home<\/em><\/p>\n\n<p><a href=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frf05v6woetqumtcamfvo.png\" class=\"article-body-image-wrapper\"><img src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frf05v6woetqumtcamfvo.png\" alt=\"golang-gin-login-screen\" width=\"\" height=\"\"><\/a><br>\n<em>Auth0 Hosted Lock Screen<\/em><\/p>\n\n<p><a href=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fg7jb4yc6epgvyxoo8gr9.png\" class=\"article-body-image-wrapper\"><img src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fg7jb4yc6epgvyxoo8gr9.png\" alt=\"golang-gin-demo-shot\" width=\"800\" height=\"453\"><\/a><br>\n<em>LoggedIn App view<\/em><\/p>\n\n<h3>\n  \n  \n  Conclusion\n<\/h3>\n\n<p>Congrats! You have learned how to build an application and an API with Go and the GIN framework.<\/p>\n\n<p>This tutorial is designed to help you get started on building and adding authentication to a Golang app with the GIN framework.<\/p>\n\n<p>Did I miss something important? Let me know of it in the comments.<\/p>\n\n","category":["webdev","go","react","programming"]},{"title":"The CouchDB Replicator Database - A Short Overview","pubDate":"Thu, 19 Apr 2018 00:59:30 +0000","link":"https:\/\/dev.to\/codehakase\/the-couchdb-replicator-database---a-short-overview-3j86","guid":"https:\/\/dev.to\/codehakase\/the-couchdb-replicator-database---a-short-overview-3j86","description":"<p><strong>TL;DR:<\/strong> In this article, I'll give an overview of the replicator database in CouchDB, how to spin off a replication task in CouchDB<\/p>\n\n\n\n\n<p><strong>CouchDB<\/strong> is a database that completely embraces the web. CouchDB stores your data as JSON documents, and allows you access these documents easily, from a web interface or its <a href=\"http:\/\/docs.couchdb.org\/en\/2.1.1\/api\/basics.html#api-basics\">REST API<\/a>. We won't be going too deep into couchdb as it would be out of scope for this article - I'll write one of those pretty soon.<\/p>\n\n<h2>\n  \n  \n  Replication in CouchDB\n<\/h2>\n\n<p>Replication involves a source and a destination database, which can co-exist on the same or on different CouchDB instances. The sole purpose and aim of replication is that at the end of the process, all active documents on the source database are also in the destination database, and all documents deleted in the source databases are also deleted on the destination database.<\/p>\n\n<h3>\n  \n  \n  The Replicator Database\n<\/h3>\n\n<p>This database can exist on any CouchDB node. The replicator database is where you <code>PUT<\/code> or <code>POST<\/code> documents to trigger replications, and you issue a <code>DELETE<\/code> to cancel any ongoing replications set. The default label for the replicator database is <em>_replicator<\/em>. This name can be changed at any point in time from the CouchDB configuration.<\/p>\n\n<blockquote>\n<p>Before proceeding to replicating a database, note, for security reasons, CouchDB is by default configured to listen to localhost\/127.0.0.1 only. That means it can't replicate remote CouchDB server(s). To allow remote replication, CouchDB has to bound to <em>0.0.0.0<\/em>, this is set on the source server. To change bind address, you can do so from the <a href=\"http:\/\/localhost:5984\/_utils\/config.html\">Futon config page<\/a> or locate <code>bind_address<\/code> in your CouchDB config.<\/p>\n<\/blockquote>\n\n<h3>\n  \n  \n  Structure of the Replicator Database Documents\n<\/h3>\n\n<p>To trigger a replication, you create a document in the <strong>_replicator<\/strong> database. Its structure should look like this:<br>\n<\/p>\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight json\"><code><span class=\"p\">{<\/span><span class=\"w\">\n  <\/span><span class=\"nl\">\"_id\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"test_replication\"<\/span><span class=\"p\">,<\/span><span class=\"w\">\n  <\/span><span class=\"nl\">\"source\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"mydb\"<\/span><span class=\"p\">,<\/span><span class=\"w\">\n  <\/span><span class=\"nl\">\"target\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"http:\/\/someserver.com:5984\/mydb\"<\/span><span class=\"p\">,<\/span><span class=\"w\">\n  <\/span><span class=\"nl\">\"create_target\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"kc\">true<\/span><span class=\"w\">\n<\/span><span class=\"p\">}<\/span><span class=\"w\">\n<\/span><\/code><\/pre>\n\n<\/div>\n\n\n\n<p>Saving the above document, the couchdb daemon triggers a replication, with the content of the document. A log entry should look like these:<br>\n<\/p>\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>[Thu, 18 Apr 2018 19:43:59 WAT] [info] Document `test_replication` triggered replication `REV_+create_target`\n[Thu, 18 Apr 2018 19:44:37 WAT] [info] Replication `REV_+create_target` finished (triggered by document `test_replication`)\n<\/code><\/pre>\n\n<\/div>\n\n\n\n<p>When a replication is triggered, the document is updated by CouchDB some new fields:<br>\n<\/p>\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight json\"><code><span class=\"p\">{<\/span><span class=\"w\">\n  <\/span><span class=\"nl\">\"_id\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"test_replication\"<\/span><span class=\"p\">,<\/span><span class=\"w\">\n  <\/span><span class=\"nl\">\"source\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"mydb\"<\/span><span class=\"p\">,<\/span><span class=\"w\">\n  <\/span><span class=\"nl\">\"target\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"http:\/\/someserver.com:5984\/mydb\"<\/span><span class=\"p\">,<\/span><span class=\"w\">\n  <\/span><span class=\"nl\">\"create_target\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"kc\">true<\/span><span class=\"p\">,<\/span><span class=\"w\">\n  <\/span><span class=\"nl\">\"_replication_id\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"some-id-goes-here\"<\/span><span class=\"p\">,<\/span><span class=\"w\">\n  <\/span><span class=\"nl\">\"_replication_state\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"triggered\"<\/span><span class=\"p\">,<\/span><span class=\"w\">\n  <\/span><span class=\"nl\">\"_replication_state_time\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"2018-04-18T19:46:32\"<\/span><span class=\"w\">\n<\/span><span class=\"p\">}<\/span><span class=\"w\">\n<\/span><\/code><\/pre>\n\n<\/div>\n\n\n\n<p>Little note on the new fields added by CouchDB:<\/p>\n\n<ul>\n<li>\n<strong>_replication_id<\/strong> - This is the ID assigned to the replication operation<\/li>\n<li>\n<strong>_replication_state<\/strong> - The current state of the replication<\/li>\n<li>\n<strong>_replication_state_time<\/strong> - The timestamp that tells when the current replication state was set<\/li>\n<\/ul>\n\n<h3>\n  \n  \n  Duplicate Replication Documents?\n<\/h3>\n\n<p>There could be a case where two or more documents are added to the <strong>_replicator<\/strong> database, defining the same replication operation:<br>\n<\/p>\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight json\"><code><span class=\"err\">\/\/<\/span><span class=\"w\"> <\/span><span class=\"err\">first<\/span><span class=\"w\"> <\/span><span class=\"err\">document<\/span><span class=\"w\">\n<\/span><span class=\"p\">{<\/span><span class=\"w\">\n  <\/span><span class=\"nl\">\"_id\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"replication_1\"<\/span><span class=\"p\">,<\/span><span class=\"w\">\n  <\/span><span class=\"nl\">\"source\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"mydb\"<\/span><span class=\"p\">,<\/span><span class=\"w\">\n  <\/span><span class=\"nl\">\"target\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"http:\/\/someserver.com:5984\/mydb\"<\/span><span class=\"w\">\n<\/span><span class=\"p\">}<\/span><span class=\"w\">\n\n<\/span><span class=\"err\">\/\/<\/span><span class=\"w\"> <\/span><span class=\"err\">second<\/span><span class=\"w\"> <\/span><span class=\"err\">document<\/span><span class=\"w\">\n<\/span><span class=\"p\">{<\/span><span class=\"w\">\n  <\/span><span class=\"nl\">\"_id\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"replication_2\"<\/span><span class=\"p\">,<\/span><span class=\"w\">\n  <\/span><span class=\"nl\">\"source\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"mydb\"<\/span><span class=\"p\">,<\/span><span class=\"w\">\n  <\/span><span class=\"nl\">\"target\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"http:\/\/someserver.com:5984\/mydb\"<\/span><span class=\"w\">\n<\/span><span class=\"p\">}<\/span><span class=\"w\">\n<\/span><\/code><\/pre>\n\n<\/div>\n\n\n\n<p>From the above we can tell that both document defines the same replication, only difference is the document ids. CouchDB will definitely trigger this replication, but this time something else happens. The first document <code>replication_1<\/code>, may trigger the replication, CouchDB updates the doc with the fields <code>_replicaton_id, _replication_state, and _replication_state_time<\/code>. However, the second document <code>replication_2<\/code> doesn't get updated with same fields, instead, CouchDB upadates with just one field - <code>_replication_id<\/code>, which is the same set on the first document.<br>\n<\/p>\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight json\"><code><span class=\"err\">\/\/<\/span><span class=\"w\"> <\/span><span class=\"err\">after<\/span><span class=\"w\"> <\/span><span class=\"err\">replication<\/span><span class=\"w\"> <\/span><span class=\"err\">is<\/span><span class=\"w\"> <\/span><span class=\"err\">triggered<\/span><span class=\"w\">\n\n<\/span><span class=\"err\">\/\/<\/span><span class=\"w\"> <\/span><span class=\"err\">first<\/span><span class=\"w\"> <\/span><span class=\"err\">document<\/span><span class=\"w\">\n<\/span><span class=\"p\">{<\/span><span class=\"w\">\n  <\/span><span class=\"nl\">\"_id\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"replication_1\"<\/span><span class=\"p\">,<\/span><span class=\"w\">\n  <\/span><span class=\"nl\">\"source\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"mydb\"<\/span><span class=\"p\">,<\/span><span class=\"w\">\n  <\/span><span class=\"nl\">\"target\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"http:\/\/someserver.com:5984\/mydb\"<\/span><span class=\"p\">,<\/span><span class=\"w\">\n  <\/span><span class=\"nl\">\"_replication_id\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"my-sample-replication-id\"<\/span><span class=\"p\">,<\/span><span class=\"w\">\n  <\/span><span class=\"nl\">\"_replication_state\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"triggered\"<\/span><span class=\"p\">,<\/span><span class=\"w\">\n  <\/span><span class=\"nl\">\"_replication_state_time\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"2018-04-18T19:46:32\"<\/span><span class=\"w\">\n\n<\/span><span class=\"p\">}<\/span><span class=\"w\">\n\n<\/span><span class=\"err\">\/\/<\/span><span class=\"w\"> <\/span><span class=\"err\">second<\/span><span class=\"w\"> <\/span><span class=\"err\">document<\/span><span class=\"w\">\n<\/span><span class=\"p\">{<\/span><span class=\"w\">\n  <\/span><span class=\"nl\">\"_id\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"replication_2\"<\/span><span class=\"p\">,<\/span><span class=\"w\">\n  <\/span><span class=\"nl\">\"source\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"mydb\"<\/span><span class=\"p\">,<\/span><span class=\"w\">\n  <\/span><span class=\"nl\">\"target\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"http:\/\/someserver.com:5984\/mydb\"<\/span><span class=\"p\">,<\/span><span class=\"w\">\n  <\/span><span class=\"nl\">\"_replication_id\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"my-sample-replication-id\"<\/span><span class=\"w\">\n<\/span><span class=\"p\">}<\/span><span class=\"w\">\n<\/span><\/code><\/pre>\n\n<\/div>\n\n\n\n<h3>\n  \n  \n  Cancelling Replications\n<\/h3>\n\n<p>To cancel an ongoing replication, you simply delete the document which triggered the replication.<\/p>\n\n<h3>\n  \n  \n  Typical Replication Procedure\n<\/h3>\n\n<p>During replication, CouchDB compares the source and destination databases, to determine which documents differ between them. How does CouchDB determine these? It does so by following the <a href=\"http:\/\/docs.couchdb.org\/en\/2.1.1\/api\/database\/changes.html#changes\">Changes Feeds<\/a> on the source database, and comparing the documents to the destination database. Changes are submitted to the destination in batches where they can introduce conflicts. If a document already exist on the destination, and has the same revision, it is not transferred.<\/p>\n\n<p>A replication task will finish once it reaches the end of the changes feed. If its continuous property is set to true, it will wait for new changes to appear until the task is canceled. Replication tasks also create checkpoint documents on the destination to ensure that a restarted task can continue from where it stopped, for example after it has crashed.<\/p>\n\n<h3>\n  \n  \n  References\n<\/h3>\n\n<p><a href=\"http:\/\/docs.couchdb.org\/en\/2.1.1\/replication\/intro.html?highlight=Replication\">Introduction to CouchDB Replication - Guide<\/a><\/p>\n\n<h2>\n  \n  \n  Conclusion\n<\/h2>\n\n<p>Hurray! We've just wrapped up an overview of the CouchDB replicator database, and a little of the replication terminology.<\/p>\n\n<p>I'll tend to write more on this topic, as it is a broad one.<\/p>\n\n<p>Did I miss something important? Let me know in the comments below :D<\/p>\n\n<blockquote>\n<p>Originally posted on <a href=\"https:\/\/hakaselogs.me\/2018-04-19\/couchdb-replicator-database\">My Blog<\/a><\/p>\n<\/blockquote>\n\n","category":["couchdb","nosql","webdev"]},{"title":"Packages in Go","pubDate":"Mon, 04 Dec 2017 19:48:39 +0000","link":"https:\/\/dev.to\/codehakase\/packages-in-go-4mf","guid":"https:\/\/dev.to\/codehakase\/packages-in-go-4mf","description":"<blockquote>\n<p>Hey there! if you've been following the series, you're awesome!!!.<\/p>\n<\/blockquote>\n\n<p>In the last article, we looked at functions in Go, and how to define them. In this part, we're gonna look at Packages.<\/p>\n\n<h2>\n  \n  \n  What are Packages?\n<\/h2>\n\n<p>Packages are used to organize source code for better reuseablity and readability. Packages makes it easy to maintain Go applications.<\/p>\n\n<p>So far in the previous articles, we've been seeing programs which have only one file with a main function with along side other functions. Writing all source code in a single file somethings isn't a good approach, since it becomes pretty hard to maintain and reuse code.<\/p>\n\n<p>## Main package and main function<br>\n Every executable Go program, must contain a <code>main<\/code> function. The <code>main<\/code> function serves as an entry point for execution.<\/p>\n\n<blockquote>\n<p>The main function should reside in the main package.<\/p>\n<\/blockquote>\n\n<p>Packages are defined in a source file as <code>package packageName<\/code>, which is at the first line of the source file.<\/p>\n<h3>\n  \n  \n  Imports\n<\/h3>\n\n<p>The <code>import \"packagename\"<\/code> statement is used to import existing packages into a Go source. When a package is imported, you have access to the methods defined in that package:<br>\n<\/p>\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight go\"><code><span class=\"k\">package<\/span> <span class=\"n\">main<\/span>\n\n<span class=\"k\">import<\/span> <span class=\"s\">\"fmt\"<\/span>\n\n<span class=\"k\">func<\/span> <span class=\"n\">main<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n  <span class=\"n\">fmt<\/span><span class=\"o\">.<\/span><span class=\"n\">Println<\/span><span class=\"p\">(<\/span><span class=\"s\">\"Hello Golang Packages!!!\"<\/span><span class=\"p\">)<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n\n<\/div>\n\n\n\n<h2>\n  \n  \n  Custom Packages\n<\/h2>\n\n<p>Let's create a custom package <code>geometry<\/code> a package with minimal geometry calculations.<\/p>\n\n<blockquote>\n<p>Note: Source files belonging to a package should be placed in separate folders of their own. It is a convention in Go to name this folder with the same name of the package.<\/p>\n<\/blockquote>\n\n<p>Let's create the directory structure for our package,<br>\n<\/p>\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code><span class=\"nv\">$ <\/span><span class=\"nb\">cd<\/span> <span class=\"nv\">$HOME<\/span>\/gocode\/src\n<span class=\"nv\">$ <\/span><span class=\"nb\">mkdir <\/span>geometry\n<\/code><\/pre>\n\n<\/div>\n\n\n\n<p>We'll create a new file <code>rectangle\/rectangle.go<\/code> with the following:<br>\n<\/p>\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight go\"><code><span class=\"k\">package<\/span> <span class=\"n\">rectangle<\/span>\n\n<span class=\"k\">import<\/span> <span class=\"s\">\"math\"<\/span>\n\n<span class=\"k\">func<\/span> <span class=\"n\">Diagonal<\/span><span class=\"p\">(<\/span><span class=\"nb\">len<\/span><span class=\"p\">,<\/span> <span class=\"n\">wid<\/span> <span class=\"kt\">float64<\/span><span class=\"p\">)<\/span> <span class=\"kt\">float64<\/span> <span class=\"p\">{<\/span>  \n    <span class=\"n\">diagonal<\/span> <span class=\"o\">:=<\/span> <span class=\"n\">math<\/span><span class=\"o\">.<\/span><span class=\"n\">Sqrt<\/span><span class=\"p\">((<\/span><span class=\"nb\">len<\/span> <span class=\"o\">*<\/span> <span class=\"nb\">len<\/span><span class=\"p\">)<\/span> <span class=\"o\">+<\/span> <span class=\"p\">(<\/span><span class=\"n\">wid<\/span> <span class=\"o\">*<\/span> <span class=\"n\">wid<\/span><span class=\"p\">))<\/span>\n    <span class=\"k\">return<\/span> <span class=\"n\">diagonal<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"k\">func<\/span> <span class=\"n\">Area<\/span><span class=\"p\">(<\/span><span class=\"nb\">len<\/span><span class=\"p\">,<\/span> <span class=\"n\">wid<\/span> <span class=\"kt\">float64<\/span><span class=\"p\">)<\/span> <span class=\"kt\">float64<\/span> <span class=\"p\">{<\/span>  \n    <span class=\"n\">area<\/span> <span class=\"o\">:=<\/span> <span class=\"nb\">len<\/span> <span class=\"o\">*<\/span> <span class=\"n\">wid<\/span>\n    <span class=\"k\">return<\/span> <span class=\"n\">area<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n\n<\/div>\n\n\n\n<p>In the above code we have created two functions which calculates the Area and Diagonal of a rectangle. The area of the rectangle is the product of the length and width. The diagonal of the rectangle is the square root of the sum of squares of the length and width. The <code>Sqrt<\/code> function in the <code>math<\/code> package is used to calculate the square root.<\/p>\n\n<h2>\n  \n  \n  Importing Custom Packages\n<\/h2>\n\n<p>To use a custom package we must first import it. We must specify the path to the custom package with respect to the <code>src<\/code> folder inside the workspace.<\/p>\n\n<p>Let's create our entry file, <code>geometry.go<\/code> which will contain the main function for our Package.<br>\n<\/p>\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight go\"><code>\n<span class=\"k\">package<\/span> <span class=\"n\">main<\/span>\n\n<span class=\"k\">import<\/span> <span class=\"p\">(<\/span>\n  <span class=\"s\">\"fmt\"<\/span>\n  <span class=\"s\">\"geometry\/rectangle\"<\/span>\n<span class=\"p\">)<\/span>\n\n<span class=\"k\">func<\/span> <span class=\"n\">main<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">var<\/span> <span class=\"n\">rectLen<\/span><span class=\"p\">,<\/span> <span class=\"n\">rectWidth<\/span> <span class=\"kt\">float64<\/span> <span class=\"o\">=<\/span> <span class=\"m\">6<\/span><span class=\"p\">,<\/span> <span class=\"m\">7<\/span>\n    <span class=\"n\">fmt<\/span><span class=\"o\">.<\/span><span class=\"n\">Println<\/span><span class=\"p\">(<\/span><span class=\"s\">\"Geometrical shape properties\"<\/span><span class=\"p\">)<\/span>\n        <span class=\"c\">\/*Area function of rectangle package used\n        *\/<\/span>\n    <span class=\"n\">fmt<\/span><span class=\"o\">.<\/span><span class=\"n\">Printf<\/span><span class=\"p\">(<\/span><span class=\"s\">\"area of rectangle %.2f<\/span><span class=\"se\">\\n<\/span><span class=\"s\">\"<\/span><span class=\"p\">,<\/span> <span class=\"n\">rectangle<\/span><span class=\"o\">.<\/span><span class=\"n\">Area<\/span><span class=\"p\">(<\/span><span class=\"n\">rectLen<\/span><span class=\"p\">,<\/span> <span class=\"n\">rectWidth<\/span><span class=\"p\">))<\/span>\n        <span class=\"c\">\/*Diagonal function of rectangle package used\n        *\/<\/span>\n    <span class=\"n\">fmt<\/span><span class=\"o\">.<\/span><span class=\"n\">Printf<\/span><span class=\"p\">(<\/span><span class=\"s\">\"diagonal of the rectangle %.2f \"<\/span><span class=\"p\">,<\/span><span class=\"n\">rectangle<\/span><span class=\"o\">.<\/span><span class=\"n\">Diagonal<\/span><span class=\"p\">(<\/span><span class=\"n\">rectLen<\/span><span class=\"p\">,<\/span> <span class=\"n\">rectWidth<\/span><span class=\"p\">))<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n\n<\/div>\n\n\n\n<p>The above code imports the rectangle package and uses the Area and Diagonal function of it to find the area and diagonal of the rectangle. The <code>%.2f<\/code> format specifier in Printf is to truncate the floating point to two decimal places. The output of the application is:<br>\n<\/p>\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>Geometrical shape properties  \narea of rectangle 42.00  \ndiagonal of the rectangle 9.22  \n<\/code><\/pre>\n\n<\/div>\n\n\n\n<h2>\n  \n  \n  Exported Names\n<\/h2>\n\n<p>We capitalized the functions <code>Area<\/code> and <code>Diagonal<\/code> in the rectangle package. This has a special meaning in Go. Any variable or function which starts with a capital letter are exported names. Only exported functions and variables can be accessed from other packages. In this case we need to access Area and Diagonal functions from the main package. Hence they are capitalized.<\/p>\n\n<h2>\n  \n  \n  init function\n<\/h2>\n\n<p>Every package can contain an <code>init<\/code> function. The init function should not have any return type and should not have any parameters. The init function cannot be called explicitly in our source code. The init function looks like below<br>\n<\/p>\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight go\"><code><span class=\"k\">func<\/span> <span class=\"n\">init<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>  \n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n\n<\/div>\n\n\n\n<p>The init function can be used to perform initialization tasks and can also be used to verify the correctness of the program before the execution starts.<\/p>\n\n<p>The order of initialization of a package is as follows<\/p>\n\n<ul>\n<li>Package level variables are initialized first<\/li>\n<li>init function is called next. A package can have multiple init functions (either in a single file or distributed across multiple files) and they are called in the order in which they are presented to the compiler.<\/li>\n<\/ul>\n\n<p>If a package imports other packages, the imported packages are initialized first.<\/p>\n\n<p>That's it for packages. Packages helps us organize code in a very clean way, create utilities for our programs that can be distributed.<\/p>\n\n<p>If I've missed anything, let me know in the comments.<\/p>\n\n","category":["go","programming"]},{"title":"Functions in Go.","pubDate":"Fri, 24 Nov 2017 21:38:38 +0000","link":"https:\/\/dev.to\/codehakase\/functions-in-go-3dd","guid":"https:\/\/dev.to\/codehakase\/functions-in-go-3dd","description":"<p>In this part of the series, we're going to look at Functions, and how they work in Go.<\/p>\n\n<h2>\n  \n  \n  What is a Function?\n<\/h2>\n\n<p>A function is a block of code that performs a specific task. A function takes an input, performs some calculations on the input and generates an output.<\/p>\n\n<p>There are two types of functions you'd make use of in Go. 1) User-defined and 2) Standard functions.<\/p>\n\n<h3>\n  \n  \n  User-defined Functions\n<\/h3>\n\n<p>This type of function, we create ourselves to perform a specific task in a program.<\/p>\n\n<h4>\n  \n  \n  Declaration\n<\/h4>\n\n<p>Here's the syntax to declare a function:<br>\n<\/p>\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight go\"><code><span class=\"o\">...<\/span>\n\n<span class=\"k\">func<\/span> <span class=\"n\">sayHello<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n\n  <span class=\"n\">fmt<\/span><span class=\"o\">.<\/span><span class=\"n\">Println<\/span><span class=\"p\">(<\/span><span class=\"s\">\"Hello World!\"<\/span><span class=\"p\">)<\/span>  \n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n\n<\/div>\n\n\n\n<p>In the sample code above, we declared a function <code>sayHello<\/code> which prints the string <code>Hello World<\/code> when the function is called. Every function in Go, starts with the <code>func<\/code> keyword followed by the function name (we'll talk about naming conventions in a later article), and parenthesis, and then a block wrapped in between curly braces (<code>{ }<\/code>).<br>\n<\/p>\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight go\"><code><span class=\"o\">...<\/span>\n\n<span class=\"k\">func<\/span> <span class=\"n\">greet<\/span><span class=\"p\">(<\/span><span class=\"n\">name<\/span> <span class=\"kt\">string<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n\n  <span class=\"n\">fmt<\/span><span class=\"o\">.<\/span><span class=\"n\">Println<\/span><span class=\"p\">(<\/span><span class=\"s\">\"Hello \"<\/span> <span class=\"o\">+<\/span> <span class=\"n\">name<\/span><span class=\"p\">)<\/span>\n<span class=\"p\">}<\/span>\n\n<\/code><\/pre>\n\n<\/div>\n\n\n\n<p>The example above is another function, this time it takes in a parameter. See parameters as pieces of information that further defines a Function. In the code above, we declared a function <code>greet<\/code> which accepts a parameter <code>name<\/code> of type string. Calling this function is straight and simple:<br>\n<\/p>\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight go\"><code><span class=\"o\">...<\/span>\n\n<span class=\"k\">func<\/span> <span class=\"n\">main<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n\n <span class=\"n\">greet<\/span><span class=\"p\">(<\/span><span class=\"s\">\"Francis Sunday\"<\/span><span class=\"p\">)<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"k\">func<\/span> <span class=\"n\">greet<\/span><span class=\"p\">(<\/span><span class=\"n\">name<\/span> <span class=\"kt\">string<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span> <span class=\"o\">...<\/span> <span class=\"p\">}<\/span>\n\n<\/code><\/pre>\n\n<\/div>\n\n\n\n<blockquote>\n<p>PS: When using parameters, its required to explicitly define its type.<br>\n<\/p>\n<\/blockquote>\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight go\"><code>\n<span class=\"k\">package<\/span> <span class=\"n\">main<\/span> \n\n<span class=\"k\">import<\/span> <span class=\"s\">\"fmt\"<\/span>\n\n<span class=\"k\">func<\/span> <span class=\"n\">split<\/span><span class=\"p\">(<\/span><span class=\"n\">number<\/span> <span class=\"kt\">int<\/span><span class=\"p\">)<\/span> <span class=\"p\">(<\/span><span class=\"kt\">int<\/span><span class=\"p\">,<\/span> <span class=\"kt\">int<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n\n  <span class=\"n\">x<\/span> <span class=\"o\">:=<\/span> <span class=\"n\">number<\/span> <span class=\"o\">*<\/span> <span class=\"m\">4<\/span> <span class=\"o\">\/<\/span> <span class=\"m\">9<\/span>\n  <span class=\"n\">y<\/span> <span class=\"o\">:=<\/span> <span class=\"n\">number<\/span> <span class=\"o\">-<\/span> <span class=\"n\">x<\/span>\n\n  <span class=\"k\">return<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"k\">func<\/span> <span class=\"n\">main<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n\n  <span class=\"n\">x<\/span><span class=\"p\">,<\/span> <span class=\"n\">y<\/span> <span class=\"o\">:=<\/span> <span class=\"n\">split<\/span><span class=\"p\">(<\/span><span class=\"m\">100<\/span><span class=\"p\">)<\/span>\n\n  <span class=\"n\">fmt<\/span><span class=\"o\">.<\/span><span class=\"n\">Println<\/span><span class=\"p\">(<\/span><span class=\"s\">\"%d + %d = 100\"<\/span><span class=\"p\">,<\/span> <span class=\"n\">x<\/span><span class=\"p\">,<\/span> <span class=\"n\">y<\/span><span class=\"p\">)<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n\n<\/div>\n\n\n\n<p>In the code above, we declare a function <code>split<\/code> which accepts a single integer as a parameter <code>number<\/code>. The function takes a parameter of type <code>int<\/code>, and returns two numbers of type <code>int<\/code> that sums up to the input parameter.<\/p>\n\n<p>Running the program you should get the following:<br>\n<\/p>\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code><span class=\"nv\">$ <\/span>go run functions.go\n\n44.44 + 55.56 <span class=\"o\">=<\/span> 100\n<\/code><\/pre>\n\n<\/div>\n\n\n\n\n\n\n<p>In this article, we've looked at Functions in Go, how they help use organize repetitive tasks into smaller blocks of code we can reuse any where in our program. In a later article in this series, we'd explore more on Functions.<\/p>\n\n<p>Feel free to leave a comment if I've missed something important.<\/p>\n\n","category":["go","programming"]},{"title":"Constants in Go.","pubDate":"Thu, 23 Nov 2017 07:29:44 +0000","link":"https:\/\/dev.to\/codehakase\/constants-in-go-92o","guid":"https:\/\/dev.to\/codehakase\/constants-in-go-92o","description":"<p>In this part, we're going to look at Constants in Go, and how they play a role in a program.<\/p>\n\n<ul>\n<li><p>Constants are declared like variables, but with the <code>const<\/code> keyword.<\/p><\/li>\n<li><p>Constants can be character, string, boolean, or numeric values. <\/p><\/li>\n<li><p>Constants cannot be declared using the := syntax. <\/p><\/li>\n<\/ul>\n\n<p>Consider the following code:<br>\n<\/p>\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight go\"><code><span class=\"o\">...<\/span>\n\n<span class=\"k\">const<\/span> <span class=\"n\">MAX_WT<\/span> <span class=\"o\">=<\/span> <span class=\"m\">200<\/span>\n\n<span class=\"k\">func<\/span> <span class=\"n\">main<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n\n  <span class=\"n\">fmt<\/span><span class=\"o\">.<\/span><span class=\"n\">Println<\/span><span class=\"p\">(<\/span><span class=\"s\">\"Max wait time: \"<\/span><span class=\"p\">,<\/span> <span class=\"n\">MAX_WT<\/span><span class=\"p\">)<\/span>\n<span class=\"p\">}<\/span>\n\n<\/code><\/pre>\n\n<\/div>\n\n\n\n<p>In the above, a constant <code>MAX_WT<\/code> is defined with a value of 200, and is available throughout the script.<\/p>\n\n<p>The value of a constant should be known at compile time. Hence it cannot be assigned to a value returned by a function call since the function call takes place at run time.<\/p>\n\n<h2>\n  \n  \n  String Constant\n<\/h2>\n\n<p>Any value enclosed between double quotes (eg \"John Doe\"), is a string constant in Go. <\/p>\n\n<p>String constants by default are untyped:<br>\n<\/p>\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight go\"><code>\n<span class=\"k\">const<\/span> <span class=\"n\">name<\/span> <span class=\"o\">=<\/span> <span class=\"s\">\"James Bond\"<\/span>\n\n<\/code><\/pre>\n\n<\/div>\n\n\n\n<p>Since Go is strongly typed, and all variable requires an explicit type, but the above code works, why? <\/p>\n\n<blockquote>\n<p>Constants have a default type associated with them and they supply it if and only if a line of code demands it.<\/p>\n<\/blockquote>\n\n<h4>\n  \n  \n  Typed String Constants\n<\/h4>\n\n<p>Its possible to create typed constant? Yes here's an example:<br>\n<\/p>\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight go\"><code><span class=\"k\">const<\/span> <span class=\"n\">name<\/span> <span class=\"kt\">string<\/span> <span class=\"o\">=<\/span> <span class=\"s\">\"James Bond\"<\/span>\n<\/code><\/pre>\n\n<\/div>\n\n\n\n<h2>\n  \n  \n  Boolean Constant\n<\/h2>\n\n<p>Boolean constants are two untyped constants true and false. The same rules for string constants apply to booleans. Here's an example of defining boolean constants:<br>\n<\/p>\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight go\"><code><span class=\"k\">const<\/span> <span class=\"n\">published<\/span> <span class=\"o\">=<\/span> <span class=\"no\">true<\/span>\n<\/code><\/pre>\n\n<\/div>\n\n\n\n<h2>\n  \n  \n  Numeric Constants\n<\/h2>\n\n<p>Numeric constants include integers, floats and complex constants. There are some subtleties in numeric constants.<br>\n<\/p>\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight go\"><code><span class=\"k\">package<\/span> <span class=\"n\">main<\/span>\n\n<span class=\"k\">import<\/span> <span class=\"s\">\"fmt\"<\/span>\n\n<span class=\"k\">func<\/span> <span class=\"n\">main<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>  \n    <span class=\"k\">const<\/span> <span class=\"n\">a<\/span> <span class=\"o\">=<\/span> <span class=\"m\">5<\/span>\n    <span class=\"k\">var<\/span> <span class=\"n\">intVar<\/span> <span class=\"kt\">int<\/span> <span class=\"o\">=<\/span> <span class=\"n\">a<\/span>\n    <span class=\"k\">var<\/span> <span class=\"n\">int32Var<\/span> <span class=\"kt\">int32<\/span> <span class=\"o\">=<\/span> <span class=\"n\">a<\/span>\n    <span class=\"k\">var<\/span> <span class=\"n\">float64Var<\/span> <span class=\"kt\">float64<\/span> <span class=\"o\">=<\/span> <span class=\"n\">a<\/span>\n    <span class=\"k\">var<\/span> <span class=\"n\">complex64Var<\/span> <span class=\"kt\">complex64<\/span> <span class=\"o\">=<\/span> <span class=\"n\">a<\/span>\n    <span class=\"n\">fmt<\/span><span class=\"o\">.<\/span><span class=\"n\">Println<\/span><span class=\"p\">(<\/span><span class=\"s\">\"intVar\"<\/span><span class=\"p\">,<\/span><span class=\"n\">intVar<\/span><span class=\"p\">,<\/span> <span class=\"s\">\"<\/span><span class=\"se\">\\n<\/span><span class=\"s\">int32Var\"<\/span><span class=\"p\">,<\/span> <span class=\"n\">int32Var<\/span><span class=\"p\">,<\/span> <span class=\"s\">\"<\/span><span class=\"se\">\\n<\/span><span class=\"s\">float64Var\"<\/span><span class=\"p\">,<\/span> <span class=\"n\">float64Var<\/span><span class=\"p\">,<\/span> <span class=\"s\">\"<\/span><span class=\"se\">\\n<\/span><span class=\"s\">complex64Var\"<\/span><span class=\"p\">,<\/span><span class=\"n\">complex64Var<\/span><span class=\"p\">)<\/span>\n<span class=\"p\">}<\/span>\n\n<\/code><\/pre>\n\n<\/div>\n\n\n\n<p>Running the above you should see the following output:<br>\n<\/p>\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code><span class=\"nv\">$ <\/span>go run main.go\n\nintVar 5 \nint32Var 5 \nfloat64Var 5 \ncomplex64Var <span class=\"o\">(<\/span>5+0i<span class=\"o\">)<\/span>\n\n<\/code><\/pre>\n\n<\/div>\n\n\n\n<p>That's it for constants. Here are some points you'd need to keep in mind:<\/p>\n\n<ul>\n<li>Constants can only be defined once<\/li>\n<li>Constants can be defined without a type<\/li>\n<li>Constants can be used withing the scope its being defined in<\/li>\n<\/ul>\n\n<p>In the next part, we'd look at Functions in Go.<\/p>\n\n<p>Have any feedback? let me know in the comments.<\/p>\n\n<p>Cheers!<\/p>\n\n","category":["go","programming"]},{"title":"Types in Go ","pubDate":"Wed, 22 Nov 2017 02:36:15 +0000","link":"https:\/\/dev.to\/codehakase\/types-in-go-ckf","guid":"https:\/\/dev.to\/codehakase\/types-in-go-ckf","description":"<p>In the <a href=\"https:\/\/dev.to\/codehakase\/getting-started-with-go---variables-aef\">previous article<\/a>, I wrote about variables and how they are used in Go. In this part, we're going to look at the Basic types available in Go.<\/p>\n\n<p>Go is a statically typed language. This means that variables always have a specific type and that type cannot change. Static typing may seem cumbersome at first. You'll spend a large amount of your time just trying to fix your program so that it finally compiles.<\/p>\n\n<p>The following are the basic types available in <\/p>\n\n<ul>\n<li>Bool<\/li>\n<li>String<\/li>\n<li>Numeric Types\n\n<ul>\n<li>int8, int16, int32, int64, int<\/li>\n<li>uint8, uint16, uint32, uint64, uint<\/li>\n<li>float32, float64<\/li>\n<li>complex64, complex128<\/li>\n<li>byte<\/li>\n<li>rune<\/li>\n<\/ul>\n\n\n<\/li>\n<\/ul>\n\n<h3>\n  \n  \n  Bool\n<\/h3>\n\n<p>A boolean value, is a special 1 bit integer type used to represent true and false (or on and off). Three logical operators are used with boolean values:<\/p>\n\n<ul>\n<li>&amp;&amp; - and<\/li>\n<li>|| - or<\/li>\n<li>!  - not<\/li>\n<\/ul>\n\n<p>Here is an example program showing how they can be used:<br>\n<\/p>\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight go\"><code><span class=\"k\">package<\/span> <span class=\"n\">main<\/span>\n\n<span class=\"k\">import<\/span> <span class=\"s\">\"fmt\"<\/span>\n\n<span class=\"k\">func<\/span> <span class=\"n\">main<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n  <span class=\"n\">fmt<\/span><span class=\"o\">.<\/span><span class=\"n\">Println<\/span><span class=\"p\">(<\/span><span class=\"no\">true<\/span> <span class=\"o\">&amp;&amp;<\/span> <span class=\"no\">true<\/span><span class=\"p\">)<\/span>\n  <span class=\"n\">fmt<\/span><span class=\"o\">.<\/span><span class=\"n\">Println<\/span><span class=\"p\">(<\/span><span class=\"no\">true<\/span> <span class=\"o\">&amp;&amp;<\/span> <span class=\"no\">false<\/span><span class=\"p\">)<\/span>\n  <span class=\"n\">fmt<\/span><span class=\"o\">.<\/span><span class=\"n\">Println<\/span><span class=\"p\">(<\/span><span class=\"no\">true<\/span> <span class=\"o\">||<\/span> <span class=\"no\">true<\/span><span class=\"p\">)<\/span>\n  <span class=\"n\">fmt<\/span><span class=\"o\">.<\/span><span class=\"n\">Println<\/span><span class=\"p\">(<\/span><span class=\"o\">!<\/span><span class=\"no\">false<\/span><span class=\"p\">)<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n\n<\/div>\n\n\n\n<p>Running this program should give you:<br>\n<\/p>\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code><span class=\"nv\">$ <\/span>go run main.go\n<span class=\"nb\">true\nfalse\ntrue\ntrue<\/span>\n<\/code><\/pre>\n\n<\/div>\n\n\n\n<h3>\n  \n  \n  Strings\n<\/h3>\n\n<p>A string is a sequence of characters with a definite length used to represent text. Go strings are made up of individual bytes, usually one for each character.<br>\n<\/p>\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight go\"><code><span class=\"k\">package<\/span> <span class=\"n\">main<\/span>\n\n<span class=\"k\">import<\/span> <span class=\"s\">\"fmt\"<\/span>\n\n<span class=\"k\">func<\/span> <span class=\"n\">main<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n\n  <span class=\"n\">fmt<\/span><span class=\"o\">.<\/span><span class=\"n\">Println<\/span><span class=\"p\">(<\/span><span class=\"s\">\"Hello World <\/span><span class=\"se\">\\n<\/span><span class=\"s\">\"<\/span><span class=\"p\">)<\/span>\n\n  <span class=\"n\">fmt<\/span><span class=\"o\">.<\/span><span class=\"n\">Println<\/span><span class=\"p\">(<\/span><span class=\"s\">\"Golang rocks!\"<\/span><span class=\"p\">)<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n\n<\/div>\n\n\n\n<p>String literals can be created using double quotes \"Hello World\" or back ticks <code><\/code>Hello World<code><\/code>. The difference between these is that double quoted strings cannot contain newlines and they allow special escape sequences. For example <code>\\n<\/code> gets replaced with a newline and <code>\\t<\/code> gets replaced with a tab character.<\/p>\n\n<h3>\n  \n  \n  Integers\n<\/h3>\n\n<p>Integers, like their mathematical counterpart, are numbers without a decimal component. (-3, -2, -1, 0, 1, \u2026). Unlike the base-10 decimal system we use to represent numbers, computers use a base-2 binary system.<br>\n<\/p>\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight go\"><code><span class=\"k\">package<\/span> <span class=\"n\">main<\/span> \n\n<span class=\"k\">import<\/span> <span class=\"s\">\"fmt\"<\/span>\n\n<span class=\"k\">func<\/span> <span class=\"n\">main<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n\n  <span class=\"n\">fmt<\/span><span class=\"o\">.<\/span><span class=\"n\">Println<\/span><span class=\"p\">(<\/span><span class=\"s\">\"10 + 7 = \"<\/span><span class=\"p\">,<\/span> <span class=\"m\">10<\/span> <span class=\"o\">+<\/span> <span class=\"m\">7<\/span><span class=\"p\">)<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n\n<\/div>\n\n\n\n\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code><span class=\"nv\">$ <\/span>go run main.go\n10 + 7 <span class=\"o\">=<\/span> 17\n<\/code><\/pre>\n\n<\/div>\n\n\n\n<h3>\n  \n  \n  Floating-point Numbers\n<\/h3>\n\n<p>Go has two floating point types: <strong>float32<\/strong> and <strong>float64<\/strong> (also often referred to as single precision and double precision respectively) as well as two additional types for representing complex numbers (numbers with imaginary parts): <strong>complex64<\/strong> and <strong>complex128<\/strong>.<\/p>\n\n<p>The following is a simple program to illustrate integer and floating point types.<br>\n<\/p>\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight go\"><code><span class=\"k\">package<\/span> <span class=\"n\">main<\/span>\n\n<span class=\"k\">import<\/span> <span class=\"p\">(<\/span>  \n    <span class=\"s\">\"fmt\"<\/span>\n<span class=\"p\">)<\/span>\n\n<span class=\"k\">func<\/span> <span class=\"n\">main<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>  \n    <span class=\"n\">x<\/span><span class=\"p\">,<\/span> <span class=\"n\">y<\/span> <span class=\"o\">:=<\/span> <span class=\"m\">2.12<\/span><span class=\"p\">,<\/span> <span class=\"m\">5.4<\/span>\n\n    <span class=\"n\">sum<\/span> <span class=\"o\">:=<\/span> <span class=\"n\">x<\/span> <span class=\"o\">+<\/span> <span class=\"n\">y<\/span>\n    <span class=\"n\">diff<\/span> <span class=\"o\">:=<\/span> <span class=\"n\">x<\/span> <span class=\"o\">-<\/span> <span class=\"n\">y<\/span>\n\n    <span class=\"n\">fmt<\/span><span class=\"o\">.<\/span><span class=\"n\">Println<\/span><span class=\"p\">(<\/span><span class=\"s\">\"the sum: \"<\/span><span class=\"p\">,<\/span> <span class=\"n\">sum<\/span><span class=\"p\">,<\/span> <span class=\"s\">\"diff: \"<\/span><span class=\"p\">,<\/span> <span class=\"n\">diff<\/span><span class=\"p\">)<\/span>\n<span class=\"p\">}<\/span>\n\n<\/code><\/pre>\n\n<\/div>\n\n\n\n<p>Running the above you should see the following:<br>\n<\/p>\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code><span class=\"nv\">$ <\/span>go run main.go\nthe <span class=\"nb\">sum<\/span>:  7.5200000000000005  diff:  <span class=\"nt\">-3<\/span>.2800000000000002\n\n<\/code><\/pre>\n\n<\/div>\n\n\n\n<h3>\n  \n  \n  Complex Numbers\n<\/h3>\n\n<p><strong>complex64:<\/strong> complex numbers which have float32 real and imaginary parts<br>\n<strong>complex128:<\/strong> complex numbers with float64 real and imaginary parts<\/p>\n\n<p>The built-in function complex is used to construct a complex number with real and imaginary parts.<\/p>\n\n<blockquote>\n<p>It takes a real and imaginary part as parameter and returns a complex type. Both the real and imaginary parts should be of the same type. ie either float32 or float64. If both the real and imaginary parts are float32, this function returns a complex value of type <em>complex64<\/em>. If both the real and imaginary parts are of type float64, this function returns a complex value of type <em>complex128<\/em>.<br>\n<\/p>\n\n\n<\/blockquote>\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight go\"><code><span class=\"k\">package<\/span> <span class=\"n\">main<\/span>\n\n<span class=\"k\">import<\/span> <span class=\"s\">\"fmt\"<\/span>\n\n<span class=\"k\">func<\/span> <span class=\"n\">main<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n  <span class=\"n\">c1<\/span> <span class=\"o\">:=<\/span> <span class=\"nb\">complex<\/span><span class=\"p\">(<\/span><span class=\"m\">2<\/span><span class=\"p\">,<\/span> <span class=\"m\">3<\/span><span class=\"p\">)<\/span>\n  <span class=\"n\">c2<\/span> <span class=\"o\">:=<\/span> <span class=\"m\">2<\/span> <span class=\"o\">+<\/span> <span class=\"m\">47i<\/span>\n\n  <span class=\"n\">cadd<\/span> <span class=\"o\">:=<\/span> <span class=\"n\">c1<\/span> <span class=\"o\">+<\/span> <span class=\"n\">c2<\/span>\n\n  <span class=\"n\">fmt<\/span><span class=\"o\">.<\/span><span class=\"n\">Println<\/span><span class=\"p\">(<\/span><span class=\"s\">\"sum:\"<\/span><span class=\"p\">,<\/span> <span class=\"n\">cadd<\/span><span class=\"p\">)<\/span>\n\n  <span class=\"n\">cmul<\/span> <span class=\"o\">:=<\/span> <span class=\"n\">c1<\/span> <span class=\"o\">*<\/span> <span class=\"n\">c2<\/span>\n  <span class=\"n\">fmt<\/span><span class=\"o\">.<\/span><span class=\"n\">Println<\/span><span class=\"p\">(<\/span><span class=\"s\">\"product:\"<\/span><span class=\"p\">,<\/span> <span class=\"n\">cmul<\/span><span class=\"p\">)<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n\n<\/div>\n\n\n\n\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code><span class=\"nv\">$ <\/span>go run main.go\n<span class=\"nb\">sum<\/span>: <span class=\"o\">(<\/span>4+50i<span class=\"o\">)<\/span>\nproduct: <span class=\"o\">(<\/span><span class=\"nt\">-137<\/span>+100i<span class=\"o\">)<\/span>\n<\/code><\/pre>\n\n<\/div>\n\n\n\n<h2>\n  \n  \n  Conclusion\n<\/h2>\n\n<p>In this part, we saw the basic types in Go. In the next parts of the series, we'd be using these various types interchangeably. In the next part, we'd look at Constants in Go.<\/p>\n\n<p>I may have missed something, do me a favour and report me in the comments below or fire me a tweet <a href=\"https:\/\/twitter.com\/codehakase\">@codehakase<\/a>.<\/p>\n\n<p>PS: This is the third part of the series, you refer to the <a href=\"https:\/\/dev.to\/codehakase\/golang---getting-started-16c\">first part<\/a> to get a hint of the series.<\/p>\n\n<p>Cheers! <\/p>\n\n","category":["go","webdev","programming"]},{"title":"Getting Started with Go - Variables ","pubDate":"Sun, 19 Nov 2017 00:27:46 +0000","link":"https:\/\/dev.to\/codehakase\/getting-started-with-go---variables-aef","guid":"https:\/\/dev.to\/codehakase\/getting-started-with-go---variables-aef","description":"<p>In the previous article - <a href=\"https:\/\/dev.to\/codehakase\/golang---getting-started-16c\">Golang - Getting Started<\/a>, I wrote an intro to the Go programing language, and how to setup a development environment for your platform. In this article, we're going to talk about variables in Go.<\/p>\n\n<h2>\n  \n  \n  What is a Variable?\n<\/h2>\n\n<p>A Variable, is the name given to a memory location to store a value of a specific type. In Go, there are various syntaxes to declare variables:<\/p>\n\n<h3>\n  \n  \n  Single variable declaration\n<\/h3>\n\n\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight go\"><code><span class=\"k\">package<\/span> <span class=\"n\">main<\/span>\n\n<span class=\"k\">import<\/span> <span class=\"s\">\"fmt\"<\/span>\n\n<span class=\"k\">func<\/span> <span class=\"n\">main<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n  <span class=\"k\">var<\/span> <span class=\"n\">bsLine<\/span> <span class=\"kt\">string<\/span> <span class=\"o\">=<\/span> <span class=\"s\">\"Man's not hot!\"<\/span>\n\n  <span class=\"n\">fmt<\/span><span class=\"o\">.<\/span><span class=\"n\">Println<\/span><span class=\"p\">(<\/span><span class=\"n\">bsLine<\/span><span class=\"p\">)<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n\n<\/div>\n\n\n\n<p><code>var bsLine string<\/code> declares a variable named <code>bsLine<\/code> of type <code>string<\/code>. We have not assigned any value for the variable. We assigned that variable a value of a string <em>Man's not hot!<\/em>. If there isn't any value assigned to a variable declaration, go automatically initializes it with the zero value of the variable's type. If you run this program, you'd see the following output:<br>\n<\/p>\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code><span class=\"nv\">$ <\/span><span class=\"nb\">cd<\/span> <span class=\"nv\">$HOME<\/span>\/go\/getting-started\n\n<span class=\"nv\">$ <\/span>go run variables.go\n\nMan<span class=\"s1\">'s not hot!\n<\/span><\/code><\/pre>\n\n<\/div>\n\n\n\n<h3>\n  \n  \n  Variable Type Inference\n<\/h3>\n\n<p>If a variable has an initial value, Go will automatically be able to infer the type of that variable using that initial value. Hence if a variable has an initial value, the type in the variable declaration can be omitted.<br>\n<\/p>\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight go\"><code><span class=\"k\">package<\/span> <span class=\"n\">main<\/span> \n\n<span class=\"k\">import<\/span> <span class=\"s\">\"fmt\"<\/span>\n\n<span class=\"k\">func<\/span> <span class=\"n\">main<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n\n  <span class=\"k\">var<\/span> <span class=\"n\">tip<\/span> <span class=\"o\">=<\/span> <span class=\"m\">300<\/span> <span class=\"c\">\/\/ type inference happening here!<\/span>\n\n  <span class=\"n\">fmt<\/span><span class=\"o\">.<\/span><span class=\"n\">Println<\/span><span class=\"p\">(<\/span><span class=\"s\">\"Let's tip him $\"<\/span><span class=\"p\">,<\/span> <span class=\"n\">tip<\/span><span class=\"p\">)<\/span> <span class=\"c\">\/\/ Let's tip him $300<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n\n<\/div>\n\n\n\n<h3>\n  \n  \n  Multiple Variable Assignment\n<\/h3>\n\n<p>In Go, you can declare or assign values to multiple variables in a single statement:<br>\n<\/p>\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight go\"><code><span class=\"k\">package<\/span> <span class=\"n\">main<\/span>\n\n<span class=\"k\">import<\/span> <span class=\"s\">\"fmt\"<\/span>\n\n<span class=\"k\">func<\/span> <span class=\"n\">main<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n\n  <span class=\"k\">var<\/span> <span class=\"n\">day<\/span><span class=\"p\">,<\/span> <span class=\"n\">month<\/span><span class=\"p\">,<\/span> <span class=\"n\">year<\/span> <span class=\"kt\">int<\/span> <span class=\"o\">=<\/span> <span class=\"m\">19<\/span><span class=\"p\">,<\/span> <span class=\"m\">11<\/span><span class=\"p\">,<\/span> <span class=\"m\">2017<\/span>\n\n  <span class=\"n\">fmt<\/span><span class=\"o\">.<\/span><span class=\"n\">Printf<\/span><span class=\"p\">(<\/span><span class=\"s\">\"This article was posted on %d-%d-%d\"<\/span><span class=\"p\">,<\/span> <span class=\"n\">day<\/span><span class=\"p\">,<\/span> <span class=\"n\">month<\/span><span class=\"p\">,<\/span> <span class=\"n\">year<\/span><span class=\"p\">)<\/span> <span class=\"c\">\/\/ This article was posted on 19-11-2017<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n\n<\/div>\n\n\n\n<h3>\n  \n  \n  Multiple assignments with different types, is that possible?\n<\/h3>\n\n<p>Yes it is. There's a different syntax for achieving this:<br>\n<\/p>\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight go\"><code>\n<span class=\"k\">package<\/span> <span class=\"n\">main<\/span>\n\n<span class=\"k\">import<\/span> <span class=\"s\">\"fmt\"<\/span>\n\n<span class=\"k\">func<\/span> <span class=\"n\">main<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n\n  <span class=\"k\">var<\/span> <span class=\"p\">(<\/span>\n    <span class=\"n\">name<\/span> <span class=\"kt\">string<\/span> <span class=\"o\">=<\/span> <span class=\"s\">\"Francis Sunday\"<\/span>\n    <span class=\"n\">alias<\/span> <span class=\"kt\">string<\/span> <span class=\"o\">=<\/span> <span class=\"s\">\"codehakase\"<\/span> \n  <span class=\"p\">)<\/span>\n\n  <span class=\"n\">fmt<\/span><span class=\"o\">.<\/span><span class=\"n\">Printf<\/span><span class=\"p\">(<\/span><span class=\"s\">\"Hi I'm %s, in the tech world I'm referred to as %s\"<\/span><span class=\"p\">,<\/span> <span class=\"n\">name<\/span><span class=\"p\">,<\/span> <span class=\"n\">alias<\/span><span class=\"p\">)<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n\n<\/div>\n\n\n\n<p>The above code will print <code>Hi I'm Francis, in the tech world I'm referred to as codehakase<\/code>.<\/p>\n\n<h3>\n  \n  \n  Any shorthands?\n<\/h3>\n\n<p>Yes, there's a shorter way to declare variables, by using the special assignment operator <code>:=<\/code><br>\n<\/p>\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight go\"><code><span class=\"k\">package<\/span> <span class=\"n\">main<\/span>\n\n<span class=\"k\">import<\/span> <span class=\"s\">\"fmt\"<\/span>\n\n<span class=\"k\">func<\/span> <span class=\"n\">main<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n\n  <span class=\"n\">publishDate<\/span> <span class=\"o\">:=<\/span> <span class=\"s\">\"19\/11\/2017\"<\/span>\n\n  <span class=\"n\">fmt<\/span><span class=\"o\">.<\/span><span class=\"n\">Println<\/span><span class=\"p\">(<\/span><span class=\"s\">\"Date: \"<\/span><span class=\"p\">,<\/span> <span class=\"n\">publishDate<\/span><span class=\"p\">)<\/span> <span class=\"c\">\/\/ Date: 19\/11\/2017<\/span>\n<span class=\"p\">}<\/span>\n\n<\/code><\/pre>\n\n<\/div>\n\n\n\n<h2>\n  \n  \n  <em>Gotchas<\/em>\n<\/h2>\n\n<h3>\n  \n  \n  Declaring non-new variables\n<\/h3>\n\n\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight go\"><code>\n<span class=\"k\">package<\/span> <span class=\"n\">main<\/span>\n\n<span class=\"k\">import<\/span> <span class=\"s\">\"fmt\"<\/span>\n\n<span class=\"k\">func<\/span> <span class=\"n\">main<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n\n  <span class=\"n\">name<\/span><span class=\"p\">,<\/span> <span class=\"n\">gender<\/span> <span class=\"o\">:=<\/span> <span class=\"s\">\"Francis\"<\/span><span class=\"p\">,<\/span> <span class=\"s\">\"male\"<\/span>\n\n  <span class=\"n\">fmt<\/span><span class=\"o\">.<\/span><span class=\"n\">Printf<\/span><span class=\"p\">(<\/span><span class=\"s\">\"Name: %d, Gender: %d\"<\/span><span class=\"p\">,<\/span> <span class=\"n\">name<\/span><span class=\"p\">,<\/span> <span class=\"n\">gender<\/span><span class=\"p\">)<\/span>\n\n  <span class=\"n\">gender<\/span> <span class=\"o\">:=<\/span> <span class=\"s\">\"female\"<\/span>\n\n  <span class=\"n\">fmt<\/span><span class=\"o\">.<\/span><span class=\"n\">Println<\/span><span class=\"p\">(<\/span><span class=\"s\">\"New gender: \"<\/span><span class=\"p\">,<\/span> <span class=\"n\">gender<\/span><span class=\"p\">)<\/span> <span class=\"c\">\/\/<\/span>\n<span class=\"p\">}<\/span>\n\n<\/code><\/pre>\n\n<\/div>\n\n\n\n<p>The above code, declares and assigns values to two variables <code>name<\/code> and <code>gender<\/code>, and prints a formatted string below it. This program would <strong>panic<\/strong> immediately after the first print statement. it will throw error <code>no new variables on left side of :=<\/code>, because both the variables have already been declared and there are no new variables in the left side of <code>:=<\/code>. So if we needed to change the value of <code>gender<\/code>, we'd use the equal to operator <code>=<\/code> instead of <code>:=<\/code>.<br>\n<\/p>\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight go\"><code><span class=\"o\">...<\/span>\n\n<span class=\"n\">gender<\/span> <span class=\"o\">=<\/span> <span class=\"s\">\"female\"<\/span>\n<\/code><\/pre>\n\n<\/div>\n\n\n\n<h2>\n  \n  \n  Conclusion\n<\/h2>\n\n<p>Hey! you've done a great job reaching this far, hopefully, you now understand how variables are defined in Go, and how to write simple programs that store data in variables. In the next article in the series, I'll be writing about <strong>Types<\/strong> in Go, so stay tuned. <\/p>\n\n<p><em>If you missed the previous article, go check it out <a href=\"https:\/\/dev.to\/codehakase\/golang---getting-started-16c\">HERE<\/a>.<\/em><\/p>\n\n<p>I'm certain I may have missed something, do me a favour and report this dude in the comments section below XD. <\/p>\n\n<p><em>You can checkout my <a href=\"https:\/\/hakaselabs.github.io\">Technical Blog<\/a>, and follow me on Twitter <a href=\"https:\/\/twitter.com\/codehakase\">@codehakase<\/a><\/em><\/p>\n\n","category":["go","beginners","webdev","softwaredevelopment"]},{"title":"Golang - Getting Started","pubDate":"Sat, 18 Nov 2017 12:58:27 +0000","link":"https:\/\/dev.to\/codehakase\/golang---getting-started-16c","guid":"https:\/\/dev.to\/codehakase\/golang---getting-started-16c","description":"<blockquote>\n<p>\u201cGo will be the server language of the future.\u201d\u200a\u2014\u200aTobias L\u00fctke, Shopify<\/p>\n<\/blockquote>\n\n<p>Go was first created as an experiment, the goal of its creators was to come up with a language that would resolve bad practices of others while keeping the good things.<\/p>\n\n<p>Its first release was on March 2012. Go was designed to feel familiar and to stay as simple as possible, the entire language specification fits in just a few pages.<\/p>\n\n<h2>\n  \n  \n  What's this series about?\n<\/h2>\n\n<p>This series is a gentle introduction to the Go programing language, covering the basic concepts, syntax and features of Go. The ending parts of the series would focus on building from Zero to Live app using the Go programming language.<\/p>\n\n<h2>\n  \n  \n  Why Go?\n<\/h2>\n\n<p>Why would you choose Golang over tonnes of other languages such as python, ruby, nodejs, etc?<\/p>\n\n<p>Here are some of the pros I've seen in Go:<\/p>\n\n<ul>\n<li><p>Concurrency is an inherent part of the language. As a result writing multi-threaded programs is a piece of cake. This is achieved by Goroutines and channels (will be discussed fully in next parts of this series).<\/p><\/li>\n<li><p>Golang is a compiled language. The source code is compiled to native binary. This is missing in interpreted languages such as JavaScript used in nodejs.<\/p><\/li>\n<li><p>The language spec is pretty simple. The entire spec fits in a page and you can even use it to create your own compiler... sweet isn't it?<\/p><\/li>\n<\/ul>\n\n<h2>\n  \n  \n  Installation &amp;&amp; Setup\n<\/h2>\n\n<p>Golang is supported on all the three platforms Mac, Windows and Linux. You can download the binary for the corresponding platform here - <a href=\"https:\/\/golang.org\/dl\">https:\/\/golang.org\/dl<\/a> .<\/p>\n\n<h3>\n  \n  \n  Linux setup\n<\/h3>\n\n<p><a href=\"https:\/\/golang.org\/dl\">Download<\/a> the archive and extract it into <code>\/usr\/local<\/code>, creating a Go tree in <code>\/usr\/local\/go<\/code>.<br>\n<\/p>\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code><span class=\"nb\">tar<\/span> <span class=\"nt\">-C<\/span> \/usr\/local <span class=\"nt\">-xzf<\/span> go<span class=\"nv\">$VERSION<\/span>.<span class=\"nv\">$OS<\/span>-<span class=\"nv\">$ARCH<\/span>.tar.gz\n<\/code><\/pre>\n\n<\/div>\n\n\n\n<p>Add <code>\/usr\/local\/go\/bin<\/code> to the <strong>PATH<\/strong> environment variable. You can do this by adding this line to your \/etc\/profile (for a system-wide installation) or <code>$HOME\/.profile<\/code>:<br>\n<\/p>\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code><span class=\"nb\">export <\/span><span class=\"nv\">PATH<\/span><span class=\"o\">=<\/span><span class=\"nv\">$PATH<\/span>:\/usr\/local\/go\/bin\n<\/code><\/pre>\n\n<\/div>\n\n\n\n<h3>\n  \n  \n  Mac OS X package installer\n<\/h3>\n\n<p><a href=\"https:\/\/golang.org\/dl\">Download<\/a> the package file, open it, and follow the prompts to install the Go tools. The package installs the Go distribution to <code>\/usr\/local\/go<\/code>.<\/p>\n\n<p>The package should put the \/usr\/local\/go\/bin directory in your PATH environment variable. You may need to restart any open Terminal sessions for the change to take effect. <\/p>\n\n<h3>\n  \n  \n  Windows installation\n<\/h3>\n\n<p>Open the <a href=\"https:\/\/golang.org\/dl\/\">MSI file<\/a> and follow the prompts to install the Go tools. By default, the installer puts the Go distribution in c:\\Go.<\/p>\n\n<p>The installer should put the <code>c:\\Go\\bin directory<\/code> in your <strong>PATH<\/strong> environment variable. You may need to restart any open command prompts for the change to take effect. <\/p>\n\n<h2>\n  \n  \n  Testing our Installations\n<\/h2>\n\n<p>To test if Go is properly installed on our machine, we need to create a workspace, and write our first program. <\/p>\n\n<p>We'll first create our workspace:<br>\n<\/p>\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code><span class=\"nb\">cd<\/span> <span class=\"nv\">$HOME<\/span>\/go <span class=\"o\">&amp;&amp;<\/span> <span class=\"nb\">mkdir test<\/span>\n<\/code><\/pre>\n\n<\/div>\n\n\n\n<p>Next we create our source file <code>test.go<\/code> with the following content:<br>\n<\/p>\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight go\"><code>\n<span class=\"k\">package<\/span> <span class=\"n\">main<\/span> \n\n<span class=\"k\">import<\/span> <span class=\"s\">\"fmt\"<\/span>\n\n<span class=\"k\">func<\/span> <span class=\"n\">main<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n\n  <span class=\"n\">fmt<\/span><span class=\"o\">.<\/span><span class=\"n\">Println<\/span><span class=\"p\">(<\/span><span class=\"s\">\"Hello World!\"<\/span><span class=\"p\">)<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n\n<\/div>\n\n\n\n<p>The code above, represents a simple Go program. Every Go program is made up of packages. Our program, starts running in the package main. This program is using the package with import paths \"fmt\".<\/p>\n\n<p>By convention, the package name is the same as the last element of the import path. For instance, the <code>fmt<\/code> package comprises files that begin with the statement package <code>fmt<\/code>. <\/p>\n\n<p>To build the program, Go provides a build tool for us to use:<br>\n<\/p>\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight go\"><code><span class=\"n\">cd<\/span> <span class=\"err\">$<\/span><span class=\"n\">HOME<\/span><span class=\"o\">\/<\/span><span class=\"k\">go<\/span><span class=\"o\">\/<\/span><span class=\"n\">test<\/span>\n\n<span class=\"k\">go<\/span> <span class=\"n\">build<\/span> <span class=\"n\">test<\/span><span class=\"o\">.<\/span><span class=\"k\">go<\/span>\n<\/code><\/pre>\n\n<\/div>\n\n\n\n<p>The command above will build an executable named test in the directory alongside the source code. Execute it to see the greeting:<br>\n<\/p>\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight go\"><code><span class=\"o\">.\/<\/span><span class=\"n\">test<\/span>\n<span class=\"n\">Hello<\/span> <span class=\"n\">World<\/span><span class=\"o\">!<\/span>\n<\/code><\/pre>\n\n<\/div>\n\n\n\n<p>If you see the greeting, you've been successful so far, and your Go installation works.<\/p>\n\n<p>This is the first article in the Golang tutorial series. In the next articles, I'll be covering the following topics:<\/p>\n\n<ul>\n<li>Variables - <a href=\"https:\/\/dev.to\/codehakase\/getting-started-with-go---variables-aef\">VIEW<\/a>\n<\/li>\n<li>Types     - <a href=\"https:\/\/dev.to\/codehakase\/types-in-go-ckf\">VIEW<\/a>\n<\/li>\n<li>Constants - <a href=\"https:\/\/dev.to\/codehakase\/constants-in-go-92o\">VIEW<\/a>\n<\/li>\n<li>Functions - <a href=\"https:\/\/dev.to\/codehakase\/functions-in-go-3dd\">VIEW<\/a>\n<\/li>\n<li>Packages<\/li>\n<li>Conditional Statements and Loops<\/li>\n<li>Arrays, Slices and Variadic Functions<\/li>\n<li>Pointers, Structures and Methods<\/li>\n<li>Interfaces<\/li>\n<li>Concurrency<\/li>\n<li>Object Oriented Programming<\/li>\n<li>Defer and Error Handling<\/li>\n<\/ul>\n\n<p>I hope you've enjoyed this part of the series? You can read other articles by me on my <a href=\"https:\/\/hakaselabs.github.io\">Blog<\/a> or on <a href=\"https:\/\/dev.to\/codehakase\">The Practical Dev<\/a>.<\/p>\n\n<p>If I've missed anything, let me know in the comments. <\/p>\n\n","category":["go","softwaredevelopment","webdev"]},{"title":"The Terminal for Beginners","pubDate":"Sat, 28 Oct 2017 21:18:56 +0000","link":"https:\/\/dev.to\/codehakase\/the-terminal-for-beginners-efg","guid":"https:\/\/dev.to\/codehakase\/the-terminal-for-beginners-efg","description":"<p>Getting into Software Development seem overwhelming (actually it is) these days. One has to go through the hassle of getting familiar with different languages, to organizing codebases, to libraries, frameworks, the list goes on. Every Job description (at least the sane ones), requires additional skills to get the job. Example of such, Version Control (Git or Mecurial), tasks runners, build tools, package managers, etc.<\/p>\n\n<p>In this article on my <a href=\"https:\/\/hakaselabs.github.io\/2017-10-28\/terminal-for-beginers\">Blog<\/a> I introduced the terminal for anyone who's trying to wrap their heads around the terminal.<\/p>\n\n<p>Aricle -&gt; <a href=\"https:\/\/hakaselabs.github.io\/2017-10-28\/terminal-for-beginers\">https:\/\/hakaselabs.github.io\/2017-10-28\/terminal-for-beginers<\/a><\/p>\n\n","category":["webdev","setup","terminal"]}]}}