DEV Community: Gökay Okyay

Build your own React CI in 5 minutes!

Gökay Okyay — Fri, 07 May 2021 23:11:22 +0000

Hey everyone! This post is part of Introduction to StewardX series.

In this tutorial, I'll show you how can you build your own CI, super easy.

All you need is:

StewardX
A Linux server (preferably with sudo access)
Docker
NodeJS - for building React of course 😊

My server's OS is Debian flavored (Ubuntu) but you should be able to find the installation commands of the packages for your own distribution just by a quick search, if not please leave a comment so I can help you. Okay here we go!

Install Nginx

Pretty straightforward. Just run the command below if Nginx is not installed on your server:

$ sudo apt update
$ sudo apt install nginx

Now you should be able to access your server via http, just navigate to

http://yourserverip

And you'll be presented Nginx's default welcome page. If not, you please check if your ports are not blocked and nginx is installed correctly. You can follow the amazing tutorial by DigitalOcean to configure ports for nginx.

Note: I'm not affiliated with DO in any manners, I just like their tutorials.

Once you got Nginx working proceed to the next step:

Configuring Nginx to serve your React app

Now, for more detailed explanation you can follow this tutorial on DigitalOcean. But I'll be demonstrating how you can configure it here too.

To keep it simple and fast, I won't be demonstrating the server blocks but in production you should use them! For now, I'm just going to use the default one.

Open /etc/nginx/sites-enabled/default with your favorite editor.

$ sudo nano /etc/nginx/sites-enabled/default

If you scroll down, you'll see this specific line:

root /var/www/html;

Okay this line means that Nginx will serve the files it found in that specific directory. So we'll move our built files there. If you want, you can change the directory I won't be changing it for this tutorial. Moving on!

Building our React app

I'll be using the documentation repository of StewardX for demonstration purposes. It's a React app too 😊

$ cd
$ git clone https://github.com/gokayokyay/stewardx-docs
$ cd stewardx-docs
$ npm install # or yarn

Okay now I can build my app

$ npm run build # or yarn build

You'll see a build folder has been created. Great!

Installing and Running StewardX

Head over to releases page of StewardX and download the latest binary, it'll have a name like: stewardx_${version}_${os}_${arch}. At the time of writing, the latest binary is named: stewardx_v0.1.2_linux_x64. I suggest that you download it to a directory. I'll be creating a new one:

$ cd
$ mkdir stewardx
$ cd stewardx
$ wget https://github.com/gokayokyay/stewardx/releases/download/v0.1.2/stewardx_v0.1.2_linux_x64 -O stewardx
$ chmod +x stewardx

Since it's not even in beta, you might have to build it from source, to do it please follow this link: Building it from source.

Now, you'll need to have a PostgreSQL instance running to start StewardX. You can get a free one or start your own by running:

docker run --rm -P -p 127.0.0.1:5432:5432 -v "$HOME/postgres-data:/var/lib/postgresql/data" -e POSTGRES_PASSWORD="1234" --name pg postgres:alpine

NOTE: DON'T USE THIS COMMAND FOR PRODUCTION, PLEASE! IT'S PASSWORD IS 1234 😭

You'll need your database URL. If you run the command above, then it is:

postgresql://postgres:1234@localhost:5432/postgres

Now run this command while you're still at the same directory with stewardx.

STEWARDX_DATABASE_URL=postgresql://postgres:1234@localhost:5432/postgres ./stewardx

If you see no output, then it means it's working! 😊

Creating the build script

I'll create a new a directory for the script

$ cd
$ mkdir ci-scripts
$ cd ci-scripts
$ touch react-ci.sh
$ chmod +x react-ci.sh

Now open the script with your favorite editor and paste the following:

#!/bin/bash
PROJECT_DIR_NAME=stewardx-docs
PROJECT_GIT_URL=https://github.com/gokayokyay/stewardx-docs
PROJECT_PARENT=$HOME/
DEPLOY_DIR=/var/www/html/

We've just defined the variables here, moving on:

...
cd $PROJECT_PARENT
if [ -d "$PROJECT_PARENT/$PROJECT_DIR_NAME" ] 
then
    echo "Directory ${PROJECT_DIR_NAME} exists. Skipping git clone..." 
    cd $PROJECT_DIR_NAME
    git stash
    git pull
else
    echo "Directory ${PROJECT_DIR_NAME} doesn't exists, cloning it..."
    git clone $PROJECT_GIT_URL
    cd $PROJECT_DIR_NAME
fi

We pull the latest changes if available. Time to build it

...
echo "Cleaning node_modules for a fresh start!"
rm -rf node_modules
echo "Installing the modules..."
npm install

Documentation repository don't have any tests, so I'm skipping test command:

...
echo "Now building it, this can take a while"
npm run build
echo "Cleaning old files in serve directory"
rm -rf $DEPLOY_DIR/*
echo "Okay, now moving the artifacts into the serve directory."
mv build/* $DEPLOY_DIR
echo "Done."

And save it.

Issue this command:

$ pwd

and save it's output for the next step.

Now to test our script, just run

./react-ci.sh

Go check your website http://yourserverip if it works, now it's time to

Create a webhook

Get the output of pwd command from previous step. To add a webhook to StewardX we can either use it's panel (needs to be built) or just send a request to it by any web client, I'll be using curl:

curl --header "Content-Type: application/json" -X POST --data '{"task_name": "React app CI", "frequency": "Hook", "task_type": "CmdTask", "task_props": {"command":"/bin/bash #pwd_output#"}}' http://localhost:3000/tasks

Change #pwd_output# with the output you saved from previous step mine was: /root/ci-scripts/react-ci.sh (yup used root, I like danger)

This command will output an id, save it for the last step:

Using the webhook from GitHub

Now, it is time to add the webhook to the GitHub. Navigate to your project's repository, and click settings.

Navigate to Webhooks section from the left panel. Click Add webhook button found on the top of the page. When the page opens up, you'll want to fill the Payload URL with yourserversurl:STEWARDX_PORT/execute/id_of_your_task, so it'll look something like http://mydomain.com:3000/execute/c99ff533-d3c2-4ee3-9b8f-a972a9db00db.

And congratulations! You've created your own CI!

For more information and documentation of StewardX, please visit https://stewardx.dev.

I really appreciate if you leave a feedback 😊 Stay safe!

Introducing StewardX - Your automation buddy!

Gökay Okyay — Wed, 05 May 2021 22:45:18 +0000

Hey everyone! Long time no see.

A little history

I was not active for couple of months but it was for a good cause. I've been learning Rust, and honestly, I fell in love with it! It's kinda low level but still gives one of the highest developer experiences while writing it.

Several months ago I've decided to create a useful side project - a dynamic price checker that supports multiple websites. But it didn't happen because I couldn't find the right tools I needed. That's why I've build StewardX!

Introduction

So what is StewardX?

StewardX is actually an acronym! It stands for Scheduled Task Executor With Asynchronous Runtime and Database and an X on the end. It is a scheduled task executor. Think of cron but with a database. Being written in Rust, gives us a compiled, lightweight single file executable.

Features

It stores the outputs of tasks
It can run tasks periodically
It can be triggered to run tasks
It supports both Dockerfile and Docker image (prebuilt)
It supports command tasks (like echo "Hey")
It serializes and saves tasks in Database (Currently only PostgreSQL).
Got a buggy and cute control panel 😛

I'd like to point out the last item, it stores tasks in database! Means that, it's portable 😁

Task types

StewardX currently supports two task

Docker - As I said, it supports both dockerfiles and docker images
Command

But it can be easily extended, thanks to Rust's trait system. In fact, I'll be writing tutorials to explain how to add a new task type.

Frequency

Currently, there are two frequency types:

Hook - which is basically a webhook
Cron - with seconds support

I'll be writing more tutorials and guides about StewardX, but in the mean time, feel free to checkout the repository and the documentation.

See you!

How to use Popper with Svelte, in a Sveltish way, with Actions!

Gökay Okyay — Tue, 10 Nov 2020 18:15:05 +0000

What is Popper?

Popper identifies itself as a TOOLTIP & POPOVER POSITIONING ENGINE. It basically helps your popovers and tooltips position properly. Popper is awesome and used by millions and giants (according to their website) such as Microsoft, Atlassian, GitLab, etc. And I use it at work and while working on my side projects.

Okay, but with Svelte we can use any tools or libraries without an extra work or binding

Yes but it doesn't mean that we can't improve our codebase.

Yep, you're right, so how to use it?

First, I want to show you how you can use it without Sveltish way. Let's create a new Svelte project with:

npx degit sveltejs/template my-svelte-project
cd sveltishpopper
npm i

Then install Popper

npm i @popperjs/core

Then open src/App.svelte with your favorite editor, and delete everything.

Create a file named Modal.svelte, then paste following:

<style>
  #modal {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40vh;
    width: 20vw;
    flex-direction: column;
    background-color: wheat;
    border-radius: 1em;
  }
  #modal > img {
    margin-top: 3em;
  }
</style>
<div id="modal">
  Hello Popper!
  <img src="https://popper.js.org/static/popper-logo-394b4ea5914aad7fc580f418ed0cfb17.svg" alt="Popper logo">
</div>

It's just a basic modal with a background color.

Now open App.svelte and paste

<script>
    import { onMount } from 'svelte';
    import { createPopper } from '@popperjs/core/dist/esm';
    import Modal from './Modal.svelte';
    let popButton, modal, isModalActive = false;
    const toggleModal = () => {
        isModalActive = !isModalActive;
    };
    onMount(() => {
        createPopper(popButton, modal);
    });
</script>

<button bind:this={popButton} on:click={toggleModal}>
    Pop it
</button>
{#if isModalActive}
    <Modal bind:this={modal} />
{/if}

In the code above, nothing really challenging goes on
And congratz! You got yourself a functioning modal with awesome positioning.

This implementation is really simple but everytime you want to use a modal with popper, you need to repeat this implementation. How can we improve?

Action!

Now create a file named, actually it doesn't really matter because this isn't really a project but let's call it, PopperAction.js.

And paste following:

import { createPopper } from '@popperjs/core/dist/esm';

export function popover(node, { component, ...props }) {
  const button = node;
  let popperInstance, componentInstance, renderedComponent, isActive = false;
  const id = 'modal';

  const toggle = e => {
    e.stopPropagation()
    isActive ? hide() : show();
  };

  button.addEventListener('click', toggle);

  const detectClickOutside = event => {
    if (renderedComponent && !renderedComponent.contains(event.target) && isActive) {
      hide();
    }
  };

  const show = () => {
    componentInstance = new component({
      target: document.body,
      props
    });
    isActive = true;
    renderedComponent = document.querySelector(`#${id}`);

    popperInstance = createPopper(button, renderedComponent, {
      modifiers: [
        {
          name: 'offset',
          options: {
            offset: [0, 8]
          }
        }
      ]
    });

    document.addEventListener('click', detectClickOutside);
  };

  const hide = () => {
    renderedComponent = document.querySelector(`#${id}`);
    isActive = false;
    if (popperInstance) {
      popperInstance.destroy();
      popperInstance = null;
    }
    componentInstance.$destroy();
    document.removeEventListener('click', detectClickOutside);
  }

  return {
    destroy() {
      button.removeEventListener('click', toggle);
      document.removeEventListener('click', detectClickOutside);
    }
  }
}

Okay, what the heck??

This implementation is more confusing but let me explain what's happening down there. (You can skip if you understood what it does.)

So, we are defining a function that takes, a node and some props. We add a click event listener to the node (in this case its a button) and we bind it to a toggle function, which toggles the modal (eh?).

Show function is creating a popper instance every time we click to the button, and hide is hiding the modal and destroying the popper instance. You can figure out the optimizations yourselves, I'm in a rush!

As a bonus I ended up adding a click outside handler which detects clicks that are outside of the modal.

We return an object from the action.

  return {
    destroy() {
      button.removeEventListener('click', toggle);
      document.removeEventListener('click', detectClickOutside);
    }
  }

It has a special method named destroy, it's duty is to clean up effects ( :) ).

Hmm, seems legit, but how to use it?

That's the awesome part. Get ready to shocked in 3, 2, 1...

<script>
    import { popover } from './PopperAction.js';
    import Modal from './Modal.svelte'; 
</script>

<button use:popover={{ component: Modal }}>
    Pop it
</button>

Look how beautiful it is. 😢

Okay this is it. Have a nice day.

^{PS, checkout official svelte package of popper}

Managing VSCode Profiles for the Polyglot Developers

Gökay Okyay — Sun, 07 Jun 2020 11:06:58 +0000

Image credit: https://programmerhumour.tumblr.com/post/187131622245/javascript-mocking-joke-645342

If you use multiple programming languages in your daily life, you probably need numerous extensions which target specific programming languages.

I use Go, Node.js, Python (sometimes), Rust and since one month, Deno. I need ESLint for Node, Go Extension for Golang, RLS for Rust and so on.

My laptop is 10 years old and it's getting slower every day so as my vscode profile. It is bloated with extensions. Think of getting minimum 3 extensions for every language you write! So what's the solution? If you don't like to hack stuff like I do, search for an extension that can help with this issue (look at the irony here). But if you're like me, the solution is VSCode Profiles!

Note: Some steps are taken from https://dev.to/jsjoeio/how-to-create-code-profiles-in-vscode-3ofo - Check out this amazing post too!

First, create the root of profiles directory by pasting following line to your terminal

cd $HOME && mkdir code-profiles && cd code-profiles

You've probably know what the above line does but here's the explanation for those who don't: It navigates to your home directory (of your current terminal user) and creates a directory then it navigates into it.

Second, prepare the profile directory for the language you'll work with

It can be anything, I can't force you to work with a specific language or a tool 😄, but as an example I'll go with Deno.

mkdir deno
cd deno
mkdir data extensions

(Optional) Copy your settings file

If you want to keep your current settings, open settings.json in VSCode and copy your settings. Then while in the deno directory we've just created:

cd data
mkdir User
nano settings.json

And paste the content of settings.json.

Making our lives easier, adding an alias!

Actually this step is optional too but I strongly recomment it or you'll have to write two paths and two flags each time you want to open your profile.

cd $HOME
# I'll open my bashrc file because I'm using linux with bash but other shells are similar too
nano .bashrc

And at the end of the file add this:

alias code-deno="code --user-data-dir ~/code-profiles/deno/data/ --extensions-dir ~/code-profiles/deno/extensions/"

Save and close it.

Then restart your terminal or source your bashrc file:

source .bashrc

Voila!

code-deno

You now have a vscode profile for Deno with extensions specific to it! When you want to code with another PL just repeat the same steps for that language, and you'll have a fresh VSCode without bloated with extensions!

References

How to Create Code Profiles in VSCode
Managing Extensions in Visual Studio Code

RemoteCareer 🦁 - Job board that helps nature and animals

Gökay Okyay — Fri, 24 Jan 2020 21:37:05 +0000

Remote Career
Client repo: Remote-Career-Client
Server repo: Remote-Career-Server

How does it help nature and animals?

Well, since this is the beginning, it doesn't. But the main idea of this app is to donate 90% of every sale to WORLDWIDE animal charities. 10% is for the future DB/server/domain costs.

Story of the app

As a new grad I was looking for remote jobs, came across few job boards then something got my attention. The price to post a job was in three digits! It seemed too high for me then I thought - like every jealous developer - "I can create this web app too.". But it's a side project for me so I want it to be useful for everyone.

I've learned React three years ago, so it was an opportunity to refresh my knowledge and learn new tools (like Next.js). For the backend I went to this repo and picked a Node framework, and it was something called Restana but somehow it lost its rank now. But it's the framework I chose, it's somehow an Express.js alternative.

The Stack

credits to: here

Frontend

React
Next.js
Material-ui
Redux
Zeit's Now for deployment

Backend

Restana
Redis - for ip blocking
Nodemailer with Mailgun
MongoDB
Mongoose
IBM Cloud Storage as file service
Pino for logging
Heroku for deployment

Process of developing

So I thought there will be three main pages of the app, Home page where posted jobs are shown, Job Page where people can read the description and requirements, and finally Post a Job page where companies can post their job openings.

Then I designed these pages with Figma. I wanted a very simple design, because I'm not a designer.

Homepage

I wanted a hero component, a navigation bar and job listing section for the home page.

Post a job

For the posting page I wanted it to be reactive, I want the job card to be updated as you change fields.

Job

This page needed to be simple and template-like.

Other pages

When these pages were finished, I needed some other pages like Editing page, Admin page etc...

But for the MVP I omitted Admin page functionalities.

Thoughts about tools

Next.js

Very useful tool. Improves performance a lot and SSR by default. But in my opinions, ecosystem can be improved. Adding material-ui was a total pain so I started with official example.

Now by Zeit

Another very useful tool by Zeit. It's amazing. Deploys automatically with every commit to master branch. The only con of this tool is DNS settings. It should be able to be configurable within the web app, not only from the cli.

Final words

I want this app to be ours, people who want to help animals/nature. So that I made this app open source available here and here. Feel free to contribute 💚💚.

It would be awesome if hiring companies post their job offer at this website, and it's free until I found someone to be funding manager of the project 😋.

Btw, don't forget to checkout the first job offer here.

Feel free to contact with email: gokayokyay@hotmail.com

5 Minutes Tutorial Series - NodeJS upload files to Minio

Gökay Okyay — Wed, 01 Jan 2020 18:52:27 +0000

Hello everyone, I am starting a new series called "5 Minutes Tutorial Series". In this tutorial, I'll show how can you upload a file to a Node server and then upload it to Minio Object Storage. Since it is about Minio, I'm assuming that you know what it is, but if you don't click here to learn more.

We'll be using fastify as our server framework. If you're using express, you can find an awesome post by thepolygotdeveloper here. Let's begin!

# create new project
mkdir fastify-minio
cd fastify-minio

# initialize npm project
npm init -y

# install fastify, fastify-file-upload, minio
npm i fastify fastify-file-upload minio

Create a file named index.js then add following code.

const fastify = require('fastify');
const app = fastify();
app.register(require('fastify-file-upload'));

app.post('/upload', function(req, res) {
    const files = req.raw.files;
    res.send(files);
});

app.listen(3000, err => {
    if (err) {
        throw err;
    }
    console.log('App is listening on port 3000!');
});

Here we have a very basic fastify server. Next create a file named minioClient.js with the following code.

const Minio = require('minio');

const minioClient = new Minio.Client({
    endPoint: 'play.minio.io',
    port: 9000,
    secure: true,
    accessKey: 'Q3AM3UQ867SPQQA43P2F',
    secretKey: 'zuf+tfteSlswRu7BJ86wekitnifILbZam1KYY3TG'
});

module.exports = minioClient;

We're using minio's playground but feel free to change the configuration as you wish. Next we'll modify our index.js code to:

const fastify = require('fastify');
const app = fastify();
// ->CHANGED
const minioClient = require('./minioClient');
// CHANGED<-
app.register(require('fastify-file-upload'));

app.post('/upload', function(req, res) {
    const files = req.raw.files;
    // ->CHANGED
    minioClient.putObject("test", files.image.name, files.image.data, function(error, etag) {
        if(error) {
            return console.log(error);
        }
        res.send(`https://play.minio.io:9000/test/${files.image.name}`);
    });
    // CHANGED<-
});

app.listen(3000, err => {
    if (err) {
        throw err;
    }
    console.log('App is listening on port 3000!');
});

You can see what's changed by looking at //CHANGED code blocks. But I want you to focus on minioClient part. We put object to a bucket named "test" with filename and data buffer. By the way notice the files.image part, in this case the file's key is "image". And the file's url is MINIO_ENDPOINT:MINIO_PORT/BUCKET_NAME/FILE_NAME. Since minio uses a technique called "presigned url" the file won't be accessible from that url. But we can change it by changing bucket policy. Here's the policy I use:

{ 
    "Version":"2012-10-17",
    "Statement":[
       {
          "Effect":"Allow",
          "Principal":{
             "AWS":[
                "*"
             ]
          },
          "Action":[
             "s3:GetBucketLocation",
             "s3:ListBucket"
          ],
          "Resource":[
             "arn:aws:s3:::bucket"
          ]
       },
       {
          "Effect":"Allow",
          "Principal":{
             "AWS":[
                "*"
             ]
          },
          "Action":[
             "s3:GetObject"
          ],
          "Resource":[
             "arn:aws:s3:::bucket/*"
          ]
       }
    ]
 }

When you apply this policy via "setBucketPolicy" method of client, the files in the bucket will be accessible publicly and the url will be available permanently. You can see the method's docs here.

Last thing, it can be problematic to use files' original names. I suggest trying some package like uuid to prevent it.

Okay it's been 5 minutes already, see you in another tutorial!

API Authentication Workflow with JWT and Refresh Tokens

Gökay Okyay — Tue, 03 Dec 2019 21:10:16 +0000

Hey everyone, this is my first post so go easy on me :P

So I want this post to help anyone who wants to build an authentication system. I'm sharing a workflow, not the implementation, so that you can change the implementation in the way of your needs.

I'll add some scenarios throughout the post and will move on to server-side and lastly client-side. I'll assume that you already have a registration system.

Scenario Part 1

User registered. Okay, then we need to send a jwt and a refresh token. So server creates it and sends them back to the user, user's browser saves tokens then our cute little user is free to roam around in our app. So what happened actually?

Server-Side

Client registered
Created a short-lived JWT and a refresh token for the specified user
Save the refresh token in a DB, it can be a Key-Value DB like Redis.
Send JWT back to client, and add the refresh token to client's Cookie Storage with HttpOnly and Secure flags.

You can set cookie in node like this:

response.setHeader('Set-Cookie', 'foo=bar; HttpOnly');

Client-Side

Hit server's registration endpoint.
Save JWT to localStorage.

As a note: Local storage is vulnerable to XSS attacks so becareful :)

Okay that wasn't that much. But a couple of questions can be arised with our little note. Here's the most specific one: Why did we save JWT to localStorage if it is vulnerable?

The Answer

We have saved JWT to client's local storage because you might have noticed, our JWT is short-lived, say 30 minutes. This way we can add JWT to Authorization header of our API requests. (The bearer thingy)

And then we have created another token called refresh token, this can anything, your pet's name reversed with a counter or some random numbers... anything! I prefer a node package called "uuid". We saved the refresh token to client's cookie storage with httponly and secure flags. This means that this particular cookie won't be accessible by javascript. And the secure flag is about https, you can understand what it does :P

This way when user hits our API, our server can validate the JWT and refresh token of the user.

Scenario Part 2

User never gets bored in our app! He constantly refreshes the feed and wait for new things, but guess what our little user? 30 minutes have passed already! So your JWT is EXPIRED. Now what?

This time I'll explain it like a sequence diagram.

Client-Side

User makes an API request with expired JWT.

Server-side

API request is received, check the JWT and refresh token. BOOM JWT is expired, send unauthorized response to client (401).

Client-Side

Received unauthorized response from the previous API request.
Hit refresh endpoint of the API.

Server-side

Received the expired JWT checked it and refresh token is assigned to current user. Now refresh the JWT and send it back to user.

Client-side

Received JWT, saved it to the localStorage again.
Repeat the failed API request.
Continue to operate.

In node's jsonwebtoken package, there's an option while verifying the jwt. It is ignoreExpiration. You can check if the token is modified.

Scenario Part 3

So our user is sleepy, he wants to logout. But it's not that he got bored, he just wants to sleep :). He clicked the logout button. What happens now?

Client-Side

Clear the localStorage or just remove the jwt.
Make an API logout request.

Server-Side

Received logout request. Delete refresh token from the DB (like redis :P)
Set refresh token cookie's expiration date to any date in past.

Poof our user is logged out.

Such a long post for the first time eh? I might add more information if posts can be edited :P.

Important note: Mobile authentication should be different than this. I will share a post about it in future.

See you in another post!