DEV Community: vuewebdev

Deploying a Laravel 10.7 and Vue 3 project from GitHub to Hostinger

vuewebdev — Tue, 18 Apr 2023 18:42:30 +0000

Shared hosting is kind of overlooked these days in favor of platforms like Vercel and Netlify that do a courtesy of building and instant deployment of your project. Just push the ok button and watch your website being published online.

I decided to check how fast is a Git deployment with Hostinger and was astonished with the speed and convenience of deployment of my freshly started Laravel 10.7 / Vue 3 blog project.

Upon purchase of https://oleg-blog.tech domain name for a ridiculous price of 1.41 EUR, installing SSL certificate, establishing an e-mail account me@oleg-blog.tech and MySQL database (all complimentary with my Premium Hosting plan), I have started bash terminal on my Linux Ubuntu 22.04 machine to initiate a new Laravel project:

composer create-project laravel/laravel larablog

I will not go through the whole procedure here since it’s not a Laravel tutorial. However, I would like to point out that the documentation at https://bootcamp.laravel.com/inertia/installation is profound and so easy to read that it doesn’t take more than 20 minutes before you insert php artisan serve in your terminal and see the starter page looking at you from localhost:8000.

Since we are using Vue 3 in this project there is still a few moments I would like to drive your attention to. First, you will need to install Laravel Breeze to use the framework. There is also a Breeze installation for React available from the same source. You can enter into your terminal the following:

composer require laravel/breeze --dev

php artisan breeze:install vue

Next, you need to start your local development environment for the node files:

npm run dev

Last, you will need to create a MySQL database in your local environment and enter all the details for the database, the e-mail SMTP server and other information you might need into .env file. After that you can run the following command from your bash terminal:

php artisan migrate

Once you have made sure that your project is now working in the local environment and you can register in your database and log in, it’s time to create a private repository on GitHub and commit your code into it. Please note, that it is crucial for your code to work later on Hostinger platform to remove all the .env, /public/*, /storage/*, vendor files from .gitignore before you make a commit.

Also, since your Laravel project will serve all the files from /public folder per se, you will need to create an additional .htaccess file in the root folder with the following code inside:

RewriteEngine On
RewriteBase /

# Serve files from the root directory
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.*)$ public/$1 [L]

After making a Git commit and performing file synchronization it was time to get back to the Hostinger account, find Git from the Advanced menu and follow the instruction steps from the provided tutorial https://support.hostinger.com/en/articles/1583302-how-to-deploy-a-git-repository to deploy the repo from under the intended domain.

Before the actual deployment you will need to copy the RSA key and paste it in your GitHub settings in order for the hosting provider to be able to access private repository on GitHub. I also chose to add a webhook directly to my project so that I don’t need to manually update Hostinger every time I add new features to my project. Now, with the webhook added and the project being successfully published, there is still one last step to be taken.

Database migration, that I already initially did in my project locally before committing it to GitHub will not work on a database on Hostinger. I needed to use SSH to go on the Hostinger server and run php artisan migrate command from the terminal there. In order to access the server, you need to copy the code from the menu on the dashboard under Advanced → SSH Access and post it into your terminal. Voi la now I am free to develop my blog with instant deployment using a shared hosting service with a convenience of edge computing.

In conclusion, with a few extra minutes invested in setting up the project, it is possible to have a domain, hosting, database and an e-mail service ready almost at the speed that cloud computing services offer. For a startup, a blogger or a small company this might be an ideal solution to bring out their ideas, products and services directly to their customer and save some money on the way.

Tailwind 3.3 - more colors, TypeScript friendly

vuewebdev — Wed, 29 Mar 2023 13:07:04 +0000

Get ready to spice up your web development game with the latest release of Tailwind CSS v3.3! This update brings a deliciously extended color palette to satisfy even the most discerning designer's cravings. But that's not all - feast your eyes on the new ESM/TS support that'll make your workflow smoother than butter. And, as if that weren't enough, you can now indulge in the savory goodness of logical properties and other mouth-watering features that'll take your website to the next level. Don't miss out on this delectable upgrade - your taste buds (and clients) will thank you!

First thing let's upgrade the existing version of Tailwind for the latest one:

npm install -D tailwindcss@latest

Darker -950 shades are now added for every color:

<span class="font-bold text-slate-950">-950 shades</span>

With the new version you can generate a TS (or ESM) config file

npx tailwindcss init --ts

For those using RTL and LTR language options life becomes easier with ms-3 (margin start) and me-3 (margin end) tags. Same properties were added to start-, end-, padding, rounded, border and scroll.

<div class="group flex items-center">
    <div class="me-3">
      <p class="text-sm font-medium text-slate-700">أوليج ريبنيكوف</p>
      <p class="text-sm font-medium text-slate-500">مطور ويب</p>
    </div>
    <img
      class="shrink-0 h-12 w-12 rounded-full"
      src="@/assets/Oleg.jpg"
      alt="Oleg Rõbnikov Web Development logo"
    />

    <div class="ms-3">
      <p class="text-sm font-medium text-slate-700">Oleg Rõbnikov</p>
      <p class="text-sm font-medium text-slate-500">Web developer</p>
    </div>
  </div>

New controls were added to make gradient stop positions more precise with from-10%, via-35%, etc. You can find more information about new features of color gradient stops in documentation

class="bg-gradient-to-r from-rose-400 from-30% via-fuchsia-500 via-60% to-indigo-500 to-90% h-10 w-300"

Line-clamp isn't used as a plugin anymore. You can just use it as, e.g. line-clamp-2 class!

Line-height and font-size have been combined into a single class, e.g. 'font-lg/7' and also supports arbitrary values like 'font-xl/[17]'

Color variables are now supported in the class arguments without var prefix. Try to hover over me!

style="--brandColor: #e500ff; --hoverBrandColor: #000000"
class="text-[--brandColor] hover:text-[--hoverBrandColor]"

Extended options for the font family include fontVariationSettings besides fontFeatureSettings that used to be there already. Both of them are accessible in tailwind.config.ts. Please don't forget to upgrade your TS to v.5 and PostCSS to v.8.4. As I was impatient to try out all new features of new Tailwind version, I haven't done it and voila, couple of new features weren't performing well. So, please, don't forget to upgrade your dependencies.


module.exports = {
  theme: {
    fontFamily: {
      sans: [
        'Inter var, sans-serif',
        {
          fontFeatureSettings: '"cv11", "ss01"',
          fontVariationSettings: '"opsz" 32',
        },
      ],
    },
  },
}

Another nifty feature is ability to customize your list bullet immages as list-image-*.

<ul class="ms-14 list-image-[url('/logo.png')]">
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>

hyphens-manual allows you to add a custom breaking point for long words like pneumonoultramicroscopicsilicovolcanoconiosis. It's done with the help of  tag

<p class="ms-10 w-20 hyphens-manual">
  pneumo&shy;noultra&shy;microscopic&shy;silico&shy;volcanoco&shy;niosis
</p>

Table caption can now be aligned to top or bottom of the table using a single class caption-*

In conclusion, Tailwind CSS version 3.3 has numerous new features like a redesigned docs site, CSS Grid support, and the ability to customize the font families used in your project. The update also includes numerous bug fixes and performance improvements. If you're a web developer looking to streamline your workflow and build beautiful, responsive websites faster than ever, give Tailwind CSS a try and experiment with these new features today!
Feel free to download my
GitHub project and experiment by yourself.

A Responsive and Language-Aware Footer Component for Vue 3

vuewebdev — Thu, 23 Mar 2023 16:21:03 +0000

Are you a blogger or content creator who operates in several languages? Do you have a multitude of social media accounts you need to share? Then you'll appreciate this responsive and language-aware footer component for Vue 3!

This footer component is designed to be user-friendly, responsive, and customizable, displaying the appropriate social links and icons based on the language and device type. The footer layout is minimalistic to keep the user's focus on the main content. It is straightforward and easy to use, and the responsiveness of the footer ensures that it looks good on any device and screen size.

Data

The languages and social links data for this footer component are stored in JSON files in the data folder. The language.json file contains an array of objects, each representing a language. The value property of each language object represents the first two letters of a language code, and the text property stores the name of the language in its native script. The flag property stores the flag emoji of the corresponding country.

[
  {
    "value": "en",
    "text": "English",
    "flag": "🇬🇧"
  },
  {
    "value": "et",
    "text": "Eesti",
    "flag": "🇪🇪"
  },
  ........
]

Below you will find the social.json file, which is home to an array of objects. Each object serves as a representation of a social link. The icon property holds the name of the corresponding SVG file in the assets folder, while the name property contains the name of the social platform itself. The url property, on the other hand, keeps track of the link to the social platform. Lastly, the tags property is an array of strings that showcase the languages the link is displayed for. If the string is all, then the link is visible for all languages. If the string is desktop, then the link will only show on desktop devices. Similarly, if the string is mobile, then the link will only display on mobile devices.

[
  {
    "icon": "facebook.svg",
    "name": "Facebook",
    "url": "https://www.facebook.com/vuewebdev",
    "tags": ["en", "de", "vi", "et", "desktop"]
  },
  {
    "icon": "twitter.svg",
    "name": "Twitter",
    "url": "https://twitter.com/DiveWithOleg",
    "tags": ["en", "de", "vi", "et", "desktop"]
  },
  {
    "icon": "github.svg",
    "name": "GitHub",
    "url": "https://github.com/Divewitholeg",
    "tags": ["all", "desktop"]
  },
    ........
]

Language Select Component

Let me walk you through the language select component. It's a straightforward select element that is linked to the lang.json file, which holds an array of languages assigned to the langs variable. By default, the lang variable is set to en. This lang variable is then bound to the v-model of the select element, allowing users to switch between available language options easily.

When a user selects a language from the dropdown, the lang event is triggered, and the selected language value is passed on to the parent component via the language.value variable. This way, the chosen language setting can be used throughout the entire application.

<script setup>
import langSelection from "../data/lang.json";
import { ref } from "vue";

const langs = Object.assign(langSelection);
const lang = ref("en");
defineEmits(["lang"]);
</script>
<template>
  <div>
    <select v-model="lang" class="p-1 text-sm rounded-lg text-gray-700">
      <option
        class="block px-4 py-2 hover:bg-gray-100"
        v-for="language in langs"
        :key="language.text"
        :value="language.value"
        @click="() => $emit('lang', language.value)"
      >
        {{ language.flag }} {{ language.text }}
      </option>
    </select>
  </div>
</template>

Footer Component

Let's delve into the Footer Component, which comprises two components - FooterMobile.vue and FooterDesktop.vue.

FooterMobile.vue

Starting with FooterMobile.vue, it's a simple div element styled using TailwindCSS. The component receives the social array as a prop, which is iterated using the v-for directive. Each object in the social array is defined as link. To display the social media links based on the user's language settings, the v-if directive checks whether the link.tags array includes the string mobile, and if it includes the string all (for all languages) or the lang variable (for each specific language). If the v-if directive evaluates to true, the div element with the corresponding social media icon and reference is displayed. The a element has an href attribute with the value of the link.url variable, and the img element has a src attribute with the value of the link.icon variable. The alt attribute has the value of the link.name variable, which is essential for web accessibility.

<script setup>
const props = defineProps({
  lang: {
    type: String,
    required: true,
  },
  social: {
    type: Array,
    required: true,
  },
});
</script>
<template>
  <div class="flex justify-center my-2">
    <div v-for="link in social" :key="link.url">
      <div
        v-if="
          link.tags.includes('mobile') &&
          (link.tags.includes('all') || link.tags.includes(lang))
        "
        class="mx-3"
      >
        <a :href="link.url">
          <img
            :src="`/social/${link.icon}`"
            :alt="link.name"
            width="25"
            height="25"
        /></a>
      </div>
    </div>
  </div>
</template>

FooterDesktop.vue

The FooterDesktop.vue component is only different from the FooterMobile.vue component in that the v-if directive checks if the link.tags array includes the string desktop instead of the string mobile.

<script setup>
const props = defineProps({
  lang: {
    type: String,
    required: true,
  },
  social: {
    type: Array,
    required: true,
  },
});
</script>
<template>
  <div class="flex justify-center my-2">
    <div v-for="link in social" :key="link.url">
      <div
        v-if="
          link.tags.includes('desktop') &&
          (link.tags.includes('all') || link.tags.includes(lang))
        "
        class="mx-3"
      >
        <a :href="link.url">
          <img
            :src="`/social/${link.icon}`"
            :alt="link.name"
            width="25"
            height="25"
        /></a>
      </div>
    </div>
  </div>
</template>

App.vue

The App.vue component is the parent component. It imports the social.json file and assigns it to the social variable. The lang variable is initialized with the value en. The lang variable is passed to the FooterMobile.vue and FooterDesktop.vue components as a prop. The lang variable is passed to the FooterMobile.vue and FooterDesktop.vue components via the lang event emitted by the LanguageSelect.vue component.

useWindowSize is a composition function from the @vueuse/core package. It returns the width and height of the browser window. The width variable is used to determine if the FooterMobile.vue or FooterDesktop.vue component should be displayed.

defineAsyncComponent is a function from the vue package. It is used to define an asynchronous component. The FooterMobile.vue and FooterDesktop.vue components are imported asynchronously.

:lang is a shorthand for :lang="lang". @lang is a shorthand for @lang="changeLang". The changeLang function is called when the lang event is emitted by the LanguageSelect.vue component.

:social is a shorthand for :social="social". The social variable is passed to the FooterMobile.vue and FooterDesktop.vue components as a prop.

<script setup>
import NavigationLanguageSelect from "./components/NavigationLanguageSelect.vue";
import { useWindowSize } from "@vueuse/core";
import { ref } from "vue";
import { defineAsyncComponent } from "vue";
import socialMedia from "./data/social.json";

const social = Object.assign(socialMedia);
const FooterMobile = defineAsyncComponent(() =>
  import("./components/FooterMobile.vue")
);
const FooterDesktop = defineAsyncComponent(() =>
  import("./components/FooterDesktop.vue")
);
const { width } = useWindowSize();
const lang = ref("en");
function changeLang(newLang) {
  lang.value = newLang;
}
</script>

<template>
  <div class="bg-pink-300">
    <nav
      class="fixed top-0 h-12 w-screen flex items-center justify-between z-10 bg-pink-300"
    >
      <div class="ml-3">
        <img
          src="./assets/logo200black.svg"
          alt="logo of Oleg Rõbnikov Web Development"
          width="150"
          height="70"
        />
      </div>
      <div class="mr-3">
        <NavigationLanguageSelect @lang="changeLang" />
      </div>
    </nav>
    <main class="h-screen mt-12 mb-10 [&>p]:m-6 [&>p]:p-2 [&>p]:leading-6">
      <h1 class="text-xl text-center m-6">Oleg Rõbnikov Web Development</h1>
      <h2 class="text-lg text-center m-4">
        Responsive and Language Sensitive Footer
      </h2>
      <p>
        Current language is changed to <strong>{{ lang }}</strong
        >. Please note that language select doesn't change the language of this
        text. It is there to demonstrate how the footer changes based on the
        language selected.
      </p>
      <p>
        Width of the window is <strong>{{ width }}px</strong>. Try to resize the
        window. The footer will change based on the width of the window.
      </p>
      <p>
        Footer is the usual place for all your social media links like Facebook,
        Twitter, etc. As your website becomes more diverse and you add languages
        and media, the footer becomes overcrowded with all the icons. Most of
        these icons are not used by one part of your audience, while others are
        a mere distraction for another part of the website's visitors
      </p>
      <p>
        Let's show our visitors links to social media that they are more likely
        to use based on their language and the type of device they are using!
      </p>
    </main>
    <footer class="fixed bottom-0 h-10 z-10 w-full">
      <FooterMobile
        v-if="width < 769"
        :lang="lang"
        :social="social"
      /><FooterDesktop v-else :lang="lang" :social="social" />
    </footer>
  </div>
</template>

Conclusion

Hope you will find this way of creating responsive and language sensitive footer useful. If you have any questions or suggestions, please leave a comment below. Also, would be nice to know what solution you are using for displaying social media links in your footer. Thanks for reading!

This repository is available on [GitHub]:

Divewitholeg / footer-social

Responsive and Language Aware Vue 3 Footer

This is a responsive and language aware footer component for Vue 3. Blogging in several languages inevitably brings you to the point where you have a lot of accounts and links to share. Many of these social platforms are language specific or target either a mobile or desktop only audience. This footer component is designed to be responsive and language aware. It will display the appropriate social links and icons based on the language and device type (by screen width).

Details

The process of creation of this component is described in DETAILS.md.

Vue 3 + Vite

This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 <script setup> SFCs, check out the script setup docs to learn more.

Recommended IDE Setup

VS Code + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).

Project

…

View on GitHub