Taswar Bhatti
The synonyms of software simplicity
WordpresstoGatsby

Now that we have the header of the page, let’s try to focus on our footer. We will be creating a footer component in Gatsby with VSCode, we will skip the content and sidebar for the time being and get back to it later. Just like the header page we will create a new file called component > footer.js inside our component folder. We will again use css modules for our style called component > footer.module.css. Below is the code for the component > footer.js, as you can see it has clean html and I have removed a lot of redundant styles from wordpress.

Something you may note above is I am just using plain vanilla Javascript for the year where I have used {(new Date().getFullYear())} to get the current year. One can embed Javascript objects with JSX also.

Below you will find my footer.module.css also included, I have changed some of the styles, they were using id in my wordpress blog and I have changed them to use class.

Now let’s try to edit our index.js file and include the footer in there also, when we try to just add the footer below Header tag we will see an error. Adjacent JSX elements must be wrapped in an enclosing tag.

In order to mitigate the error we need to add empty tag <> and < / > which makes it pretty ugly, I think a better design will be to use a layout, so in the next section we will talk about how to use Layout and add our content and sidebar. See I told you we will get back to content and sidebar, just a bit later 🙂

Below you will find the fixed index.js file and also the screen shot of what we have so far, still far from done but at least we are getting there.

header-footer-gatsby

header-footer-gatsby

Summary

We created our footer style by using the css module, our styling still requires some more work padding etc but we are slowly progressing and getting there. We will tackle the layout in our next section to make thing clean such that we can use the layout for about, contact etc pages and not repeat the tags everywhere.

WordpresstoGatsby

When it comes to styling in Gatsby, it allows one to style with css, less, scss, etc. I wanted to keep things simple for the time being and will use css and just copy what I have for the header in my blog to see how it will look like in Gatsby. It will be a way to find out the amount of work it will require for me to just create the header layout of my blog.

Getting started

Let’s choose a clean template of Gatsby without any pages etc. Gatsby provides us with the hello-world template which is the minimal template. We will start the template by executing the command below.

Gatsby provides us with a way to create global styling by adding the style reference file into gatsby-broswer.js. Lets create a global.css file and add the html and body css styles. We will create a folder in src/styles and also create a file called global.css inside of it.

Your folder will look like below in vscode.

gatsby-styles-global

gatsby-styles-global

Below is the content of global.css, I copied the html and body styles into this file from my blog.

Now we will need to add gatsby-browser.js file so that it can apply this style globally to our site. The file resides on the root folder where you will also find gatsby-config.js

We also need to edit the file to tell it where our global.css file is residing.

Now we will have the global style that we have applied to our site.

Gatsby component module styling

Gatsby allows us to use css modules out of the box. We will be using css modules for our header, we will create a header.js file inside of the src/components folder.

I will now copy and paste my header source into the header.js file. Below I have replaced with Link and I am also passing in a prop into my function, so that I can use the data that will be passed in. I have also replaced the css class to use className rather.

As you can see there are a lot of css elements here and wordpress generates a lot of stuff by default. Not necessary clean html I guess.

Now let’s create our style for our header.js file, we will create a file called header.module.css inside the components folder.

Now we need to modify our header.js file to use these css styles. By default I am using kebab-case for my css, and in our javacript code I can refer to the style by camel casing e.g main-nav becomes mainNav.

Below you will see the clean version of the header.js file where I imported the style and used it in the component.

You may see something funky above where I use join for two styles. In React you need to use an array and join it with two styles in order for it to have two styles in one component. One of the nice thing about using modules is that all the css styles will be unique to the site, so no conflict at all. e.g headerStyles.logoDefault will be converted by Gatsby to header-module–logo-default–1YbkP.

Launching the site

Finally we need to modify our src/pages/index.js and use our Header file inside of it. We will also pass in 2 properties into Header, the title and tagline of our blog.

Finally lets launch the develop server and view how it looks like.

headerpage-from-gatsby

headerpage-from-gatsby

Summary

We covered styling using global styles and also how to use components modules css to style a component. How Gatsby will auto generate css unique code so that there are no conflicts between other components and styles. I hope you see that by default your code will be quite clean by gatsby. Next up we will try to cover more the body and footer for the blog.

WordpresstoGatsby

As mentioned earlier I wanted to move my blog from WordPress to Gatsby. Let’s get started and get our feet wet with Gatsby using VSCode and see how it all comes together. I will be using VSCode for all my development for this migration.

Install Gatsby

In order to get started we need to satisfy gatsby requirement, that is to instal nodejs and npm. For mac you can use brew to install nodejs/npm and chocolatey for windows.

Once you have installed npm you can execute the command below to install gatsby cli, I am installing it globally using the -g command.

You can also install GatsbyHub vscode extension, I will use mostly the command line since I am comfortable with the command line. GatsbyHub does make it easy for people who like to just be in the IDE, it is optional.

Getting started with Gatsby

We will use the gatsby cli command line to create a new site, let’s create a new site called test-site with the cli. What the command line below will do is use the gatsby starter default template to create the site for us. You can provide other templates of your choice when creating the site. I will cover template later on.

Let’s view the code in vscode and see what has been generated. Change directory into the test-site and execute $code . (this will open vscode to the current directory).

VSCode Gatsby folder

Gatsby VSCode default folder structure

In Vscode use the terminal and change to the current directory test-site if not in that directory and execute the gatsby develop to run the gatsby web server. This will allows you to use your local traffic to view the generated site, by default gatsby will use port 8000 and you will be able to view your site. In addition to your web site there is also another url for graphql that is being used by Gatsby. I will cover graphql later on.

When we open our browser to http://localhost:8000/ we will see the starter page like below.

gatsby-default-starter

Gatsby default starter

We can also view the graphql UI on the http://localhost:8000/___graphql it would look something like the image below.

gatsby-graphql

gatsby-graphql

You can use graphql to query for information about your site, just like the site that we have just created e.g we can query for the site title of our site using graphql. You can click on Site->SiteMetadata->title for it. It will then generate a query like below in graphql.

Editing Pages

Let’s switch back to VSCode and open the src folder and drill down to pages folder. You will find src/pages/index.js file in there. We will try to modify it and say Hi “yourname” in there. E.g I will say Hi taswar and save it. Once saved you don’t even need to reload your page, gatsby will see the change and auto reload it for you.

gatsby-changename

gatsby-changename

Adding new file

Now we will add another file to the pages folder, we will call it src/pages/about.js, place it into the same pages folder and add the code below to it.

Go back to your browser and try to visit http://localhost:8000/about. You will notice that all pages inside with js extension will automatically have the url based on the filename. E.g the 404.js file or page-2.js has the url as http://localhost:8000/page-2/. That’s pretty sweet right?

gatsby-about-page

gatsby-about-page

Looking at the code you may also have notice some special tag called Link, that is a way for gatsby to link to internal pages. For external pages you will continue to use the a href links. The advantage of the Link tag is it allows preloading of data, again built into Gatsby.

Summary

We went through a simple case of Gatsby where we installed it, created a site using default template and using the develop server that comes with gatsby. We also tried out some of the graphql that gatsby provides. I will cover more in details of Gatsby in the next blog post so stay tuned.

WordpresstoGatsby

I have been using WordPress for a very long time now, and have been happy with it. One down side of wordpress is you have lots of patches to apply, update plugins and running my own wordpress with all the security issues seem like such an old idea. Yes, of course you can choose to a hosting provider to host wordpress by others but being old fashioned I like to own my own things and tinker around things. Therefore I started to look at alternatives to see what the new CMS and javascript landscape has to offer. I remember when I was speaking at ForwardJS in Ottawa, Gatsby kind of caught my attention.

What is Gatsby?

From their website it states “Gatsby is a blazing fast modern site generator for React.” React cool right? So I thought why not try out React and see where we go from here. Thus this is the journey of moving my wordpress site to Gatsby. I wanted to go really step by step process rather than having someone tell you 3 quick ways to move or get rich scheme. I want this to be a journey in order for us to learn what it really takes to move a wordpress site to Gatsby.

What are the advantages of moving

One thing to note and to understand is that Gatsby is not really a CMS it’s a site generator, so it will be in React but generating html files with JavaScript/React on top. When once tries to serve these html file from a CDN then it will super fast. Example AWS S3 to serve the static website. Not to mention the price of serving static web content is way cheaper than running a webserver on linux with mysql database. Last but not least I can write blog post with Markdown rather than using the wordpress UI to login and write my post, I will be able to write even offline 🙂

What are the disadvantages?

Since it will be static website there are no comments, unless you use third party e.g Disqus and Facebook Comments using javascript to embed it. The downside is there will be ads, which sucks. You can run a simple nodejs site with postgres on Heroku or use git comments. I plan to use git comments and lets see how that goes.

Summary

In my next blog post I will get started on our journey and learn a bit more about Gatsbyjs and how we plan to migrate from wordpress and build in gatsby.

Redis

In this blog post I wanted to cover how to use Redis with AspNetCore WebAPI. Most of my examples have been covering using console application since I wanted to explain the core concepts of Redis and the functionality. Now lets see how you can use it in a Web Application.

Create the webapi

To start we will create webapi using command line dotnet new

Now that we have our skeleton created, we need to add some of the dependency for Redis. I have used dotnet command line again to add the dependencies. I am also using Message Pack for my serialization, there are other options also like Newtonsoft etc.

If you want to learn more about Message Pack https://msgpack.org/index.html

Running Redis in Docker

I am using Docker to run my Redis server, the command to execute to run my redis server as below

If you want to know more about docker and redis read my previous blog post http://taswar.zeytinsoft.com/redis-running-in-docker/

Now we will need our aspnetcore information on how to connect to redis, the best option is to use your appsettings.json file to have the information. For production you will probably like to store it in some external configuration management like Hashicorp Vault or Azure Vault.
Open up your appsettings.json file and add the Redis configuration information. One can add multiple Hosts in the array, for us we only have 1 server running on localhost.

Redis AspNetCore WebApi

Now we need to configure our webapi to start using redis, we will modify our Startup.cs file and use the build in IoC (Dependency Injection) container that it provides to hook things up in our ConfigureServices method.

Create a Controller

Lets add a new controller and call it RedisController, we will use the controller to call redis to store some values and to get some values out of redis. The sample below shows a HttpGet, HttpPost and a HttpDelete method decorated attribute. As you may also notice that the IRedisCacheClient was injected into the constructor by the IoC Container when we configured our services in Startup.cs

Testing the methods

I used curl to test out the method, first I used the POST method to create the data I wanted. I am using the -k prefix since I wanted to ignore the cert and I just posted some random json data into the method, even though in the method I don’t use it as above, but just to give an example of how you would pass in data.

Now I can call the get call to get the data, one can use curl or just use chrome to call the get call. The result are show below.

Calling StackExchange.Redis Api

What if we want to call Redis StackExchange calls directly? We can do so like below I am using the SetAdd method and SetMembers to get values out of Redis Sets

Summary

I hope this explain how to use redis with your aspnetcore application, you can get the source code for this project on github. https://github.com/taswar/RedisForNetDevelopers/tree/master/14.RedisAspDotNetCore. Also feel free to comment on it and ask questions, if there is something missing feel free to reach out.

aws-iam

This would be the last post on how to add AWS IAM users sign-in link for signin to console. If you wish to read the other post please check them out below.

How to add AWS IAM users sign-in link for signin to console

In your Dashboard click and on Customize
AWS-IAM-Customize-Sign-In-Link

AWS IAM Customize Sign In Link

Enter the name you want to use for your sign-in and create the alias you wish to have
AWS-IAM-Account-Alias

Account Alias

Now your users can visit the url you have create and sign in, I will use the user I create before, NOTE: now the Alias is already filled in.
AWS-IAM-Login

AWS-IAM-Login

Once logged in using the csv file we saved earlier we will need to change the password
AWS-IAM-Change-Password

AWS IAM Change Password

When we have satisfied our Password Policy we will then be redirected to the console
AWS-IAM-Logged-In-Console

AWS Console Logged In

Summary

This concludes our AWS IAM part of securing your AWS account there is a lot more that one can add to it. Probably in the future I will add more into it. If you like these AWS post let me know, I intend to add more of them.

aws-iam

This would be the second last section to cover the AWS IAM. We will cover Apply an IAM password policy in AWS. If you wish to read the previous section the links are provided below.

Apply an IAM password policy

We can now click on the dashboard for Apply an IAM password policy
AWS-IAM-Apply-IAM-Password-Policy

Apply IAM Password Policy

Click on the Set Password Policy
AWS-IAM-Set-Password-Policy

AWS IAM Set Password Policy

Now inside the section you can pick the options you wish to add, I have added a sample below.
AWS-IAM-Set-Password-Policy-Display

Set Password Policy Display

AWS-Set-Password-Policy-Sample

Password Policy Sample

By completing this part now we have full green check marks in our IAM Resources in AWS
AWS-IAM-Resources

AWS-IAM-Resources

Summary

We have now completed our AWS IAM Resources and have completed and got full green check marks for them. Congratulations. I wanted to cover one more thing, check my next blog post and you will find out.

aws-iam

In this post we will cover using groups to assign permissions to users in AWS. This is the third part on IAM on AWS to protect your account. You can view previous part below.

Use groups to assign permissions in AWS

Lets now expand the section of Groups in our IAM Dashboard and click on Manage Group
AWS-IAM-Use-Groups-To-Assign-Permissions

Use Groups To Assign Permissions

We can then click on Create New Group
AWS-IAM-Create-New-Group

Create New Group

I will create a group named “admin”
AWS-IAM-Set-Group-Name

Set Group Name

I will now attach the AdministratorAcccess Policy to the group I just created
AWS-IAM-Attach-Group-Policy

Attach Group Policy

You can now review the group and the attach policy and continue
AWS-IAM-Group-Review

IAM Group Review

We can now clean up some items and add the group to the user we previous created so that the user is in the admin group rather than having direct permission to AdminstratorAccess. Click on the newly create admin user
AWS-IAM-New-Group-Created-Select

New Group Created Select

We can now click on Add Users to Group to add the previously created user
AWS-IAM-Add-Users-To-Group

Add Users To Group

Select the user/users you wish to add to the group.
AWS-IAM-Select-User-to-Group

Select User to Group

Afterwards we will find that the user in now added to the group
AWS-IAM-User-Added-To-Group

User Added To Group

We can now remove the user policy that the user has since the user is already in Admin Group we can revoke the policy of AdministratorAccess, there is no need to have 2 things that mean the same. Click on User and select the policy and click on the right to delete it.
AWS-IAM-Remove-User-From-Policy

Remove User From Policy

A prompt will show to confirm the detach of policy from the user, click on Detach and the policy will be removed.
AWS-IAM-Detach-Policy

Detach Policy

Summary

We have covered the forth step in our IAM in AWS on groups to assign permissions to users in AWS. Next we will cover how to Apply an IAM password policy.

aws-iam

I hope you have read the first part covered on how to protect your root account with MFA. In this post we will continue on and protect our AWS account by creating individual IAM users.

Create individual IAM users

We can now move to creating individual IAM users section
AWS-IAM-Create-individual-IAM-users

Create individual IAM users

Now we can expand the section and click on Manage Users
AWS-IAM-Create-individual-IAM-manage-users

Create individual IAM Manage users

Once inside the section click on Add User
AWS-IAM-AddUser

AWS IAM Add User

Type the user name, set access type and auto generate password. Remember to require password reset to be more secure.
AWS-IAM-Set-User-Details

AWS-IAM-Set-User-Details

AWS-IAM-Require_Password_Reset

Require Password Reset

Set the permissions to the user, I have clicked on attach existing policies directly and have selected Admin access for my user.
IAM-User-Set-Permissions

User Set Permissions

You can then add tags if you want it is optional. I have added User with Admin as tag like below.
AWS-IAM-Add-User-Tags

Add User Tags

You can then review the user and click on Create User
AWS-IAM-Review_User-Details

Review User Details

Your user will be create, remember to download the csv file or email the user with their temporary creds
AWS-IAM-User-Created

User Created

Summary

Here are the steps to create individual users in AWS using their IAM. Next section we will cover how to creaet groups so assign to the user we just created

aws-iam

In this post I wanted to cover how to Activate U2F Fido Keys for AWS root account.

After logging if you click on IAM you will see the dashboard like below where 4 steps are not yet complete. We will complete those first steps and other post will cover the other steps such that we can have better security in our AWS account.

Activate MFA on your root account

AWS Security Status

We will now expand the second step and activate MFA
AWSActiveMFA

AWS Active MFA

Then you will be prompted for Security Creditials and click on it
AWSActiveMFAContineSecurityCreds

Continue Security Credentials

Choose the MFA Tab and click on Active MFA
AWSActiveMFA-IAMDashboard

AWS Active MFA IAM Dashboard

I will use the U2F Yubikey option to activate my root account
AWSActiveMFA-U2F

Active MFA U2F

This will prompt for allowing the browser to access your key and since I am on windows it will also prompt for a non browser based prompt to allow it, once you plug in your yubikey then you can click the key icon.
YubiKey

YubiKey

Aws-prompt-u2f

Aws prompt u2f brower allow prompt

Aws-prompt-u2f-step2

Aws prompt u2f windows prompt

Now your Admin account that was used for creating the AWS account is using U2F for authentication
AWS-Setup-U2F-Complete

AWS Setup U2F Complete

Summary

I hope this has helped in setting up U2F with your FIDO token to protect the root account, in other post we will cover the other 3 steps.

UA-4524639-2