DEV Community: Daniel Krupnyi

What is VS Code Johnny❓ 🤔

Daniel Krupnyi — Mon, 26 Apr 2021 12:41:01 +0000

Hello comrades! 👋

I decided to show off. And I'll show you my VS Code setup.

First of all the theme

I have been using the morgan.codes theme for a long time. But recently I changed it. I've always liked green and found my favorite in this style - Borealis Theme:

Also I prefer to use LaserWave and Cobalt2 and City Lights themes.

Icons are also important

Favorite the Material Icons of course:

And City Lights icons.

Font

Top 3: Agave Nerd Font, Fira Code, Operator Mono:

Extensions maybe

Nothing special.

Except: Project manager, Disable Ligatures, Import Cost, Markdown Preview Enhanced, Multiple clipboards.

So, what does your VS Code setup look like? 🧐
Drop it in the comments 👇

Production deployment Strapi + Gatsby app on VPS Shared Hosting: Deploy, web hooks & https. (3)

Daniel Krupnyi — Fri, 23 Apr 2021 09:50:33 +0000

Production deployment Strapi + Gatsby app on VPS Shared Hosting: Deploy, web hooks & https.(3)

Welcome to the last part of Strapi + Gatsby deployment tutorial 👋

If you don't like to read a lot of text, the finished project is here 🤗

Let's go to work 💪

Deployment Strapi and Gatsby
- Opening FTP/SFTP connection
- Preparing to upload
- Creating Authenticated Requests
  - Installing necessary dependencies
  - Adjusting configs
- Uploading
- Installing Dependencies
Enabling SSL(HTTPS)
Testing our apps
Automatisation with PM2
Creating Webhooks
- Installing GO Language
- Installing Webhook tool
- Creating configs for webhook tool

Deployment Strapi and Gatsby

Some hosts may provide you with a user interface to deploy data, but unfortunately not each. That's why in our case we will using classic FTP/SFTP connection.

Opening FTP/SFTP connection

All data for connection by FTP/SFTP you can find on your host.

I prefer to use Cyberduck client for such purposes. You can use it or something like FileZilla.

Here is the video how to open FTP/SFTP connection using Cyberduck.

Preparing to upload

Before you upload Gatsby files to server, you need to
install fs-extra package:

npm install fs-extra

Then change "gatsby-node.js" file or create it and put this code inside:

const fs = require("fs-extra");
const path = require("path");

// ...

exports.onPostBuild = () => {
  fs.copySync(
    path.join(__dirname, "public"),
    path.join(__dirname, "public_shtml"),
    { overwrite: true }
  );
  fs.removeSync(path.join(__dirname, "public"));
};

This code will change the name of the "public" folder to "public_html" so that VestaCP can read the statically generated files after build.

Creating Authenticated Requests

In the first part we Configured Authenticated Requests in Strapi and created new Role and User for it.
Now is time to create Authenticated Requests.

Installing necessary dependencies

First install all dependencies to Gatsby:

yarn add axios isomorphic-fetch gatsby-source-graphql @apollo/client

Then install dependencies for Strapi:

yarn strapi install graphql

Now explanations. Let's start with ApolloClient(@apollo/client).

ApolloClient is a comprehensive state management library for JavaScript that enables you to manage both local and remote data with GraphQL. Use it to fetch, cache, and modify application data, all while automatically updating your UI.

In our case that library will be helpful to get token from Strapi.

Since Apollo working with GraphQL we installed to Strapi graphql package that recreate data in GraphQL format. And also we installed gatsby-source-graphql in Gatsby to get data in this format.

Packages axios and isomorphic-fetch will be helpful for fetching data.

Adjusting Configs

Go to gatsby-config.js file and find there gatsby-source-strapi plugin. Extend it add:

    {
      resolve: "gatsby-source-strapi",
      options: {
        apiURL: process.env.API_URL || "http://localhost:1337",
        contentTypes: ["article", "category", "writer"],
        singleTypes: [`homepage`, `global`],
        queryLimit: 1000,
        // new ---
        loginData: {
          identifier: process.env.GATSBY_API_IDENTIFIER,
          password: process.env.GATSBY_API_PASS,
        },
        // new ---
      },
    },

Then add config for gatsby-source-graphql plugin:

    {
      resolve: "gatsby-source-graphql",
      options: {
        typeName: "Strapi",
        fieldName: "strapi",
        url: process.env.API_GRAPHQL_ENDPOINT,
      },
    },

After go to the root folder of Gatsby and rename .env.example file to .env and change code inside to:

GATSBY_ROOT_URL=https://yoursite.com
API_URL=https://subdomain.yoursite.com
API_GRAPHQL_ENDPOINT=https://subdomain.yoursite.com/graphql
GATSBY_API_AUTH=https://subdomain.yoursite.com/auth/local
GATSBY_API_IDENTIFIER=user@mail.com
GATSBY_API_PASS=userPassword

Then in the root folder create of Gatsby file gatsby-browser.js:

import React from "react";
import {
  ApolloClient,
  ApolloProvider,
  InMemoryCache,
  createHttpLink,
} from "@apollo/client";
import { setContext } from "@apollo/client/link/context";
import fetch from "isomorphic-fetch";

const httpLink = createHttpLink({
  uri: process.env.API_GRAPHQL_ENDPOINT,
  fetch,
});

const authLink = setContext(async (_, { headers }) => {
  const token = localStorage.getItem("token");

  return {
    headers: {
      ...headers,
      authorization: token ? `Bearer ${token}` : "",
    },
  };
});

const client = new ApolloClient({
  link: authLink.concat(httpLink),
  cache: new InMemoryCache(),
});

export const wrapRootElement = ({ element }) => (
  <ApolloProvider client={client}>{element}</ApolloProvider>
);

Inside this file Apollo will get token from Strapi and also get access to fetching authenticated data.

But if you remember the first part, in order to get Token we need to sand POST request to Strapi with data about user email and password.

For that go to src folder in Gatsby and create there path: helpers/getToken.js:

import axios from "axios";

const getToken = async () => {
  const { data } = await axios.post(`${process.env.GATSBY_API_AUTH}`, {
    identifier: `${process.env.GATSBY_API_IDENTIFIER}`,
    password: `${process.env.GATSBY_API_PASS}`,
  });

  return data.jwt;
};

export default getToken;

Function getToken takes url to Strapi auth, user email and password from .env file. Then it returns token.

Since token refreshes, we can save it in LocalHost. The best way to do it get and save token in layout.js component:

import React, { useEffect } from "react";
import PropTypes from "prop-types";
import { StaticQuery, graphql } from "gatsby";
import Nav from "./nav";
import Seo from "./seo";
import getToken from "../helpers/getToken";

const Layout = ({ children, seo }) => {
  // new ---
  useEffect(() => {
    async function fetchData() {
      const token = await getToken();
      localStorage.setItem("token", token);
    }
    fetchData();
  }, []);
  // new ---

  return (
    <StaticQuery
      query={graphql`
        query {
          strapiHomepage {
            seo {
              metaTitle
              metaDescription
              shareImage {
                publicURL
              }
            }
          }
        }
      `}
      render={(data) => (
        <>
          <Seo seo={seo} />
          <Nav />
          <main>{children}</main>
        </>
      )}
    />
  );
};

Layout.propTypes = {
  children: PropTypes.node.isRequired,
};

export default Layout;

Now, when layout.js component is gererated it get request to Strapi, gets token and save it in LocalStorage. In turn ApolloClient at file gatsby-browser.js get token from LocalStorage and gets with it help GraphQL data.

Uploading

When you connected to your server. You need to follow the path: home/username/web/yoursite.com and drop there your Gatsby app. Then delete "public_shtml" folder.

☝️ But don't forget to exclude node_modules if you don't want to wait all your life for the download to finish 🙄

After follow the: home/username/web/subdomainprefix.yoursite.com/public_shtml and drop there Strapi app.

☝️ In my case, I was using Strapi with its own SQLite database and forgot to upload it to the server because it was hidden on my system and after running on the server, Strapi created a new empty database. So if you don't want to lose your data, don't make my mistakes. Path:.tmp/data.db ☝️

If you want to use Strapi with another DB. Strapi has excellent docs on this. .

Installing Dependencies

Then switch to your SSH and go to these paths and in each path write command npm install to install all projects dependencies (if you forgot how to connecting by SSH you can find this info in previous part).

Enabling SSL(HTTPS)

In VestaCP go to "WEB" choose your domain and there enable "SSL Support".

Then in "SSL Home" select "public_shtml" folder.

Then fill in the following fields with your SSL details: "SSL certificate", "SSL key", "SSL certificate/credentials" or enable "Lets Encrypt support" if installed on your Vesta panel.
Save all changes.

Do the same with the subdomain.

Testing our apps

Now you can connect by SSH in your terminal and try to fire projects. npm run develop for Strapi.
Then open new terminal window and do the same for Gatsby.
All should be work.

Automatisation with PM2

In order to your apps don't stops when you close terminal windows. You need to install PM2 — process manager that will help you manage and keep your application online.

In your SSH terminal go to the server root folder and type:

npm install pm2 -g

After installation go to Strapi app:
home/username/web/subdomainprefix.yoursite.com/public_shtml and create there file "server.js".

Then put inside:

const strapi = require("strapi");
strapi({ NODE_ENV: "production" }).start();

Now it terminal type:

pm2 start server.js

That's it! Strapi app is working 🤗

Also You must read this awesome docs about pm2.
This docs will help you fast understand how to use pm2!

Creating Weebhooks

Since Gatsby Static Site Generator. It generate html at build time.

Whenever we change something in Strapi, it should send a request to Gatsby that the data has changed, and Gatsby should perform the rebuild.

In order to solve this problem and similar problems exists Webhooks.

Installing GO

First you need to install GO language in your server.

Like I sad in previous part, In my case on server was installed CentOS.

I'll show you how you can install GO on it using yum:

sudo yum install go

If you have different OS you need to find out how to install app on your system. Sample Ubuntu.

Installing Webhook tool

Now install webhook — is a lightweight configurable tool written in Go, that allows you to easily create HTTP endpoints (hooks) on your server.

Install weebhook on CentOS:

go build github.com/adnanh/webhook

Install on another OS

Creating configs for webhook tool

In your server root directory create folder "webhooks" and put inside folder "fronted-rebuild" and file "hooks.json":

[
  {
    "id": "frontend-rebuild",
    "execute-command": "/root/webhooks/frontend-rebuild/rebuild.sh",
    "command-working-directory": "/home/username/web/yourdomain.com",
    "response-message": "Executing rebuild script..."
  }
]

After put in to the "fronted-rebuild" folder file rebuild.sh:

#!/bin/bash

yarn clean 
yarn build

You'll get structure:

Then create file start.sh in the root folder:

/root/go/bin/webhook -hooks /root/webhooks/hooks.json -ip "00.0.000.000" -port 0000 -verbose -hotreload

Instead "00.0.000.000" and "0000" put your ip and port.

After will read this article and you will find out how to add webhooks to Strapi.

Your webhook will be looks like:

http://00.0.00.000:0000/hooks/frontend-rebuild

And finally use pm2 command to start webhook:

pm2 start start.sh

That's it!
You've deployed the Strapi and Gatsby apps on a VPS hosting with VestaCP installed 👏

If you like this series and you feeling thankfulness. You can support me 😉

Also if you have a question or want to add something, drop it in the comments 👇 or find me on Twitter.

Production deployment Strapi + Gatsby app on VPS Shared Hosting: installing Node & Creating configs. (2)

Daniel Krupnyi — Mon, 12 Apr 2021 10:47:39 +0000

Welcome to the second part of the production deployment of the Strapi + Gatsby app on VPS Shared Hosting! 🙌

Before install Node, you need to connect to the server over SSH. You can find all the data for connecting via SSH on your host.

So, in your terminal enter:

shh root@00.0.000.000

Instead "00.0.000.000" enter your server IP. After enter password.

Installing Node

In order to install Node, you need to find out what OS installed on the your server.

In different hosts it can be find out on different ways.
So, you need to find out it in your case 🤗

In my case, the server had Cent OS installed and I'll show you how I installed Node on this OS.

For different OS Node has some great documentation 👍

let's continue.

First install yum:

curl -sL https://rpm.nodesource.com/setup_10.x | sudo bash -

Then install Node:

sudo yum install nodejs

That's it!
You can check out the Node version:

node --version

Adding new domain and subdomain

To add a domain to VestaCP you must:
Log in to control panel and go to the section Web.

In the upper left corner click on Add Web Domain. Fill in all the required fields and click Add.

Also you need to create a subdomain. The procedure for creating a subdomain is the same as for a domain.

When you're enter your domain name, you need to write "admin." in front of it.
It looks like this: admin.your-domain.com.

In the future, we will install the Strapi backend on a subdomain.

Adding template for nginx in VestaCP

Templates for nginx on a server with VestaCP installed are stored along the path: /usr/local/vesta/data/templates/web/nginx/.

Each template must be provided in two formats:

*.tpl - for http
*.stpl - for ssl(https)

The file names must be the same.

Let's create them:

nodeproxy.stpl

server {
  listen   %ip%:%proxy_port%;
  server_name %domain_idn% %alias_idn%;
  error_log /var/log/%web_system%/domains/%domain%.error.log error;

  location /error/ {
    alias  %home%/%user%/web/%domain%/document_errors/;
  }

  location @fallback {
    proxy_pass   http://%ip%:%web_port%;
  }

  location ~ /\.ht  {return 404;}
  location ~ /\.svn/ {return 404;}
  location ~ /\.git/ {return 404;}
  location ~ /\.hg/  {return 404;}
  location ~ /\.bzr/ {return 404;}

  include %home%/%user%/conf/web/nginx.%domain%.conf*;
}

nodeproxy.tpl

server {
  listen   %ip%:%proxy_port%;
  server_name %domain_idn% %alias_idn%;
  error_log /var/log/%web_system%/domains/%domain%.error.log error;

  location /error/ {
    alias  %home%/%user%/web/%domain%/document_errors/;
  }

  location @fallback {
    proxy_pass   http://%ip%:%web_port%;
  }

  location ~ /\.ht  {return 404;}
  location ~ /\.svn/ {return 404;}
  location ~ /\.git/ {return 404;}
  location ~ /\.hg/  {return 404;}
  location ~ /\.bzr/ {return 404;}

  include %home%/%user%/conf/web/nginx.%domain%.conf*;
}

After adding a template in the domain settings panel, you need to select a template for nginx:

All the above steps must be repeated for the subdomain.

After editing the nginx configurations, it must be restarted for the changes to take effect!

For that go to the "Server" on top menu of VestaCP:

There you'll see nginx. Move mouse on it end click restart.

Nginx configuration

After applying the template for nginx, configuration files will be automatically generated under the path /home/{username}/conf/web. Let's take a closer look at the contents of the template, namely, we are interested in the line:

include /home/username/conf/web/nginx.example.com.conf*;

Since nginx configuration files are dynamic, we cannot change their content, otherwise we will lose the changes after regenerating the template. But we can create an nginx.example.com.conf* file to be extracted. It is worth noting that we only have access to the server block of the configuration file, since include is done there. This is done because the server block should be generated automatically and have basic settings.

So let's create files for main domain:

snginx.example.com.conf*

Empty

nginx.example.com.conf*

if ( $scheme = "http" ) {
 rewrite ^/(.*)$ https://$host/$1 permanent;
}

The code above redirects the request from http to https.

Now create files for subdomain:

snginx.admin.example.com.conf*

location / { 
  proxy_pass http://00.0.000.000:1337;
}

Instead 00.0.000.000 your server IP.

nginx.admin.example.com.conf*

if ( $scheme = "http" ) {
 rewrite ^/(.*)$ https://$host/$1 permanent;
}

That's it! 😞

In next part we will deploy Gatsby and Strapi, create web hooks and install pm2.

If you want to add something, drop it in the comments👇🏻

Do you workout son!? 🧐 🏋️

Daniel Krupnyi — Fri, 09 Apr 2021 13:16:05 +0000

Hi comrades! 💪

I think you now that sitting work isn't good enough for your body.

If speaking of me, my training program in past was similar to this:

But then I found out that it's not the best program 😄

I don't like go to the gym and I solved to find something for home training.

I've been training for Insanity by Shoun T. This program gave me a very big endurance 🏃‍♂️

Then I found App - Centr by Chris Hemsworth. Now I'm training by this program 🏋️

So how do you usually maintain your health? 🤔

JavaScript Basic Type Conversions Cheat Sheet 🔥

Daniel Krupnyi — Wed, 07 Apr 2021 17:35:52 +0000

String conversion
Boolean conversion
Number conversion
Null conversion
Undefined conversion

Type conversion can be explicit or implicit.

value = Number('23') // explicit
value = 5 + '25' // implicit

Value type checking

console.log(typeof value);

String conversion

Number to string:

value = String(10); /* => '10' */
value = String(10 + 40); /* => '50' */
value = (10 + 40).toString(); /* => '50' */
value = new String(10 + 20); /* => '30' */

Boolean to string

value = String(true); /* => 'true' */
value = String(false); /* => 'false' */

Array to string

value = String([1, 2, 3]); /* => '1,2,3' */
value = String([ ]); /* => '' */

Object to string

value = String({name: "Daniel"}); /* => [object Object] */

Conversion to string occurs when any data type is concatenated with a string (implicit conversion):

value = 30 + ' ' + 30; /* => 30 30 */ // Space is considered a symbol.
value = 30 + '' + undefined; /* => 30undefined */

Mathematical operations convert Empty String to zero:

value = 30 - ''; /* => 30 */ 
value = 30 - 'text'; /* => NaN */ // If the string is not empty, then we will get NaN - calculation error.
value = 30 - '5'; /* => 25 */ // If we write a number in a string, we will get a number type

Boolean type conversion

In mathematical operations, true is converted to one and false to zero:

value = true + 5; /* => 6 */
value = false + 5; /* => 5 */

String to boolean

value = Boolean('hello'); /* => true */ // Any non-empty string will be considered true.
value = Boolean(' '); /* => true */ 
value = Boolean(''); /* => false */ // An empty string will be considered false.

Number to boolean

value = Boolean(-123); /* => true */ // Any number, both positive and negative, will be considered true.
value = Boolean(123); /* => true */
value = Boolean(0); /* => false */ // Zero counts as false

Undefined to boolean

value = Boolean(undefined); /* => false */

Null to boolean

value = Boolean(null); /* => false */

Object to boolean

value = Boolean({}); /* => true */ // An empty object is considered true.

Array to boolean

value = Boolean([]); /* => true */ // An empty array is considered true.

Number type conversion

String to number

value = Number('23'); /* => 23 */
value = Number('string...lalala'); /* => NaN */ 
value = parseInt(' 203px'); /* => 203 */ // The parseInt function reads a number from a string and removes all characters after it, but if there are characters before the number (except for a space), then it will output NaN. Serves for whole numbers.
value = parseFloat('203.212px'); /* => 203.212 */ // Works the same as parseInt, but for fractional numbers.

Boolean to number

value = Number(true); /* => 1 */
value = Number(false); /* => 0 */

Null to number

value = Number(null); /* => 0 */

Array to number

value = Number([1, 2, 3]); /* => NaN */ // NaN refers to numbers.

Null type conversion

Converts to zero for mathematical operations:

value = null + 5; /* => 5 */

Undefined type conversion

Converts to NaN for mathematical operations:

value = false + undefined; /* => NaN */

Thank's for reading! ❤️
You can also check out my redux basics cheat sheet

Redux Basics Cheat Sheet 📖

Daniel Krupnyi — Tue, 06 Apr 2021 12:22:39 +0000

Basics

scheme

All components states are stored in the global state. Components can read information from it, but cannot directly change something in it.
To change the global state, components create Actions objects and submit them to the Redux Store. Such operations are called dispatches.
The Redux Store in turn uses the Reducer function to update the state.

Reducer

This is a function that is used to store logic. Accepts state and action (simple object).

const reducer = (state = 0, action) => {
  switch (action.type) {
    case "INC":
      return state + 1;
    default:
      return state;
  }
};

let state = reducer(undefined, {});

state = reducer(state, { type: "INC" });

If state is undefined, then you need to return the original initialState.
If the action type is unknown, then you need to return state unchanged.

Reducer must be a pure function! This means that:

The return value depends only on the arguments (you can only work with arguments)
The function has no side effects (changing external data or changing arguments)

Redux Store

The redux store's job is to coordinate data in a react app.

import { createStore } from "redux";

const reducer = (state = 0, action) => {
  switch (action.type) {
    case "INC":
      return state + 1;
    default:
      return state;
  }
};

// Creating store (by default — 0)
const store = createStore(reducer);

// Subscriptions on changes in store 
store.subscribe(() => [console.log(`store changed: ${store.getState()}`)]);

// Handling new actions
store.dispatch({ type: "INC" });
store.dispatch({ type: "INC" });

Counter example:

import { createStore } from "redux";

const reducer = (state = 0, action) => {
  switch (action.type) {
    case "INC":
      return state + 1;
    case "DEC":
      return state - 1;
    default:
      return state;
  }
};

const store = createStore(reducer);

const dec = document.getElementById("dec");
const inc = document.getElementById("inc");

dec.addEventListener("click", () => store.dispatch({ type: "DEC" }));
inc.addEventListener("click", () => store.dispatch({ type: "INC" }));

const update = () => {
  const counter = document.getElementById("counter");
  counter.textContent = store.getState();
};

store.subscribe(update);

Together with the type of action in reduce through action, you can also transfer additional information to perform this very action:

import { createStore } from "redux";

const reducer = (state = 0, action) => {
  const { type, payload } = action;

  switch (type) {
    case "INC":
      return state + 1;
    case "DEC":
      return state - 1;
    case "RND":
      return state + payload;
    default:
      return state;
  }
};

const store = createStore(reducer);

const dec = document.getElementById("dec");
const inc = document.getElementById("inc");
const rnd = document.getElementById("rnd");

dec.addEventListener("click", () => store.dispatch({ type: "DEC" }));
inc.addEventListener("click", () => store.dispatch({ type: "INC" }));

// ---
rnd.addEventListener("click", () => {
  const payload = Math.floor(Math.random() * 10 + 1);
  store.dispatch({ type: "RND", payload });
});
// ---

const update = () => {
  const counter = document.getElementById("counter");
  counter.textContent = store.getState();
};

store.subscribe(update);

Simplifying your code: Action Creator & bindActionCreators

Action Creator

Action Creator is a separate function that creates action objects, making it easy to write code:

const inc = () => ({ type: "INC" });
const dec = () => ({ type: "DEC" });
const rnd = (payload) => ({ type: "RND", payload });

bindActionCreators

bindActionCreator is binds any accepted actionCreator to dispatch:

const store = createStore(reducer);
const { dispatch } = store;

const incDispatch = () => dispatch(inc());
const decDispatch = () => dispatch(dec());
const rndDispatch = (payload) => dispatch(rnd(payload));

// bindActionCreator working like that
const bindActionCreator = (creator, dispatch) => (...args) => {
  dispatch(creator(...args));
};

// Code is shorter now
const incDispatch = bindActionCreator(inc, dispatch);
const decDispatch = bindActionCreator(dec, dispatch);
const rndDispatch = bindActionCreator(rnd, dispatch);

Redux has its own bindActionCreators function:

import { createStore, bindActionCreators } from "redux";

const incDispatch = bindActionCreator(inc, dispatch);
const decDispatch = bindActionCreator(dec, dispatch);
const rndDispatch = bindActionCreator(rnd, dispatch);

The difference from a self-written function is that bindActionCreators can take an object of a set of actions as the first argument:

const { incDispatch, decDispatch, rndDispatch } = bindActionCreators(
  {
    incDispatch: inc,
    decDispatch: dec,
    rndDispatch: rnd,
  },
  dispatch
);

The keys of such an object will be the names of the functions that we want to receive. In the case of a set of actions, bindActionCreators returns an object with ready-made functions that can be destructed:

import { createStore, bindActionCreators } from "redux";
import reducer from "./reducer";
import * as actions from "./actions"; // Import all actions in object format

const update = () => {
  const counter = document.getElementById("counter");
  counter.textContent = store.getState();
};

const store = createStore(reducer);
const { dispatch } = store;

const { inc, dec, rnd } = bindActionCreators(actions, dispatch);

store.subscribe(update);

document.getElementById("inc").addEventListener("click", inc);
document.getElementById("dec").addEventListener("click", dec);
document.getElementById("rnd").addEventListener("click", () => {
  const payload = Math.floor(Math.random() * 10);
  rnd(payload);
});

Thanks for reading! ❤️
You can also check out my JavaScript Basic Type Conversions Cheat Sheet
If you have something to add, please, describe in the comments 👇🏻

Production deployment Strapi + Gatsby app on VPS Shared Hosting: preparing & Authenticated Requests. (1)

Daniel Krupnyi — Mon, 01 Mar 2021 11:32:31 +0000

Hi there!

Recently ran into a situation where I needed to install Gatsby + Strapi app on VPS hosting. Previously, I deployed everything to Heroku and Strapi.

So it became a challenge for me. Because I imagined how to install a Node.js app on a VPS server but had no idea how to set up vesta cp to work with Node.js

And after a while I managed to solve this problem.

Now I want to share my experience with you.

So at this cycle of tutorials i'll show you all process of adjusting and deploying Strapi based Gatsby application to real hosting server.

Here we go!

Preparing Gatsby and Strapi

For this tutorial we will using ready starter: Strapi Starter Gatsby Blog.
It has all necessary what we need. So simply complete all steps inside Starter's description and all will be ready to start.

Configuring Authenticated Requests in Strapi

Since we will install our builds to a real hosting. We need to secure pass to Strapi collections and types.
For that we will using Authenticated Requests.

First in Strapi Admin Panel go to Settings, then select the Roles under USERS & PERMISSIONS PLUGIN section.
After click on Add new role button in the top right corner.

Fill Role details fields and select fields: find, findOne, count in Permissions for an all APPLICATION types.
Save new role.

Now go to left main menu, click on the Users Collection type. Fill all parameters and won't forget select Role — Reader for new user.
Save user.

That's it! Now you can fetch Authenticated Requests!

Let's create a test request in Postman to test how Authenticated Requests works.

To do this, create a POST request at:
http://localhost:1337/auth/local

Then set the body as raw with the JSON (application/json) type and write:

{
  "identifier": "youruser@main.com",
  "password": "youruserpassword"
}

Send your request.

In response you'll get jwt key:

{
    "jwt": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MSwiaWF0IjoxNTc2OTM4MTUwLCJleHAiOjE1Nzk1MzAxNTB9.UgsjjXkAZ-anD257BF7y1hbjuY3ogNceKfTAQtzDEsU",
    "user": {
        "id": 1,
        "username": "yourusername",
        ...
    }
}

If you want to find out about jwt you can read info at: jwt.io.

jwt key is updated and has Expiration time. Default Expiration time is month. You can check it at jwt.io. There past your jwt key to Encoded fill.

You'll see:
In PAYLOAD:DATA you will get:

{
  "id": 1,
  "iat": 1611908790,
  "exp": 1611995190
}

If you move you mouse on key "exp" you will se Expiration time is month.

You can change this time for more protection.

For that in Strapi directory go to extensions/user-permissions/config/ and create there file security.json.
Put inside:

{
  "jwt": {
    "expiresIn": "1d"
  }
}

it will look like this:

Relaunch Strapi and Gatsby. Now Expiration time is one day.

That's it!

In the next part we will install Node.js on a VPS hosting and Create configs for Vestacp and Nginx.

If you want to add something, write in the comments.

react-three-fiber: Planet Mars Animation 🚀

Daniel Krupnyi — Fri, 25 Sep 2020 13:12:47 +0000

As long as I can remember, I have always been attracted by Space. But then i heard about programming...

Hy there! Today we will create mars planet using three.js and react-three-fiber.

Link to the finished project

What are three.js and react-three-fiber?

This tutorial is for those who already know the basics of three.js. There i won't go into details since there are already so many introductory guides. Today i want to focus on practise.

But in brief:

three.js — it's JavaScript library for creating 3D graphics.
react-three-fiber — is a React renderer for three.js on the web and react-native.

Here we go!

First! The structure of our files in this guide:

Now let's dwell on the details. In our project, we need to create three main components:

Sphere — this will be the planet Mars
SkyBox — this is our space, we will use CubeTextureLoader() to create it. For this component we need to get 6 images for the background of each side of the cube.
CameraControls — very important component. This will give us the ability to rotate and scale our Sphere (Mars) as we want.

Sphere creating

Let's start with the Sphere component:

import React, { useRef } from "react";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import { useFrame, useLoader } from "react-three-fiber";

const Sphere = () => {
  const planet = useRef();

  const { nodes } = useLoader(GLTFLoader, "models/mars.glb");

  useFrame(() => (planet.current.rotation.y += 0.0002));

  return (
    <mesh
      ref={planet}
      visible
      position={[0, 0, 0]}
      // Adding data from mars.glb to the geometry and material of the sphere
      geometry={nodes.Cube008.geometry}
      material={nodes.Cube008.material}
    />
  );
};

export default Sphere;
```


We are using a ready-made gltf 3D file that creates the geometry and material for our sphere. We can get it from [the official NASA website](https://solarsystem.nasa.gov/resources/2372/mars-3d-model/). To work with the gltf file we use the [GLTFLoader](https://threejs.org/docs/#examples/en/loaders/GLTFLoader) from three.js and the `useLoader()` hook from react-three-fiber. Also we use the `useFrame()` hook that add rotation for our planet.

### **SkyBox creating**
Notice how SkyBox returns null this is because we will not be creating any new objects with this component in our scene. Instead, we will use it as a controller to set a property in our scene, as we will see in the next step when we load and apply the skybox textures.



```javascript
import { useThree } from "react-three-fiber";
import { CubeTextureLoader } from "three";

// Loads the skybox texture and applies it to the scene.
const SkyBox = () => {
  const { scene } = useThree();
  const loader = new CubeTextureLoader();
  // The CubeTextureLoader load method takes an array of urls representing all 6 sides of the cube.
  const texture = loader.load([
    "/images/front.jpg",
    "/images/back.jpg",
    "/images/top.jpg",
    "/images/bottom.jpg",
    "/images/left.jpg",
    "/images/right.jpg",
  ]);

  // Set the scene background property to the resulting texture.
  scene.background = texture;
  return null;
};

export default SkyBox;

```


To start we need to get a reference of our Three.JS scene and for that we use `useThree()` hook. Then we create an instance of the CubeTextureLoader and then call the load method with an array containing the six URLs of your images. This will return a CubeTexture. The CubeTexture we assign to the global `scene.background` which we get a reference to with `useThree()`, and that's it our skybox is finished.

### **Skybox Textures**
Also important to talk about Skybox textures creating. For this purpose i was using [Spacescape](http://alexcpeterson.com/spacescape/) program. This is a simple space landscape generator. You can use it or create assets in Photoshop or something. 

### **Camera Controls**
And the last thing about camera control. Here we are using [OrbitControls](https://threejs.org/docs/#examples/en/controls/OrbitControls), which allows the camera to rotate around the target.


```javascript
import React, { useRef } from "react";
import { extend, useThree, useFrame } from "react-three-fiber";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";

extend({ OrbitControls });

const CameraControls = () => {
  const {
    camera,
    gl: { domElement },
  } = useThree();

  // Ref to the controls, so that we can update them on every frame with useFrame
  const controls = useRef();

  camera.position.z = 999;

  useFrame(() => controls.current.update());

  return (
    <orbitControls
      ref={controls}
      args={[camera, domElement]}
      autoRotate={false}
      enableZoom={false}
    />
  );
};

export default CameraControls;

```



### **Finish**
Now we can use all created components in to the App component:


```javascript
import React, { Suspense } from "react";
import { Canvas } from "react-three-fiber";
import "./styles.css";

import { CameraControls, Sphere, SkyBox } from "./components";

const App = () => {
  return (
    <>
      <Canvas className="canvas">
        <CameraControls />
        <directionalLight intensity={1} />
        <ambientLight intensity={0.6} />
        <Suspense fallback="loading">
          <Sphere />
        </Suspense>
        <SkyBox />
      </Canvas>
    </>
  );
};

export default App;

```


And also add Styles in to styles.css:


```css
* {
  box-sizing: border-box;
}

html,
body,
#root {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
```


**Well that's all. Thanks for reading =)**