DEV Community: Semir Teskeredzic

Middleware Functions

Semir Teskeredzic — Mon, 06 Dec 2021 08:13:01 +0000

Hello all, in this post I will go through middleware functions, like the one used in NodeJS with ExpressJS. So let's start. Middleware is the code that runs on server between receiving a request and sending a response.

According to expressjs.com:

Middleware functions are functions that have access to the request object (req), the response object (res), and the next function in the application’s request-response cycle. The next function is a function in the Express router which, when invoked, executes the middleware succeeding the current middleware.

There are several tasks that middleware functions can perform:

Execute any code
Make changes to the request and response objects
End the request-response cycle.
Call the next middleware in stack.

One thing that you should always remember is that middleware functions are executed from top to bottom. Which means that when one middleware function ends the cycle the rest of functions will not be executed.

When does middleware function end cycle?

It ends when the middleware function runs but does not invoke next function so it stops after executing.
It also ends the cycle when the response is sent to the browser. So if you have a GET with a route '/', every time someone visits that route, the request is received and the response is sent ending the cycle. All functions that are located below that function won't fire.
It is important to mention that functions with GET POST requests will be executed only when a request from a specified route arrives.

Common usages for Middleware

Log of all requests
Auth check for protected routes
Return 404 pages
Parse JSON data from requests
Expose folders or files

Examples

404 Pages

In this example we will see how middleware function is used to display 404 page:

...
app.listen(3000)

app.get('/', (req, res) => {
  const homePage = [
    {title: 'Section One', text: 'This is the first section'},
    {title: 'Section Two', text: 'This is the second section'}
  ]
  res.render('index', {title: 'Home', homePage})
})

app.get('/about-us',(req, res) => {
  res.render('about-us', {title: 'This is About us'})
}

app.get('/faq',(req, res) => {
  res.render('faq', {title: 'These are Frequently asked questions'})
}

app.use((req, res) => {
  res.status(404).render('404', {title: '404'})
})

When user arrives to / the response is sent and the cycle is stopped, and if request doesn't match any of the provided then it must be 404 page so we use middleware function with .use to send a response. If we wan't it to be executed when no route is found then it must be at the bottom.

Logging requests

We can log every request by placing a middleware function at the very top of our functions like so:

...
app.listen(3000)

app.use((req, res) => {
  console.log('Request')
  console.log('host: ', req.hostname)
  console.log('path: ', req.path)
  console.log('method: ', req.method)
}

app.get('/', (req, res) => {
  const homePage = [
    {title: 'Section One', text: 'This is the first section'},
    {title: 'Section Two', text: 'This is the second section'}
  ]
  res.render('index', {title: 'Home', homePage})
})

...

When we run the application we will get the log when we visit any route. But it is not working right, currently it will 'freeze' so we won't get any content from any of our routes. This is due to the fact that the middleware function was executed and it stopped the cycle because it didn't invoke the next one. We can fix it by using next(), we will just add it to existing function

...
app.use((req, res, next) => {
  console.log('Request')
  console.log('host: ', req.hostname)
  console.log('path: ', req.path)
  console.log('method: ', req.method)
  next()
}

Now when we run our app, all routes are accessible and we get a log each time request has been received.

Expose Static files

If need to use images, css files, or other assets we won't be able to access it from the browser. We can fix this with middleware function that will expose a folder where all our static files will be located. It is quite simple:

const express = require('express')

const app = express()

app.listen(3000)

app.use(express.static('public'))
...

This is it, we just need to create a public folder in our root directory and put in all files that we need to have accessible by browser. If you do a <link href="/..."> you don't need to include public folder to the path since our code is looking automatically inside the public folder.

Hope you've learned something new and useful.
Thank you for reading, stay safe and have a great day.

State & DOM Manipulation with AlpineJS

Semir Teskeredzic — Thu, 16 Sep 2021 19:07:48 +0000

In my previous post I introduced this great lightweight JavaScript framework - AlpineJS. You can read about it here. In this post I will go through some of the concepts that AlpineJS uses for state management and DOM manipulation.

State

You can say that the State is the magic ingredient and I will agree with you, but essentially State is a data object that enables us to do many things on the frontend side. Alpine lets you provide data within specific HTML element(s) or make it accessible from anywhere on your page. Let's start with the local one.

x-data

This attribute is simple and straightforward, you declare it inside the HTML element and the entire block has the access to it. In the example below h1 and p will have no problem accessing toggle value and additionally if they depend on it, they will react automatically.

<div x-data="{ toggle: true }">
...
  <h1></h1>
  <p></p>
...
</div>

You can also nest data and access parent data from the child. Let's see that in the example

<div x-data="{ toggle: false }">
  <div x-data="{ title: 'I am the title' }">
    <h1 x-text="title"></h1>
    <p x-show="toggle">Paragraph</p>
  </div>
</div>

Data can also be used within the same element, you can also pass only the x-data directive without expression if you need to.

<button x-data="{ label: 'Buy Now' }" x-text="label"></button>
<button x-data @click="alert('Button is clicked')">Alert</button>

Alpine.store(...)

When you need your data to be available to every component on the page, you can use Alpine.store that stands for global store on the page level. You are registering it with Alpine.store(...) and referencing it with the $store() method. First we will register the store:

Alpine.store('tabs', {
  current: 'overview',
  items: ['overview','description','specification'],
})

We can now access it or modify it anywhere on the page

<div x-data>
  <template x-for="tab in $store.tabs.items">
    ...
  </template>
</div>

<div x-data>
  <button @click="$store.tabs.current = 'overview'">Overview</button>
  <button @click="$store.tabs.current = 'description'">Description</button>
  <button @click="$store.tabs.current = 'spoecification'">Specification</button>
</div>

DOM Manipulation

Alpine makes DOM manipulation available through the use of various directives. We will go through some of the most common ones here.

Text content

We can use directive x-text to essentially control the text content of the element:

<div x-data="{ paragraph: 'This is the paragraph' }">
  <p x-text="paragraph"></p>
</div>

With this directive you can use any JavaScript expression and it will evaluate as the content of the element.

<div x-data="{a: 1, b: 4}">
  <p x-text="b > a"></p>
</div>

This will output true

Toggling elements

You will require this directive when you create modals, dropdowns and similar content that has 'on-off' logic. We can use x-show and x-if here to toggle elements on the page. Behind the scenes Alpine is adding display: none to the element it needs to hide

<div x-data="{ toggle: false }">
    <button @click="toggle = ! toggle">Show More</button>
    <div x-show="toggle">
        My Content...
    </div>
</div>

We can use x-if to achieve the same goal

<div x-data="{ toggle: false }">
    <button @click="toggle = ! toggle">Show More</button>
    <template x-if="toggle">
      <div>
        My Content...
      </div>
    </template>
</div>

Binding attributes

We can add HTML attributes to elements using x-bind directive

<button
    x-data="{ green: false }"
    x-bind:class="green ? 'bg-green' : ''"
    @click="green = !green"
>
    Toggle Green
</button>

You can use syntax without x-bind only on class bindings like so:

<div x-data="{ open: true }">
  <p :class="{ 'hidden': !open }">...</p>
</div>

Here we will have hidden class added to the p element whenever open is false.

Looping elements

We've seen x-for earlier when we iterated through tabs in Alpine.store(...) example. As you've seen there, x-for allows us to iterate through our data. Note that it has to be applied within <template> tag though.

<div x-data="{ seasons: ['spring', 'summer', 'autumn', 'winter'] }">
    <template x-for="season in seasons">
        <div x-text="season"></div>
    </template>
</div>

Inner HTML

You can also control HTML content with the x-html directive like so:

<div x-data="{ title: '<h1>I am the Title</h1>' }">
    <div x-html="title"></div>
</div>

Hope some of the examples will help you in your work, hobbies, and projects. Thank you for reading and stay safe.

Fancy a modern alternative to jQuery? Meet AlpineJS

Semir Teskeredzic — Thu, 19 Aug 2021 08:54:33 +0000

Couple of days ago I stumbled upon a great video from Fireship on YouTube. It was about creating a same todo app in 9 JS frameworks and in vanilla JS. In my opinion it is a piece worth watching, you can watch it here.

I've also never been much of a fan of jQuery, yeah it gets the job done and it can pull you out from some difficult situations but it never really grew on me. That's why AlpineJS sounded so appealing at first.

It is ultra lightweight and consists of 15 attributes, 6 properties, and 2 methods. It has bindings, listening for events, looping, and even a store.
Without a further ado I'll guide you through some basic examples for you to see how cool and simple it really is.

Let's create a toggling dropdown.

Toggling Dropdown component

Let's start by creating a regular html file named something like baby-steps-alpinejs.html
You won't need any libraries from npm everything is imported through the cdn link like so:

<html>
<head>
    <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
</head>
<body>
</body>
</html>

As for structure we will need our main <div>, then a <button> that will do the toggling, and finally a <div> that will house our content.

...
<body>
  <div x-data="{open: false}">
    <button x-on:click="open = !open">Toggle</button>
    <div x-show="open" @click.outside="open = false">Our Dropdown contents</div>
  <div>
</body>
</html>

Now what is happening here, let's start from the beginning. The x-data is simply a directive in Alpine that declares the object of data, it is worth mentioning that every property inside this object is available to other directives inside that HTML element. Here we declare our variable open with the value false.

Next, there is a button that has an event listener expressed with x-on directive, in this case we are listening to the click event on this element. When this button is clicked we toggle the value of the previously declared variable open. So far so good.

Latest element is a div that houses the content. Here we see another Alpine directive x-show, what it does is showing and hiding a block of HTML on a page based on the input, in this case it is evaluating our variable open.

It might be a little confusing to see @click all of a sudden, it is a shorter way to implement x-on directive. Another thing is .outside attached to the @click directive. This is a modifier that is created for making your life easier. It will listen to the clicks outside of the element and apply given logic, in this case open = false.

Another handy modifier is used with submit event in forms to, you guessed it, prevent default behaviour upon form submission. It is applied simply as @submit.prevent="..." simple as that. Modifiers like window, document, outside, debounce and others are there to help you with implementations of behaviours that would otherwise be a little tricky to set. They are of great help, that's for sure.

I want to show you another directive that we didn't use here - x-text it is a directive that is used for setting the text content of the element. You can set it to the variable open in which case it will display textual boolean value true because the open is always true when it's open. We can also declare another variable in the x-data and use x-text to display it like so:

...
<body>
  <div x-data="{open: false, content: 'Our newest content'}">
    <button x-on:click="open = !open">Toggle</button>
    <div x-show="open" @click.outside="open = false" x-text="content"></div>
  <div>
</body>
</html>

This will show the text Our newest content when we toggle our element.

I hope you enjoyed a short glimpse inside the AlpineJS.

Thank you for reading and stay happy, productive, and safe.

Spread Syntax ( ... )

Semir Teskeredzic — Fri, 06 Aug 2021 09:33:46 +0000

MDN Web docs state following for the spread syntax:

Spread syntax (...) allows an iterable such as an array expression or string to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected, or an object expression to be expanded in places where zero or more key-value pairs (for object literals) are expected.

Spreading the arrays

In day to day coding we are mostly using spread syntax to copy the array or the object to the new array. For example:

let companies = ['Nestle', 'Volvo', 'Klarna'];
let newCompany = 'Adobe';
companies = [ ...companies, newCompany];
// This returns ['Nestle', 'Volvo', 'Klarna', 'Adobe']

So basically we use spread syntax when we want to include all elements from either array or object to some kind of list.

Use case with ReactJS

This comes handy in handling state in React when you want to have previous state and include a new piece of data like so:

import React, {useState} from 'react'

export default function App() {

    const [colors, setColors] = useState(['Red','Green','Blue']);

    const changeColor = (colorName) => {
     setColors((prevState) => [...prevState, colorName])
    }

  return (
    <div className="App">
      <h1>Colors</h1>
      {colors.map((color) => <p>{color}</p>)}
`     <button onClick={() => changeColor('Gold')}>Gold</button>
    </div>
  );
}

Here we initialise the state with primary colours Red, Green, and Blue. Then we use prevState and spreading it inside a new state so we can get all the elements in the previous state and add a new element.
We just hardcoded Gold here but we could make a dropdown or input field to add whatever we like.

Spreading multidimensional arrays

When we are not copying multidimensional arrays, we indeed create a copy:

let first = [1, 2, 3, 4]
let second = [...first]

console.log('First', first)
// First (4) [1, 2, 3, 4]
console.log('Second', second)
// Second (4) [1, 2, 3, 4]

Now if we remove the element from the second array, the change will happen only in the second array.

let first = [1, 2, 3, 4]
let second = [...first]

second.shift()

console.log('First', first)
// First (4) [1, 2, 3, 4]
console.log('Second', second)
// Second (3) [2, 3, 4]

This is because the second array is an actual copy in the memory. However, when we deal with multidimensional arrays we get a red note from MDN docs:

Note: Spread syntax effectively goes one level deep while copying an array. Therefore, it may be unsuitable for copying multidimensional arrays, as the following example shows. (The same is true with Object.assign() and spread syntax.)

So when we have a multidimensional array we don't get a copy but a reference, therefore changing data in the "copied" array will affect the original.

let first = [[1], [2], [3], [4]]
let second = [...first]

console.log('First', first)
// First(4) [Array(1), Array(1), Array(1), Array(1)]
console.log('Second', second)
// Second(4) [Array(1), Array(1), Array(1), Array(1)]

So far it is behaving as expected, but when we change one of the elements, we also get the change in the original array:

let first = [[1], [2], [3], [4]]
let second = [...first]

second.shift().shift()

console.log('First', first)
// First(4) [Array(0), Array(1), Array(1), Array(1)]
console.log('Second', second)
// Second(3) [Array(1), Array(1), Array(1)]

This is one of the things one has to keep in mind if the multidimensional arrays are spread and therefore referenced.

Thank you for reading.

Building a Blog with React, Strapi & GraphQL - Create Post & Display it in Frontend

Semir Teskeredzic — Thu, 24 Jun 2021 21:51:10 +0000

Hey there, this is the second part of the mini series in Building an app with React, Strapi, and GraphQL. In the first part that you can find here, we went through first steps in prepping the backend and frontend for our app.
In this part we will go through creating a blog post and displaying it in the list.

Add Blog Post to the Strapi

First of all, spin up your Strapi environment with the command in the terminal from the directory that houses Strapi:

$ yarn develop

This will start the Strapi server so you can now navigate to http://localhost:1337/admin/, once you are there enter the login data for the admin user.
Now in the left sidebar, chose Content-Types Builder and this will bring you to the list of your content type so click Create Content Type.
As a name enter BlogPost and press Continue, next you will be prompted to select a field for our content type:

For a proper Blog post we need following fields:

Title (Text - Short text)
Body (Text - Long text)
Tags (Text- Short text)
CreatedAt (Date - datetime)

Go on and create those fields by selecting the type from the parentheses. Don't forget to click save after you have added them.

Add a Blog post

In this case we will also use our Strapi backend. Make sure that the Strapi server is running and navigate to http://localhost:1337.
In the collection type section of the left sidebar under Collection Types click on BlogPosts. This will open a list of current BlogPosts with the button to add a new Blog post, press that button to add a new Blog post.
Fill out all the fields as you like and click Save and after that click Publish.
Now when you click on Collection Types BlogPosts you will see our new post in the list.
Next we will show the list of blog posts in the frontend of our application.

Show the list of blog posts in frontend

If you followed steps from the first part in frontend folder we have everything ready to fetch the data from the Strapi backend.
In the frontend folder create a new directory under src named queries there create a new file named blogPosts.js.
In this file we will write a GraphQL query that will fetch us needed data from Strapi.

frontend/src/queries/blogPosts.js

import { gql } from '@apollo/client'

export const GET_BLOGPOSTS = gql`
  query {
  blogPosts {
    id
    Title
    Body
    Tags
    CreatedAt
  }
}`

You can test queries by navigating to http://localhost:1337/graphql

Now we need to write a component that will call this query and populate our table with the data, so let's create a ListBlogPosts.js inside frontend/src/components

frontend/src/components/ListBlogPosts.js

import React from 'react'
import { GET_BLOGPOSTS } from "../queries/blogPosts"
import {useQuery} from "@apollo/client";

function ListBlogPosts() {

    const {data, error, loading} = useQuery(GET_BLOGPOSTS)

    if(loading) return 'Loading...'
    if(error) return `Oops there has been an error: ${error}`
    if(data) return console.log(data)
}

export default ListBlogPosts

We will use this to test whether our query actually works!
If you save this, run the server with yarn start and navigate to http://localhost:3000 you will see ..this:

Oops there has been an error: Error: Forbidden

And that is OK! It shows that our connection with Strapi works, that our basic error handler works because we are forbidden to read this data so this is Strapi issue.
Let's go back to Strapi backend and fix this, open Strapi backend and go to Settings and under Users & Permissions Plugin section select Roles. There you will see our BLOG-POSTS with all checkboxes deactivated, use select all to check all boxes and save it.
Now when you refresh http://localhost:3000 you will see nothing but when you open console you will see we get the object. Success! Now let's show that in a way we humans understand it. Remove the line with if(data)... and create this return instead:

frontend/src/components/ListBlogPosts.js

...
if(error) return `Oops there has been an error: ${error}`

return(
        <div>
            <h1>List of Blog Posts</h1>
            <table>
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Title</th>
                        <th>Body</th>
                        <th>Tags</th>
                        <th>Created</th>
                    </tr>
                </thead>
                {data?.blogPosts && data?.blogPosts.length !== 0 ?
                    <tbody>
                    {data?.blogPosts.map(({id, Title, Body, Tags, CreatedAt}) => (
                        <tr key={id}>
                            <td>{id}</td>
                            <td>{Title}</td>
                            <td>{Body}</td>
                            <td>{Tags}</td>
                            <td>{CreatedAt}</td>
                        </tr>
                    ))}
                    </tbody> : <tbody><tr><td>No Blog Posts to show!</td></tr></tbody>}
            </table>
        </div>
)

export default ListBlogPosts

What did we do here? We created a simple table and we filled it with the data from Strapi. As you can notice we are using data?. with question mark, that is optional chaining because we don't want our code to throw exception if the data is somehow not ok. First we are checking whether blogPosts are there and whether we have blogPosts, we use .length here because we get an array of blogPosts so if there are blogPosts the .length won't be 0. If there are no blogPosts we show short info that there is no blog posts to show while if there are blogPosts we show them in the table through the map function.

Now we see a simple table with all the data we entered in the Strapi backend. In the next steps we will add editing and removing options to this table so we can handle it directly from the frontend client.

Thank you for reading!

First steps in building app with React, Strapi & Apollo GraphQL

Semir Teskeredzic — Thu, 17 Jun 2021 13:10:38 +0000

I have to say I fell in love with Strapi from the day I found it. For all of those who never heard of Strapi be sure to checkout Strapi.io.

As per Strapi.io:

Strapi is the leading open-source Headless CMS. Strapi gives developers the freedom to use their favorite tools and frameworks while allowing editors to easily manage their content and distribute it anywhere.

And it just connects with anything, since I love working with React as well I had to give it a try. Instead of using REST I went with GraphQL and Apollo since it is steady becoming an essential tool in building scalable and performant web applications.

In this post I will go through first steps and share the way I catch GraphQL errors in more meaningful way along with setting up InMemoryCache.

Create & Start a project

Open terminal window and then create a folder for our project, cd into it and create projects for our Strapi backend and React frontend:

$ mkdir BestestApp
$ cd BestestApp
$ yarn create strapi-app backend --quickstart
$ npx create-react-app frontend

This will create two folders in our project folder so you have to open two tabs in Terminal in order to start both applications. In one tab cd into BestestApp/backend and start the server:

$ yarn develop

This will start Strapi so you can open this address in your browser: http://localhost:1337/admin. Follow the onscreen instructions and create Admin user. Login and you are in! Welcome to Strapi!
In the second tab navigate to BestestApp/frontend and type

$ yarn start

This will start React application that by default runs on http://localhost:3000/ so go on and open it in another tab.

Install Packages

In order for us to work with Apollo we have to install some packages so let's do that. Open another Terminal tab navigate to BestestApp/frontend and install packages:

$ yarn add @apollo/client apollo-link apollo-link-error graphql

Configure GraphQL and Entry point

Make sure that Strapi server is running and enter the Strapi through the browser using http://localhost:1337/admin. Then go to the Marketplace in the sidebar and make sure that the GraphQL plugin is installed, if it is not, then go ahead and install it. And don't worry if you sometimes get an error here, just refresh the page.

You can now enter your GraphQL endpoints using http://localhost:1337/graphql.

We will now go into editing Index.js in our Frontend so open your favorite IDE or any other editor you use for coding and open BestestApp/frontend/src/Index.js.
We will now implement a GraphQL error check that will show you in the console when something is not right with your request. We will add errorLink creator and a little Apollo magic:
/frontend/src/Index.js

...
import { ApolloProvider, createHttpLink } from '@apollo/client';
import { ApolloClient } from '@apollo/client';
import { onError } from 'apollo-link-error';
import { ApolloLink } from 'apollo-link';

const errorLink = onError(({ graphQLErrors, networkError }) => {
  if (graphQLErrors) {
    console.log('graphQLErrors', graphQLErrors);
  }
  if (networkError) {
    console.log('networkError', networkError);
  }
});

const httpLink = createHttpLink({
  uri: 'http://localhost:1337/graphql',
});

const link = ApolloLink.from([errorLink, httpLink]);

export const client = new ApolloClient({link});

ReactDOM.render(
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>,
  document.getElementById('root')
);
...

We used onError to catch GraphQL and Network errors and show them to console, and we are using the GraphQL endpoint for Strapi http://localhost:1337/graphql. Next we initiate our ApolloClient using a link that uses our errorLink and httpLink. Finally we reference the client in the ApolloProvider wrapping our as the entry to our app.

Configure InMemoryCache

Great thing about Apollo is that it uses in-memory cache which enables our client to respond to queries for the same data with better performance and without unnecessary requests.
We just need to add it to our options config when instantiating new Apollo client with the appropriate data for our types. In this example we have Parts and Products:

...
import { ApolloClient, InMemoryCache } from '@apollo/client';
...
export const client = new ApolloClient({
  link,
  cache: new InMemoryCache({
    typePolicies: {
      Query: {
        Part: {
          parts: {
            fields: {
              merge(existing, incoming) {
                return incoming;
              }
            }
          }
        },
        Product: {
          products: {
            fields: {
              merge(existing,incoming) {
                return incoming;
              }
            }
          }
        }
      }
    }
  })
});
...

You can find more on configuring caching here.

Congrats! You are now ready to use GrapQL to read data from the Strapi backend. In some later posts I will go through queries and mutations that are needed for fetching and updating data.

Thanks for reading!

Add Notifications to your React application

Semir Teskeredzic — Sun, 13 Jun 2021 20:32:24 +0000

Proper notifications are crucial for functional UI. Imagine you are using one of many web applications and you enter a wrong password or any kind of input just to see that nothing happens and you are left baffled. That is why integrating notifications, alerts or other kind of signals what has happened is important for any application with user interface.

In this post I will go through the simple integration of react-notifications-component library that has some 23k of weekly downloads on npmjs.com.

Add package to your project

You can use npm to add this package:

$ npm i react-notifications-component

Then you need to build library:

$ npm run build:library:dev

You are ready to go! Now you can start your application

Import and Setup

Now in your App.js you need to import ReactNotification and its css file like so:

import ReactNotification from 'react-notifications-component'
import 'react-notifications-component/dist/theme.css'

Now we put ReactNotification component alongdside of our main app content in order not to collide with other absolute positioned elements:

function App() {
  return (
    <div>
        <ReactNotification />
        <Application />
    </div>
  )
}

export default App;

We are now ready to use notification when we need it.

Use in Component

Let's say you have a small component that throws a great success notification when you enter your name and click hello button and it throws bad red notification when you don't enter your name but nevertheless click hello button.

First we import store from our new package:

import { store } from 'react-notifications-component'

Notification is called like this:

store.addNotification({
  title: "Success!",
  message: "You have been successful!",
  type: "success",
  insert: "top",
  container: "top-right",
  animationIn: ["animate__animated", "animate__fadeIn"],
  animationOut: ["animate__animated", "animate__fadeOut"],
  dismiss: {
    duration: 5000,
    onScreen: false
  }
});

To see the notification in action we will create a component that will evaluate if the user entered name, if yes then success notification will be executed if not then danger notification will be executed. So here is a simple component:

import React, { useState } from "react";
import { store } from "react-notifications-component";

function Application() {
  const [name, setName] = useState("");

  const handleChange = (e) => {
    setName(e.target.value);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    if (name) {
      store.addNotification({
        title: "Great",
        message: `Hello ${name}`,
        type: "success",
        insert: "top",
        container: "top-right",
        animationIn: ["animate__animated", "animate__fadeIn"],
        animationOut: ["animate__animated", "animate__fadeOut"],
        dismiss: {
          duration: 5000,
          onScreen: false
        }
      });
      setName("");
    } else {
      store.addNotification({
        title: "OOh OOh!",
        message: "Don't be shy!",
        type: "danger",
        insert: "top",
        container: "top-right",
        animationIn: ["animate__animated", "animate__fadeIn"],
        animationOut: ["animate__animated", "animate__fadeOut"],
        dismiss: {
          duration: 5000,
          onScreen: false
        }
      });
    }
  };

  return (
    <>
      <input
        value={name}
        onChange={(e) => handleChange(e)}
        placeholder="Enter name here!"
      />
      <button onClick={(e) => handleSubmit(e)}>Say Hello</button>
    </>
  );
}

export default Application;

Simple setup is available in codesandbox here

You can configure notifications object with values:

Position:

container:
- top-left
- top-right
- top-center
- center
- bottom-left
- bottom-right
- bottom-center

Types:

type:
- success
- danger
- info
- default
- warning

You can find more in the package documentation here.

Thank you for reading and happy notifying!

Create Forms with Firebase and Formik

Semir Teskeredzic — Tue, 08 Jun 2021 22:51:00 +0000

Whatever is the application you are building, the data is in the heart of it. In this post I will go through building a simple but functional form with Formik and storing the data to Firebase database. I will use React functional component for this example so you can follow along or use it with your React project.

Prerequisites

First you will need to create a Project at Firebase (or use an existing one).
You need to create a database within the Firebase project you want to use (or use an existing one) and set up the write rule to true.
React application (using Create React App or other)
Following packages (you can also use npm i instead of yarn add):

$ yarn add firebase formik

Configure Firebase

When you arrive to your Firebase dashboard you will enter your project and grab a configuration object by pressing the code icon </>

Then you will get something similar to this:

firebaseConfig.js

var firebaseConfig = {
    apiKey: "xxxxxxxx",
    authDomain: "firebaseformikproject-xxxxx.firebaseapp.com",
    projectId: "firebaseformikproject-xxxxx",
    storageBucket: "firebaseformikproject-xxxxx.appspot.com",
    messagingSenderId: "xxxxxxxxxxxxx",
    appId: "x:xxxxxxxxxxx:web:xxxxxxxxxxxxxxxxxx"
  };

We will use this object to configure Firebase in our React app.

Create a new file in your project directory/src named firebaseConfig.js and paste the object.
Next replace var with let and add export default firebaseConfig outside of the object

Go to the index.js or entry point of your application and add following line above of ReactDOM.render():

index.js

...
import { firebase } from '@firebase/app';
import firebaseConfig from './firebaseConfig';

firebase.initializeApp(firebaseConfig);

ReactDOM.render(
...

Note: If your firebaseConfig.js file is not in the same directory as your index.js then you have to adjust the route in the import statement.

Now the Firebase initializes on your application start.

Add Formik form

We will now create a simple form with Formik. Create a new file named RegisterForm.js and place it into current directory.

We will use React, Firebase for updating the database and Formik hook for handling the form so we need to import them:

RegisterForm.js

import React from 'react'
import Firebase from 'firebase'
import { useFormik } from 'formik'

Next we will pass initial values and the onSubmit method to our functional component. We will ask our users to write their first name, username, and email. We will then save that data in the Firebase database when the user clicks submit:

RegisterForm.js

...
const RegisterForm = () => {

const formik = useFormik({
  initialValues: {
    firstName: '',
    username: '',
    email: '',
  },
  onSubmit: values => {
    let ref1 = Firebase.database().ref().child('users').push()
    ref1.set(values)
  },
});
  return (
    <form onSubmit={formik.handleSubmit}>
      <label htmlFor="firstName">First Name</label>
      <input
        id="firstName"
        name="firstName"
        type="text"
        onChange={formik.handleChange}
        value={formik.values.firstName}
      />

      <label htmlFor="username">Username</label>
      <input
        id="username"
        name="username"
        type="text"
        onChange={formik.handleChange}
        value={formik.values.username}
       />

      <label htmlFor="email">Email Address</label>
      <input
        id="email"
        name="email"
        type="email"
        onChange={formik.handleChange}
        value={formik.values.email}
      />

      <button type="submit">Submit</button>
    </form>
 );
};

export default RegisterForm

And voila! Our registration form is ready and working. We used Formik helper functions handleChange and handleSubmit so it kept our code quite clean.

If you want to test it, open App.js and import RegisterForm.js and use it as a component.

App.js

import RegisterForm from "./RegisterForm";

export default function App() {
  return (
    <div className="App">
      <RegisterForm />
    </div>
  );
}

Firebase and unique ID

If you worked with relational databases you are familiar with the id for each entry that is usually a primary key i.e. it is unique and can be referred only to one entry.
In Firebase each entry gets a unique key so one our example entries looks like this:

users
  |_ -MEIwCAwrPBePyp4mVv1
        |_ firstName: "John"
        |_ username: "johnwayne"
        |_ email: "john.w@mail.com"

Each new entry gets this unique key, but what if you want to catch it and store it along with all the data for one user? It is simple, we will just edit our onSubmit method:

RegisterForm.js

...
    onSubmit: values => {
    let ref1 = Firebase.database().ref().child('users').push()
    let key = ref1.key
    values.id = key
    ref1.set(values)
  },
...

We first grab a key from our ref1 and then we put that value to the values object. We will then have this in the database:

users
  |_ -MEIwCAwrPBePyp4mVv1
        |_ firstName: "John"
        |_ username: "johnwayne"
        |_ email: "john.w@mail.com"
        |_ id: "-MEIwCAwrPBePyp4mVv1"

We can use this key to find and target the particular user with specific child.

Formik is a great tool for creating efficient forms while firebase offers quick setup and authentication options, deployment is also easy to setup through github actions.

Thank you for reading!

Create a Private Docker Registry

Semir Teskeredzic — Sun, 06 Jun 2021 20:34:46 +0000

Dockerized applications and automated pipelines mean that you will eventually need a docker registry sooner or later.

What is a Docker Registry?

It is essentially a place where you store Docker images organized in repositories. You can push images to the remote Docker registry and pull images where you want them.

Docker Hub

Nifty service that Docker.com runs is Docker hub or a Docker Registry that has many things automated so you don't have to bother with configuring it on your own server (which we will get to in a bit).

Free tier is also fairly generous at Docker hub because it provides you with unlimited public repositories and one private repository. More private repositories are available in paid tiers and you can find pricing info here: Docker Pricing

Create your own private registry

If you want to house your Docker images on your own server, then you have to create a private registry or how the Docker documentation states it, deploy a registry server.

Prerequisites

Before deploying a private registry, you will need to have several prerequisites checked:

Server running Ubuntu (preferably latest Ubuntu 20.04) that is properly configured. You can read about it in the post here: Configure New Ubuntu Server
Docker & Docker-compose properly installed on the server that will host the Docker registry. You can read about it here: Install Docker & Docker-compose on Ubuntu server
Properly installed Nginx. You can read about it here: Install Nginx on Ubuntu server
Domain name that resolves to your host server (where you will host registries)
SSL Secured Nginx on your host server

Installing & Configuring

Since we have to run registry from a docker image there are two ways we will go through here,

Quick - running with docker command from the CLI
Using docker-compose - running with the yml file using docker-compose

Before going through each one, go on and create a few directories to keep the things organized:

$ mkdir docker-registry
$ cd ~/docker-registry
$ mkdir data

Quick

While in our docker-registry folder, we can run docker registry with just one line of code:

$ docker run -d -p 5000:5000 --restart=always --name registry registry:2

This will run our registry from the image registry in background mode with the usage of the port 5000.
This is a great first step just to see it working. However it is not secure enough or configured enough for production-based environments.
Go on and stop the running container by running this command:

$ docker container stop registry

Proceed with removing the container alltogether:

$ docker container rm -v registry

If we want to store data to our host server filesystem instead of relying on the data inside the docker volume, we could use this command:

docker run -d \
  -p 5000:5000 \
  --restart=always \
  --name registry \
  -v ~/docker-registry/data:/var/lib/registry \
  registry:2

Note: when writing a docker command in multiple lines just use backslash \ at the end of the line and press enter.

Using docker-compose

You can write entire configuration in one yml file and run it with docker-compose, this way you see the configuration more clearly and you are able to make modifications and see previous configurations.
While in your docker-registry directory, create and enter edit mode using nano:

$ nano docker-compose.yml

You can now enter following code to the file:

version: '3'

services:
  registry:
    image: registry:2
    restart: always
    ports:
    - "5000:5000"
    environment:
      REGISTRY_STORAGE_FILESYSTEM_ROOTDIRECTORY: /data
    volumes:
      - ./data:/data

You can already see that we are using same image, utilizing same port and using volume location ~/data in our filesystem.
You can exit and save using CTRL+X then Y and then ENTER
Run the docker-compose with:

$ docker-compose up

Now your docker registry is up and running.

Configure HTTP Authentication

We can put HTTP Authentication with the Nginx using username and password so the access to our server hosting registries is secured with those credentials.
First update local packages:

$ sudo apt update

Then install a package we will use:

$ sudo apt install apache2-utils -y

We will store our credentials in separate folder so go create one and enter it:

$ mkdir ~/docker-registry/auth
$ cd ~/docker-registry/auth

We will now enter following command and you replace username with the username you want it to be:

$ htpasswd -Bc registry.password username

You will be prompted for password so enter it as required. If we used a docker-compose file, we need to update it to include credentials. Open docker-compose file using nano:

$ nano ~/docker-registry/docker-compose.yml

Now alter existing docker-compose using following template:

version: '3'

services:
  registry:
    image: registry:2
    restart: always
    ports:
    - "5000:5000"
    environment:
      REGISTRY_AUTH: htpasswd
      REGISTRY_AUTH_HTPASSWD_REALM: Registry
      REGISTRY_AUTH_HTPASSWD_PATH: /auth/registry.password
      REGISTRY_STORAGE_FILESYSTEM_ROOTDIRECTORY: /data
    volumes:
      - ./auth:/auth
      - ./data:/data

Run your docker-compose:

$ docker-compose up

If you want to use inline CLI docker command use this:

docker run -d \
  -p 5000:5000 \
  --restart=always \
  --name registry \
  -e REGISTRY_AUTH=htpasswd \
  -e REGISTRY_AUTH_HTPASSWD_REALM=Registry \
  -e REGISTRY_AUTH_HTPASSWD_PATH=/auth/registry.password \
  -v ~/docker-registry/data:/var/lib/registry \
  registry:2

Secure your host server with SSL

In order for docker-registry to function properly you must have secured HTTPS connection and that requires that you install a certificate provided by Certificate Authority. There is a free SSL certificate provided by Let's Encrypt and you can do this with the help of certbot
Find the guide here: Certbot Ubuntu installation

Remember that you need to have a domain pointing to your host server IP address before being able to activate Let's encrypt.

Check firewall

Check the firewall status with the following command:

$ sudo ufw status

And make sure to allow all Nginx that includes HTTPS:

$ sudo ufw allow 'Nginx Full'

Nginx file Upload size

File upload size is set quite low for nginx when you freshly install and configure it. You need to increase that amount so you can push larger images to your docker registry. Open Nginx configuration:

$ sudo nano /etc/nginx/nginx.conf

Now edit the line that says client_max_body_size in the http section and set the value to 8000m which sets the maximum size to 8GB. Save changes and exit configuration.
After making any changes in Nginx configuration be sure to restart the Nginx:

$ sudo systemctl restart nginx

Congratulations! You now have a private docker registry that is password protected and HTTPS secured. You can push your own images there and pull it wherever you need them. Use docker commands to login to your docker-registry just as you would with Docker Hub, and use push and pull commands in the same way.

Thank you for reading.

Install Nginx on Ubuntu 20.04 Server

Semir Teskeredzic — Mon, 31 May 2021 13:28:12 +0000

Welcome to the short guide on how to install Nginx on your server running Ubuntu 20.04.

A bit about Nginx

So what is Nginx? As per nginx.com:

Nginx is open source software for web serving, reverse proxying, caching, load balancing, media streaming, and more. It started out as a web server designed for maximum performance and stability. In addition to its HTTP server capabilities, NGINX can also function as a proxy server for email (IMAP, POP3, and SMTP) and a reverse proxy and load balancer for HTTP, TCP, and UDP servers.

So in short, Nginx is a web server that has many capabilities in serving the content on server to the users.

Prerequisites

You have to check that the server you want to install Nginx on is properly configured before proceeding so you can install and configure Nginx without any future issues. You can read about it in the article here: Configure Ubuntu 20.04 Server

1 - Install Nginx

As always, it is a good practice to update local package index before installing new packages:

$ sudo apt update

Now you can proceed by installing Nginx

$ sudo apt install nginx

2 - Configure the firewall

Whether you have firewall enabled or disabled you should enable nginx service in the firewall configuration. Get the list of available application configurations by running following command:

$ sudo ufw app list

You should see the output similar to this:

Output
Available applications:
  Nginx Full
  Nginx HTTP
  Nginx HTTPS
  OpenSSH

Now, you can enable Nginx Full which will enable traffic through port :80 and :443 or you can choose one of them depending whether you require encrypted on unencrypted connection.
Go with HTTP if you are initially setting up nginx but you won't be adding SSL certificates, however if you are going to be adding a certificate later on, you can proceed with Nginx Full.
You enable option by running this command:

$ sudo ufw allow 'Nginx Full'

3 - Check if everything works

Run the following command for nginx service to see its status:

$ systemctl status nginx

This command will provide output where you will see whether the service is running or if it encountered an error and it needs troubleshooting.

You can check if the Nginx runs and if the firewall is allowing connections by typing your server's ip in the address bar of your internet browser. If you don't know your IP, you can find out by running this command:

$ curl -4 icanhazip.com

When you enter your server IP address in the browser you should be greeted by the Welcome to Nginx page. If you see that page, your server runs as it should.

4 - Manage Nginx

We have mentioned systemctl command earlier. You can use this command on any process in Ubuntu to query or send control commands to the system manager.

// Start (activate)
$ sudo systemctl start nginx

// Restart (Start or restart)
$ sudo systemctl restart nginx

// Stop (deactivate)
$ sudo systemctl stop nginx

// Reload (without losing connection)
$ sudo systemctl reload nginx

Additionally you can use enable and disable with systemctl to prevent the unit from starting automatically or to enable it to start at the boot.

5 - Server Blocks (Optional but recommended)

If you worked with Apache you are familiar with VirtualHost. Instead of VirtualHost, Nginx uses Server Blocks - it allows you to run more than one website on a single machine.

Ubuntu stores Nginx server blocks configuration files in /etc/nginx/sites-available directory which are enabled through symlinks (symbolic links) to the /etc/nginx/sites-enabled/

On Ubuntu 20.04 one server block is enabled by default and it serves files out of the /var/www/html directory. This configuration is okay if you are having a single site on one machine, however if you want to run multiple websites on a single machine you should create a different directory structure similar to /var/www/your_domain/html. After creating the directory, you have to assign ownership to the user, and give the owner permissions to read, write, and execute files:

$ sudo mkdir -p /var/www/your_domain/html
$ sudo chown -R $USER:$USER /var/www/your_domain/html
$ sudo chmod -R 755 /var/www/your_domain

You can now create a simple test html file inside the html directory. With nano command you can do it immediately:

$ nano /var/www/your_domain/html/index.html

Add the HTML code you want, you can keep it simple

<html>
  <body>
    <h1>Hello from the website!
    </h1>
  </body>
</html>

Save it by typing CTRL and X and then typing Y and then ENTER.
Now the Nginx will serve this html file after we create a server block in sites-available and symlink it to sites-enabled

This is basic blueprint for the server block that you will create by again running nano command:

$ sudo nano /etc/nginx/sites-available/your_domain

When file edit is open paste this (and don't forget to substitute your_domain with your actual domain)

server {
        listen 80;
        listen [::]:80;

        root /var/www/your_domain/html;
        index index.html index.htm index.nginx-debian.html;

        server_name your_domain www.your_domain;

        location / {
                try_files $uri $uri/ =404;
        }
}

Now we are creating a symlink:

$ sudo ln -s /etc/nginx/sites-available/your_domain /etc/nginx/sites-enabled/

Test to make sure there are no syntax errors in any of Nginx files:

$ sudo nginx -t

If everything checks out, restart Nginx:

$ sudo systemctl restart nginx

Congrats! You have successfully installed and configured Nginx on your Ubuntu 20.04 Server. Thank you for reading!

Docker & Docker-compose on Ubuntu 20.04 Server

Semir Teskeredzic — Thu, 27 May 2021 12:14:15 +0000

Docker is a powerful application that lets you run your applications in a contained environment so everything that happens is (more or less) isolated through the use of Containers. It is however different from Virtual machines, because it uses OS Kernel from the host machine while Virtual machines spin up their own. You can watch how Nana explains it in this video: Docker vs Virtual Machine | simply explained || Docker Tutorial 6

Prerequisite

As a prerequisite for installing and using Docker & Docker-compose on Ubuntu server you will need it initially configured and set up. I've made a post about initial configuration for Ubuntu 20.04 server, so you can read it here: Configure new Ubuntu 20.04 server

1 - Install Docker

Before installing any new package, it is recommended to update the list of packages:

$ sudo apt update

(you will need to enter your user account password because you are using sudo command for elevated privileges)

Then, you need to install a couple of packages that let apt use packages over HTTPS:

$ sudo apt install apt-transport-https ca-certificates curl software-properties-common

Next add GPG key for the Docker repository:

$ curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -

Continue by adding the Docker repository to your APT sources:

$ sudo add-apt-repository "deb [arch=amd64] https://download.docker.com/linux/ubuntu focal stable"

Repeat the update of the package database:

$ sudo apt update

Tell system that you will install Docker from Docker repository:

$ apt-cache policy docker-ce

After seeing the output with the information about candidate installation, go on with installing Docker:

$ sudo apt install docker-ce

Check that the Docker is running with this command:

$ sudo systemctl status docker

2 - Run Docker command without Sudo (Optional)

If you try to run docker command without sudo prefix or if the user is not in the docker group you will get the message that the docker can't connect to the Docker daemon. In order to fix this, you will need to add your username to the docker group (you will use this exact command if you want to add the user that you are currently logged in with, if you want to add another user, replace ${USER} with desired username):

$ sudo usermod -aG docker ${USER}

To apply the new membership you should log out of the server and log back in.
If you want to check whether the user is in the docker group use:

$ id -nG

3 - Docker images & Containers

Now that the Docker is installed, you can run docker command, the syntax is:

$ docker [option] [command] [arguments]

Containers are built from Docker images, by default Docker pulls those images from the Docker Hub (i.e. a registry for the Docker images).
When you want to access an image you simply run this command:

$ docker run postgres

This command will first try to find image locally, if it doesn't it will pull the image from the Docker hub and create a container from the pulled image.

You can search available images with browser on Docker Hub: https://hub.docker.com/search?q=&type=image, or you can use CLI command:

$ docker search postgres

When you want to run a Docker container it is a good idea to have shell access to the container. You enable this kind of access with -i and -t switches:

$ docker run -it postgres

Now you can work inside the container and for example run installation of packages for that container only.

If you want to see running Docker containers you can use this command:

$ docker ps

Additionally use -a switch to see active and inactive containers

For troubleshooting purposes, you can see logs for the container by copying CONTAINER ID obtained after docker ps and running this command:

$ docker logs [CONTAINER_ID]

4 - Docker-compose

Before installing Docker-compose we will have to check what is the latest version, you can do that on the Release page.

At the moment of writing this post, the latest release is 1.29.2 so we will use following commands to install this release (for different release enter a different release number in the following command):

$ sudo curl -L "https://github.com/docker/compose/releases/download/1.29.2/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose

Set permissions:

$ sudo chmod +x /usr/local/bin/docker-compose

To verify the installation run:

$ docker-compose --version

We use docker-compose with docker-compose.yml files, in there we can define multiple services with corresponding images and configurations. We execute Docker compose with the up command (if you want to run in detached mode add -d switch which will run it in the background):

$ docker-compose up -d

You have to execute this command inside the directory of your docker-compose.yml file. Similar to docker commands, running:

$ docker-compose ps

will show you information about the running containers and their state together with port redirections.

This concludes basic installation and use of Docker and Docker-compose on your Ubuntu server. Thank you for reading!

Configure new Ubuntu 20.04 Server

Semir Teskeredzic — Tue, 25 May 2021 08:04:36 +0000

Probably all server related work will require you to have properly configured server as a prerequisite. Servers that run Ubuntu are widely used so I will go through several necessary steps needed when you spin up new Ubuntu server.

First you will need to have a root access, whether through Password login or using previously configured SSH key.

1 - Log in

In order to do any kind of operations on the server, you will have to log in using SSH tunnel which is basically an encrypted SSH connection with the remote host. You will need to know your server's public ip address so you could use this command in your terminal:

$ ssh root@server_public_ip

If you are using password authentication, enter your root password in the prompt (in terminal passwords don't appear while you type so just press enter after you are done because it is there even if it seems that it is not).
If you are using SSH key authentication, the server will log you in automatically if everything is ok (if you entered a passphrase for your SSH key while creating it, you will have to enter it again here).

Since the root user has literally all the privileges, it is not a wise idea from a security and usability perspective to use it as a main user on a day-to-day basis. This is why we will create a new user that will have many administrative privileges that enable you to perform tasks while reducing the security or accidental issues.

2 - New non Root User

You will have to perform these steps while you are logged in as root user. Creating user is simple with a adduser command, we will create a new user named jenny:

# adduser jenny

You will be asked to enter additional information including account password, use a strong one and fill in other prompts as you prefer (or just skip them by pressing enter).

3 - Jenny becomes Administrator

Currently, Jenny is a regular user on our server and that means that it is quite limited in terms of Server administration. We need to give Jenny privileges so she can install, update, and manage packages, access restricted files etc. We will add Jenny to sudo group, this means that Jenny will be able to use sudo command whenever elevated privileges are required. While still logged in as a root enter a following command:

# usermod -aG sudo jenny

4 - Set up a basic firewall (Optional)

If you require restricted access to certain services on your server, you can use UFW firewall to manage that access. You will have to set up access for each service upon installation so it can be accessed. Now, we will set up OpenSSH as allowed in our firewall (OpenSSH is the service we are currently using in order to access our server).
Use this command to see which services have their profile registered with UFW:

# ufw app list

Output:

Available applications:
  OpenSSH

In order to tell the firewall to allow SSH connections, we use allow command:

# ufw allow OpenSSH

After we allowed OpenSSH, we can enable the firewall by using enable command:

# ufw enable

When prompted, enter y to finish enabling the firewall. You can see the current status with the following command:

# ufw status

5 - Configure external access for the new user

You can now log out from root account and log in with your newly created account. Type exit to close the SSH connection with the remote host. Depending on the type of authentication root user uses, you will configure the external access differently.

Root account uses password authentication

This means that the password authentication is enabled so you can simply ssh to your remote server by using following command:

$ ssh jenny@server_public_ip

You will be prompted for password after which you will be logged in as a new user. For any action that requires elevated privileges you will use sudo command before the desired action. This will again prompt you for the user password so you can type it in and press enter.

$ sudo command

Root account uses SSH key authentication

When root user uses SSH key authentication it means that the password authentication is disabled. We have to make a copy of local public key (which is already in the root account's file on server) to the new user's authorized_keys file.

Make sure you are logged in as root user to perform this action.

We will use rsync command to copy the files while maintaining proper permissions and ownership.

boldImportant:bold
When you use rsync you need to make sure that the source directory ~/.ssh boldis not*bold* with trailing slash.

# rsync --archive --chown=jenny:jenny ~/.ssh /home/jenny

6 - Server is configured

Congrats! You have initially configured your server and now you can continue with installing services you need to make it work.

Thank you for reading.