DEV Community: Max Kostinevich

Show Dev.to: I just open-sourced Graindashboard - responsive web-application UI kit built on Bootstrap 4

Max Kostinevich — Wed, 22 Jan 2020 20:39:42 +0000

Hello there!

I'm super happy to share Graindashboard - responsive web-application UI kit built on Bootstrap 4.

Online demo is available here

Project link on the Github: https://github.com/maxkostinevich/Graindashboard

How to add Social Proof widget to Shopify

Max Kostinevich — Wed, 22 Jan 2020 18:05:10 +0000

In this article I'll show you how to create and add a simple Social Proof / FOMO widget to Shopify store. Instead of using 3rd-party applications, we'll pull the list or recently purchased items using really simple serverless function which we'll host on Cloudflare Workers at no cost.

So, what the Social Proof / FOMO widget is?

I'm pretty sure, you saw these widgets a lot of times on different ecommerce stores.

The purpose of such kind of widgets is to increase conversion rate, credibility and trust. There is a lot of widgets on the market, their functionality and design is pretty similar to each other, and they are pretty expensive (especially if you're just starting your online store).

So, let's make our own Social Proof widget in three simple steps.

Step #1 - Create a new private Shopify App

First, we need to create a private Shopify App which allow us to access our store's data via API. To do this, login to your Shopify Admin Dashboard, and go to Apps → Manage private apps → Create a new private app, fill-in all required fields (such as app name and your email address), and make sure the app is allowed to read Orders information:

After you save the app, you can grab your app credentials (you'll need these credentials in the next step), as shown on the screenshot below:

Step #2 - Create a new Cloudflare Worker

So, what the Cloudflare Worker is? In short, Cloudflare Worker - is a container, which allow you to run a serverless function written in Node.js. "Serverless" means that you do not need to have a server for this function, or even think about configuration of the container - everything is done by Cloudflare for you.

If you haven't worked with Cloudflare before, you need to signup at Cloudflare.com and go to Workers directory.

Then, create a new worker with the following source code:

And then enter app credentials you created in previous step:

So, what this function does? This function executes each time it receives a GET request, and reads latest 50 orders from your store. As we do not want to expose private order information (such as customer email and other sensitive information), we return filtered data, which includes customer first name, customer city and purchased item. This data will be used by the widget itself.

Step #3 - Add widget to your Shopify Theme

Once you created a Cloudflare Worker, you need to login to your Shopify Admin Dashboard and go to Online Store → Themes → Edit code of the current theme and create a new widget.js file inside of /assets/ directory with the following content:

And then, you need to add the following code before closing </body> tag in theme.liquid file:

Do not forget to replace the URL with actual URL of your Cloudflare Worker. If you did everything right, you should see something like this on your Shopify store:

The source code is available on Github Gist and on Codesandbox.

You may take a look at live demo here.

A few notes:

For demo purposes I haven't added product images and links to the products to this widget, as this information is not included to Order payload, so it will require additional API request on our serverless function to get all this information.
I also haven't included a real time of the purchase, as new orders will be rarely added to the demo store.

This post was originally published on my website.

How to use Docker for development on local machine

Max Kostinevich — Fri, 03 Jan 2020 17:03:28 +0000

I've used Vagrant and Homestead for local development for last several years, and recently switched to Docker. And I'm super-happy with my current setup, as Docker containers are much easier to setup, and they consume less resources than Vagrant.

If you're wondering how to start using Docker in local development and quickly run Laravel application in Docker container, watch my video tutorial:

A few notes:

This Docker template is adopted for Laravel/PHP apps, however feel free to customize it to fit your own needs;
This Docker template is used only for development on local machine;
You may get Laravel Docker Template on Github;
I still use classic VPS/non-dockerized environment on production;

I hope you found this tutorial useful! Any questions or feedback is much appreciated!

How to deploy Serverless applications using Github Actions

Max Kostinevich — Thu, 02 Jan 2020 00:35:53 +0000

In this article I'll show you how to deploy Serverless applications using Github Actions. Github Actions allow you to test, build and deploy your applications in easy way.

Why Github Actions?

Previously I worked a lot with Laravel Framework and used Envoyer for all my deployments. I wanted to find a similar tool for Serverless Framework, so I made a list of important features I'd like to see in a deployment tool:

Easy to use;
Not too expensive;
Ability to setup for client's projects;
Ability to manage environment variables (like passwords and secret api keys);
Should work with Github;
Flexible configuration;

I've tested a number of tools and decided to go with Github Actions for the following reasons:

Its provided by Github;
Its completely free;
Its pretty flexible;
I can easily configure custom steps for each project using YAML configuration file;
Github provides a secure way to store environment variables;

So, how deployment process looks like?

In most cases deployment of Serverless application consists of number of steps:

Checkout a repository.
Configure container (install Node, NPM, Serverless Framework, etc).
Connect serverless to provider (AWS/Azure/Cloudflare/etc).
Create environment file with all our secret variables.
Install NPM Dependencies.
Deploy application.
Optional - Build and deploy frontend assets to S3.

Just for example, let's setup automatic deployment to development environment on push to master and deployment to production on version tag release (e.g. v1.0.0, v1.2.0, etc).

Let's do some demo

For demo purposes we'll be using a Node.js application hosted on AWS. You may easily adopt the workflow to work with other languages and service providers.

Demo application

First, let's create a simple application using Serverless framework using the following command:

serverless create --template aws-nodejs

Then let's create a env.yml file to store secret variables. This file should never be pushed to our git repository as it contains private api keys and other sensitive information. However, it's a good idea to store in git repository a copy of env file (e.g. sample.env.yml) with some placeholder data, so it will be easier to create an actual env.yml file.

In our case, let's store appName value in our env.yml file:

prod:
    appName: "Serverless App"

default:
    appName: "DEV Serverless App"

As you can see, for each application environment we'll be using different values. So when application will be deployed to production, the app name will be "Serverless App", and when application will be deployed to development environment, the app name will be "DEV Serverless App".

Then, let's modify our serverless.yml file:

service: gh-actions-demo

custom:
    defaultStage: dev
    environment: ${file(env.yml):${self:provider.stage}, file(env.yml):default}

provider:
    name: aws
    runtime: nodejs10.x
    stage: ${opt:stage, self:custom.defaultStage}
    environment:
      appName: ${self:custom.environment.appName}


functions:
    index:
      handler: handler.index
      events:
        - http:
            path: /
             method: get

A few notes regarding the file above:

In custom section we define default stage which will be used on application deployment, and loaded variables from env.yml file depending on application stage.

In provider section we added a stage key (if no stage is passed via command line - default stage from custom section will be used by default). And created appName environment variable, so we'll be able to use it in our Lambda functions. The value of that variable is defined in our env.yml file and passed from custom section.

And finally, we defined index function in handler.js with the following content:

    'use strict';

    module.exports.index = async event => {
      let html = `
        <h1>Welcome to ${process.env.appName}</h1>
        <p>Stage: ${event.requestContext.stage}</p>`;

      return {
        statusCode: 200,
        headers: {
            'Content-Type': 'text/html',
        },
        body: html
      };

    };

As you can see, this function outputs simple text. When deployed to production it will show "Welcome to Serverless App. Stage: prod" and when deployed to dev it will show "Welcome to DEV Serverless App. Stage: dev".

Create Github Actions

There are few ways to create Github Actions: you may go to your Github Repository, click Actions and add a new workflow. Or you can define a workflow yaml files and store them in .github/workflows in your application.

In our case we'll create a two workflows. One of them will be used to deploy application to dev environment on each push to master:

And the second workflow will be used to deploy application to prod environment every time a new tag with specific pattern is released:

How to store secrets on Github

To store secret environment variables, go Settings of your Github repository and choose Secrets from the left sidebar.

First, we need to store AWS Key and AWS Secret in order to be able to deploy our application using Serverless Framework.

Second, we need to store secret variables listed in our env.yml file. We can do a little trick here: rather than storing each secret environment variable separately, we can store the content of entire env.yml file as show on the screenshot below:

And then use that content to create env.yml file during our workflow process:

- name: Create env file
  run: | 
    cat > env.yml << EOF
    ${{ secrets.ENV }}
    EOF

Please note: all secrets stored in Github are encrypted. You will not be able to view or edit them once created. So if you need to update any secret key, you need to delete old variable first, and then create a new variable with the same name and updated value.

Managing Github Actions

You can see the status of all triggered Github Actions:

To see the details of specific action, just click on it:

And finally, you can see URL of your deployed application by expanding "Deploy Lambda functions" step:

That's all! As you can see, Github Actions make deployment process of Serverless applications really easy.

This post was originally published on my website.