DEV Community: Muhamad Jamil

Laravel vite install bootstrap

Muhamad Jamil — Wed, 30 Nov 2022 03:10:46 +0000

Install package

Ensure you have install vite and laravel-vite-plugin

npm install --save-dev vite laravel-vite-plugin

No need to do this if you make a new app since its included when you create laravel app

and then install bootstrap

npm install --save-dev sass bootstrap @popperjs/core

Configure vite

import { defineConfig } from 'vite'
import laravel from 'laravel-vite-plugin'
import path from 'path'

export default defineConfig({
    plugins: [
        laravel([
            'resources/js/app.js',
        ]),
    ],
    resolve: {
        alias: {
            '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
        }
    },
})

this allow vite to use bootstrap as an alias so we can use it on js and scss file

Import package

Create a new file in your resource folder app.scss and import it

// app.scss
// Import Bootstrap css
@import "~bootstrap/scss/bootstrap";

and last, import it to the resources/js/app.js file or resources/js/bootstrap.js file, laravel create those 2 file on the first time

// app.js
// Import our CSS that included bootstrap css
import '../app.scss'

// Import bootstrap JS
import * as bootstrap from 'bootstrap'

and then load it in your blade template
@vite(['resources/js/app.js'])

to run it

npm run dev

and laravel server

php artisan serve

if you have error vite is not recognize as a command or vite not found ensure you already install it, run npm install after you create your first laravel app

Footnote

Laravel vite docs

Resolving problem with 2 csrf tokens in same domain laravel

Muhamad Jamil — Thu, 13 Oct 2022 05:19:57 +0000

if you have 2 apps on same domain like

https://somesite.com/someapp-1
https://somesite.com/someapp-2

The CSRF token will competing each other, and it happen today in my office, the easy way to fix it is setting your cookies.php file

search some settings called path in cookies.php

    /*
    |--------------------------------------------------------------------------
    | Session Cookie Path
    |--------------------------------------------------------------------------
    |
    | The session cookie path determines the path for which the cookie will
    | be regarded as available. Typically, this will be the root path of
    | your application but you are free to change this when necessary.
    |
    */

    'path' => '/',

and change it to your app path like

'path' => '/someapp-1/'

or you can use .env too

thanks for reading, also thanks for this stackoverflow questions

https://stackoverflow.com/questions/68468526/is-it-possible-to-rename-the-xsrf-token-cookie-that-laravel-is-creating

Use .env files in vue vite

Muhamad Jamil — Sat, 08 Oct 2022 09:32:27 +0000

vite is a handy tools that provide many advantage, im very happy developing vue project with vite, thanks to Evan You.

lets get started,

lets make some .env files first in the root project and insert some key SOME_VARIABLE = value, now how to access it?

Vite exposes env variables on the special import.meta.env object.

as vite documentation said, we can access the env variable using import.meta.env so we access with import.meta.env.SOME_VARIABLE, lets do some console log

console.log(import.meta.env.SOME_VARIABLE) //undefined, why it undefined?

To prevent accidentally leaking env variables to the client, only variables prefixed with VITE_ are exposed to your Vite-processed code

vite only showing the variable with prefix VITE_, its very nice to prevent leaked data to client, so change your key to VITE_SOME_VARIABLE, now it can be viewed

vite also support mode, if you change your .env file into .env.development that file only used in development mode

and if you change to .env.production it only used in production mode.

thats all i know about using .env in vite, further reading https://vitejs.dev/guide/env-and-mode.html

Thanks for reading.

Deploying Vue apps in subdirectory

Muhamad Jamil — Thu, 15 Sep 2022 09:20:05 +0000

This take 6 hours for me to understand,

first you need to configure some file
1. vite.config.js

import { fileURLToPath, URL } from "url";

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

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [vue()],
    base: "/yourSubdirectory/",
    resolve: {
        alias: {
            "@": fileURLToPath(new URL("./src", import.meta.url)),
        },
    },
});

you need to add base configuration in your vite config, to make your asset file path relative to the root and the subdirectory.

2. index.js in router

    history: createWebHistory(`/subDirectory`),
    base: `/subDirectory`,

you need to add base configuration in the router so vue know where exactly your file, and the history to make vue save your subDirectory as a history route

3. .htaccess
this is the game begin

<IfModule mod_negotiation.c>
  Options -MultiViews
</IfModule>

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /subDirectory
RewriteRule ^subDirectory/index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /subDirectory/index.html [L]
</IfModule>

i cannot explain this section, so if you guys know please explain to me, i really appreciate it.

if you guys have same problem with me and have another method to resolve it, feel free to share.

thanks for reading.

Resolving problem when using Trix rich editor with tailwind

Muhamad Jamil — Wed, 13 Jul 2022 07:21:31 +0000

it takes so loong for me to realize that tailwind reset is overriding the trix style because trix using a html tag like heading or list, and those tag style has been reset with tailwind.

Btw what i do is make my own style to give back the default style especially for heading and list tag.

so in my index.css, i added this

/* Tailwind Override */
.trix-editor {
    width: 100%;
}

.trix-editor h1 {
    font-size: 1.25rem !important;
    line-height: 1.25rem !important;
    margin-bottom: 1rem;
    font-weight: 600;
}

.trix-editor a:not(.no-underline) {
    text-decoration: underline;
}

.trix-editor a:visited {
    color: green;
}

.trix-editor ul {
    list-style-type: disc;
    padding-left: 1rem;
}

.trix-editor ol {
    list-style-type: decimal;
    padding-left: 1rem;
}

.trix-editor pre {
    display: inline-block;
    width: 100%;
    vertical-align: top;
    font-family: monospace;
    font-size: 1.5em;
    padding: 0.5em;
    white-space: pre;
    background-color: #eee;
    overflow-x: auto;
}

.trix-editor blockquote {
    border: 0 solid #ccc;
    border-left-width: 0px;
    border-left-width: 0.3em;
    margin-left: 0.3em;
    padding-left: 0.6em;
}

and add trix-editor class to trix-editor tag

<trix-editor input="x" class="trix-editor"></trix-editor>

and many thanks for this github issue

Trix Editor

thanks for reading

Preview vue.js app in android

Muhamad Jamil — Mon, 11 Jul 2022 03:10:35 +0000

First you need to ensure that your device is in same network

in package.json file in your app, add this command

"host": "vite --host" or use your own name, im using host for command name. you can change the setting inside vite.config.js too with this setting

  server: {
    host: true
  }

vite will automatically use your ip as a server ip, then run the command with npm run host, and finally you can access your app in external device, just access it with {your ip}:{your app port} eg: 192.168.10.1:3000.

Thanks for this github issue

if you have another method feel free to discuss, thanks for reading

Eager load for getting role name in spatie/permissions

Muhamad Jamil — Thu, 07 Jul 2022 04:25:20 +0000

at first im using this method to show role name in blade view

        <td>
        @if(!empty($user->getRoleNames()))
            @foreach($user->getRoleNames() as $role)
                <label class="badge bg-primary">{{ $role }}</label>
            @endforeach
        @endif
        </td>

but when i see in clockwork, there are many query from role, yes its a n+1 problem

so i use eager load for this

in UserController i added this
$data = User::with(['roles']);

so when i query User table, roles table will join it

and in blade view i added this

@if(!empty($user->roles))
            @foreach($user->roles as $role)
                <label class="badge bg-primary">{{ $role->name }}</label>
            @endforeach
        @endif

if you have another way, feel free to discuss

generate unique slug with eloquent-sluggable package laravel 8

Muhamad Jamil — Sun, 03 Jul 2022 13:19:10 +0000

First install the package with composer composer require cviebrock/eloquent-sluggable

and simply put this code in your model

use Cviebrock\EloquentSluggable\Sluggable;

class Post extends Model
{
    use Sluggable;
    public function sluggable(): array
    {
        return [
            'slug' => [
                'source' => 'title'
            ]
        ];
    }
}

it will automatically use title as a slug

for more feature, maybe you want to read the documentations

thanks for reading, if you have a better method, feel free to discuss

My first time using docker for deploying static website

Muhamad Jamil — Thu, 09 Jun 2022 03:38:47 +0000

im using AWS EC2 for VPS, Ubuntu 20.04 for operating system, and nginx as a web server.

First we need to install the docker
maybe you want to read more in their documentation

or using my method, step by step install docker

apt -y update
apt -y install apt-transport-https ca-certificates curl gnupg-agent software-properties-common
'curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -
apt-key fingerprint 0EBFCD88
add-apt-repository "deb [arch=amd64] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable"
apt -y update
apt -y install docker-ce docker-ce-cli containerd.io

and for checking the docker running
systemctl status docker

after the docker installation, choose your static website that you want to deploy.

after that, create a Dockerfile

nano Dockerfile

inside the Dockerfile type this

# Choose the image
FROM nginx
# Remove the default file
RUN rm -rf /usr/share/nginx/html/*
# Copy and move your own website file to the nginx html folder
COPY ./{your directory website} /usr/share/nginx/html

its time to build your image
docker build -t {image name} .

for example
docker build -t theia .

and to check if your image build success
docker images

REPOSITORY   TAG       IMAGE ID       CREATED          SIZE
theia        latest    b8b7870c8621   24 minutes ago   143MB
nginx        latest    0e901e68141f   11 days ago      142MB

if you see your docker image, now were gonna run it

docker run -d(for running in background) -p 8080:80(choose your not used port) --name(name your container) (your image)

for example

docker run -d -p 8080:80 --name thalia theia

and finally you can access your website using your public ip and port

example mine is 54.183.74.95:8080

if you have another method, feel free to discuss.
thanks for reading, have a nice day

Using boxicons in Vue app, installing with npm

Muhamad Jamil — Tue, 07 Jun 2022 21:40:05 +0000

install the boxicons using npm
npm install boxicons --save
if you want to use it as a font, you need to import it in your main.js file, thanks to this github issue

use it as a font import "boxicons/css/boxicons.min.css";
use it as a web-component import "boxicons/dist/boxicons.js";

for usage, checkout the documentation https://boxicons.com/usage

if you have another way to use it, feel free to discuss

thanks for reading

Resolving problem with vue tailwind and postcss nesting

Muhamad Jamil — Mon, 30 May 2022 06:02:32 +0000

Previously I made an application with vue js and tailwind

because i'm used to using nesting feature in sass, i want to use it again in tailwind

quite simple, I just need to add the tailwindcss/nesting
plugin to postcss.config.js

here my postcss.config.js

module.exports = {
  plugins: {
    'postcss-import': {},
    'tailwindcss/nesting': {},
    tailwindcss: {},
    autoprefixer: {},
  },
}

everything was working fine until i found that vscode reads nesting and @apply as error

After hours of searching for an answer I can finally draw a conclusion.

first i need to change the lang style in vue to postcss,
<style lang="postcss">

the error warning is gone, but the syntax highlighting is not showing, after reading the same problem on github https://github.com/johnsoncodehk/volar/issues/765

and after read this comment
https://github.com/johnsoncodehk/volar/issues/765#issuecomment-989442125

i replaced the postcss extension with https://marketplace.visualstudio.com/items?itemName=cpylua.language-postcss

All done, error warning gone and the syntax highlighting comeback

if you guys have the same problem and have another method to solve, feel free to share

thanks for reading

Should we delete some content if in mobile device?

Muhamad Jamil — Sun, 29 May 2022 16:21:52 +0000

Previously I found a registration page design, and tried to make it in the form of a website

source: https://dribbble.com/shots/15252242-Sign-Up-Page/attachments/7002202?mode=media

but when in mobile device mode, I'm confused about whether I need content such as images or just adding a registration form and deleting the image

please give me some advice
would be love to start a discussion