DEV Community: Paulo Castellano

How to make Vite, Valet, and SSL works together

Paulo Castellano — Fri, 01 Jul 2022 19:34:59 +0000

Hey 👋

I decided to create a new project today, then I created a new laravel project and it's coming with a new assets compiler, vite.

But my project requires SSL in local development, then I needed to make the vite works together with SSL and laravel valet.

I did not find much content on the internet about it, because it's a very new release, then I decided to share the solution with you.

Let's go, first assure your domain already have SSL with the command:

cd ~/Code/your-current-project
valet secure your-current-project

Now check in the browser your domain it's working with the certificate.

Solution

The magic is you pass the key and cert to vite.config.js as you make in Nginx or Apache.

Check the file example bellow 👇

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

 const domain = "domain.test"; // add it
 const homedir = require("os").homedir(); // add it

export default defineConfig({
    plugins: [
        laravel({
            input: "resources/js/app.js",
            ssr: "resources/js/ssr.js",
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
    // add this block
    server: {
        https: {
            key: homedir + "/.config/valet/Certificates/" + domain + ".key",
            cert: homedir + "/.config/valet/Certificates/" + domain + ".crt",
        },
        host: domain,
        hmr: {
            host: domain,
        },
    },
});

I hope this article helped you!

How to use Repositories in Laravel Framework, so as not to repeat code

Paulo Castellano — Fri, 11 Mar 2022 17:19:35 +0000

One of the big problems in software development is code repetition, which adds a lot of difficulties when it comes to project maintenance.

There is a concept in software development called DRY (The Don't Repeat Yourself), this concept proposes that you do not repeat your code, if you need to do the same action, in more than one place in your project, you must create an abstraction for that.

To apply the DRY concept in the Laravel framework, there are some architectures developed by the community, today we are just going to talk about Repositories.

Imagine the following scenario, you have a system where the user can register alone to have access to a logged-in area, but someone who is already registered in the system can also invite that same user through an invitation.

It's not hard to see that you'll need two codes to register a user, one outside the application and one inside.

Well, to solve this kind of situation, we will use a Repository called "UserRepository.php"

UserRepository.php is an abstraction that we can call wherever we like.

In our example, we will have two controllers, RegisterController.php (for external registers) and UsersControllers.php (for internal registers).

As you can see, I can call UserRepository.php from both controllers and I'm not repeating myself.

I can also make the same call from the UsersController.php controller

This way, you can make your software maintenance much simpler and more efficient.

Because when you need to fix a bug or implement a new feature, you know you only need to edit UserRepository.php

Repositories also serve to facilitate cache reprocessing, imagine that you redo the user cache using several different methods of your application, with repositories that you will always call from the same method.

How to work with laravel, inertia js, and vue-i18n

Paulo Castellano — Mon, 07 Mar 2022 12:11:05 +0000

The last week i lost some hours trying to make inertia js and vue-i18n works together in changelogfy. But some people from inertiajs discord community help to understand and make it works, very thanks 🙏

To help some people to understand the process, I decided to create this post blog.

I will centralize all my languages files at laravel default translates, in the folder resources/lang.

I think is a great way to deliver i18n to the front and backend with the same translated files.

But vuejs requires JSON language files, not PHP.

To convert all our PHP translate files to JSON, we will install the composer package bellow:

composer require librenms/laravel-vue-i18n-generator

Publish the package configs:

php artisan vendor:publish --provider="MartinLindhe\VueInternationalizationGenerator\GeneratorProvider"

Now let's run this command to convert files:

php artisan vue-i18n:generate

A file will be created by default in resources/js/vue-i18n-locales.generated.js

This file contains all your languages.

Important:
You need run the command above every time you added new translations or every deployment of your application!

Now let's install the vue-i18n package.

npm install vue-i18n@next

If you like to give power to user changes automatically your language, you can send locale to view by HandleInertiaRequests middleware.

<?php

namespace App\Http\Middleware;

use Illuminate\Support\Facades\Session;
use Illuminate\Http\Request;
use Inertia\Middleware;

class HandleInertiaRequests extends Middleware
{
    protected $rootView = 'app';

    public function version(Request $request)
    {
        return parent::version($request);
    }

    public function share(Request $request)
    {
        return array_merge(parent::share($request), [
            'user' => function () use ($request) {
                if (!$request->user()) {
                    return;
                }
            },
            'locale' => app()->getLocale()
        ]);
    }
}

Now let's set up the resources/js/app.js, to use vue-18n and use the current user language send by HandleInertiaRequests middleware.

import { createI18n } from "vue-i18n";
import localeMessages from "./vue-i18n-locales.generated";

import { createApp, h } from "vue";
import { createInertiaApp } from "@inertiajs/inertia-vue3";

createInertiaApp({
    resolve: (name) => require(`./Pages/${name}.vue`),
    setup({ el, app, props, plugin }) {
        const i18n = createI18n({
            locale: props.initialPage.props.locale, // user locale by props
            fallbackLocale: "en", // set fallback locale
            messages: localeMessages, // set locale messages
        });

        return createApp({ render: () => h(app, props) })
            .use(plugin)
            .use(i18n)
            .mixin({
                methods: {
                    route
                },
            })
            .mount(el);
    },
});

Now you can use vue-18n in any view like this:

<template>
    <h1>
        {{ t("home.title") }}
    </h1>
</template>
<script>
import { useI18n } from "vue-i18n";
export default {
    setup() {
        const { t } = useI18n({});
        return { t };
    },
}
</script>

I hope I helped you ✌️