DEV Community: maxiim3

Create a Fullstack app with Vue and Go (And Tailwindcss v4)

maxiim3 — Wed, 29 May 2024 17:29:22 +0000

This article is for new developers or people curious about Go, vue, or how to bulid a simple full stack application

About me

I am a front end developer exploring backend.
After trying PHP, Node.js, Rust... I felt in love with Golang for its simplicity, yet efficiency and performance.

The Stack

We gonna use Go and its light and easy library to build a server : Echo.
For the Front end we use Vue.js with Vite.
The client-side navigation is handled with Vue-router.
For the styling we gonna use the best tool out there : Tailwindcss. And "Cerise sur le gateau", we use the preview alpha version, v4, that should be released this summer.

Backend

Installation

Let's create a new directory and enter it

mkdir go-vue &&  cd $_

Now we create the new go module.
We add the necessecary dependencies : echo/v4 for the server, echo/v4/middleware to handle the CORS

go mod init github.com/<username>/go-vue
go get github.com/labstack/echo/v4
go get github.com/labstack/echo/v4/middleware

Then we can create a new go file touch main.go
Open ~~VIM~~ your favorite IDE.

First steps

Here are the basic : We create a new echo instance and start listening to port 8888

package main
import (
    "github.com/labstack/echo/v4"
)
func main() {
    e := echo.New()

    // Note that this must be the last statement of the main function
    e.Logger.Fatal(e.Start(":8888"))
}

Serving static files

Right now our projects looks like this

.
├── go.mod
├── go.sum
└── main.go

But we gonna create our Vue app inside ui/ which will contain the front-end code.
Using Vite we gonna build the Vue app into ui/dist and serve it from go.

So it's gonna look like this :

.
├── go.mod
├── go.sum
├── main.go
└── ui
    ├── dist
    │   ├── assets
    │   │   ├── index-D52G_CEl.css
    │   │   └── index-y7ffriUP.js
    │   └── index.html
    |-- ... vue files

We need to tell Echo that we are using static files.
The documentation is great btw...

package main
import (
    "github.com/labstack/echo/v4"
)
func main() {
    e := echo.New()


    // We declare that route "/" will serve our local "/ui/dirst" project path
    e.Static("/", "ui/dist")
    // We serve index.html from the build directory as the root route
    e.File("/", "ui/dist/index.html")

    e.Logger.Fatal(e.Start(":8888"))
}

Add an API

We gonna create a simple API in order to have some sort of communication between vue and go.
For simplicity we gonna use an object, but in a real app we would probably use a database.

We gonna have a Person object. We will send informations about it to Vue. And give the ability to Vue to update the Person's name.
So we need a Get and a Post request. We will also need to handle the CORS.

Create a Person

We use the Go struct and instanciate a person

type Person struct {
    Name  string `json:"name"`
    Age   uint8  `json:"age"`
    Email string `json:"email"`
}
//... inside main function
p := Person{
    Name:  "Nikola",
    Age:   37,
    Email: "nikola@tesla.genius",
}

It will later be transleted in Typescript as :

type Person = {
    name: string
    age: number
    email: string
}

GET a Person

We then send our person to the GET route /person

package main
import (
    "github.com/labstack/echo/v4"
)
func main() {
    e := echo.New()

    e.Static("/", "ui/dist")
    e.File("/", "ui/dist/index.html")

    // Create a Person
    p := Person{
        Name:  "Nikola",
        Age:   37,
        Email: "nikola@tesla.genius",
    }
    // Get Person on route "/person"
    e.GET("/person", func(c echo.Context) error {
        return c.JSON(202, p)
    })

    e.Logger.Fatal(e.Start(":8888"))
}

type Person struct {
    Name  string `json:"name"`
    Age   uint8  `json:"age"`
    Email string `json:"email"`
}

You see why Go + Echo is awesome ? So easy !

Update a Person's name

We use the POST request to get the data from the Front end via POST method and update our local instance.

We setup the model Vue (Typescript) is gonna send to the POST route /person

type PostPersonName = {
    name: string
}

Which translates in Go as

type PostPersonBody struct {
    Name string `json:"name"`
}

Here is the full code with the POST request and the Middleware to handle the CORS

package main
import (
    "encoding/json"
    "fmt"
    "io"
    "net/http"
    "github.com/labstack/echo/v4"
    "github.com/labstack/echo/v4/middleware"
    "github.com/labstack/gommon/log"
)
func main() {
    e := echo.New()
    e.Static("/", "ui/dist")
    e.File("/", "ui/dist/index.html")

    // We gonna face CORS issue since we are passing data between different apps.
    e.Use(middleware.CORSWithConfig(middleware.CORSConfig{
        AllowOrigins: []string{"http://localhost:8888", "http://localhost:5173"},
        AllowMethods: []string{http.MethodGet, http.MethodPut, http.MethodPost, http.MethodDelete},
    }))

    p := Person{
        Name:  "Nikola",
        Age:   37,
        Email: "nikola@tesla.genius",
    }
    e.GET("/person", func(c echo.Context) error {
        return c.JSON(202, p)
    })

    // Update Person's name
    e.POST("/person", func(c echo.Context) error {
        // Get the request
        r := c.Request()
        // Read the body
        b, err := io.ReadAll(r.Body)
        if err != nil {
            log.Error("error in POST", err)
            return c.JSON(http.StatusBadRequest, map[string]string{"error": "Invalid Body Request"})
        }
        n := PostPersonBody{
            Name: "default",
        }
        // equivalent of JSON.parse() in GO
        // By default Go passes arguments by value, meaning it creates a copy of the value, and a new pointer is created.
        // json.Unmarshall requires a reference (a pointer) to PostPersonBody and will update it internally.
        err = json.Unmarshal(b, &n)
        if err != nil {
            log.Error(err)
            return c.JSON(http.StatusBadRequest, map[string]string{"error": "Invalid JSON"})
        }
        // Debug purpose
        fmt.Println(n.Name)
        // Update local instance (db...)
        p.Name = n.Name
        return c.JSON(http.StatusAccepted, n)
    })
    e.Logger.Fatal(e.Start(":8888"))
}
type Person struct {
    Name  string `json:"name"`
    Age   uint8  `json:"age"`
    Email string `json:"email"`
}

At this point we can run go run ./main.go or go run ./ to lunch the server.

Note that any changes in the Go code requires to relunch the server.

Front end

Instalation

Let's install Vue.js using Vite.
For the router we will use vue-router.
For styling we will try the alpha version of the future Tailwind v4 release.

npm create vue@latest # we call the project `ui`
npm install vue-router@4
npm install tailwindcss@next @tailwindcss/vite@next

Then add the tailwind plugin to the vite.config.js which should also contain the vue plugin

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import tailwindcss from '@tailwindcss/vite'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(), 
    tailwindcss()
  ]
})

Creating the app

What's cool with Vue is that it is just a simple html with a js script entry point containing all the vue app.

The javascript will be injected inside the root html component.

When the project will be built, it will just compact the js and css but the principle will stay the same. making it easy for us to serve the html file from Go.

Note that we use Vue 3 with the composition API.

Adding components

Create two simple components for our pages: HomePage and AboutPage

./ui
├── index.html
├── src
│   ├── App.vue
│   ├── components
│   │   ├── AboutPage.vue
│   │   └── HomePage.vue
│   ├── main.ts
│   ├── style.css
│   └── # ..
└── # ..

About Page

<template>
    <h1>ABOUT</h1>
    <div>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Porro ipsam inventore corrupti. Ducimus, sunt corrupti?</p>
    </div>
</template>

<script lang="ts" setup></script>

Home Page

The Home page will fetch Person from the Go API. And is able to update it (via POST route we created earlier.

<template>
    <main class="flex flex-col justify-center items-center gap-8 py-12 px-8">

        <h1 class="text-3xl text-blue-500">Welcome to Home page</h1>

        <!-- Display Person's name or text -->
        <p>Form API : {{ data?.name || "Click the Button 👇" }}</p>
        <!-- Click the button to (re)fetch the data from the API -->
        <button class="p-2 bg-lime-600 text-whiet font-bold rounded-md" @click="fetchData">{{ data ? "Refresh" : "Get data" }}</button>

        <div class="flex flex-col gap-4">
            <!-- v-model binds the input to the reference "name". It is both a Getter and a Setter -->
            <input class="p-2 rounded-md" placeholder="no data.." type="text" v-model="name">
            <!-- Fire the Post Request to update the name -->
            <button class="p-2 bg-lime-600 text-whiet font-bold rounded-md" @click="update">Update Name</button>
        </div>
        <p>Name model : {{ name }}</p>
    </main>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

type Person = {
    name: string
    age: number
    email: string
}

type PostPersonName = {
    name: string
}

const data = ref<Person | null>(null)

const name = defineModel<string>("fetching..")

async function fetchData() {
    const prom = await fetch("http://localhost:8888/person")
    const res: Awaited<Person> = await prom.json()
    data.value = res
    name.value = res.name
}

async function update() {
    const data: PostPersonName = {
        name: name.value!
    }

    const resp = await fetch("http://localhost:8888/person", {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
            "Access-Control-Allow-Origin": "*",
        },
        body: JSON.stringify(data)
    })

    console.log(resp)
}

</script>

Root Component

We update the root component to use the RouterView Component in order to display the components based on the current url

<template>
  <nav class="w-full bg-slate-800 p-8">
    <ul>
      <li>
        <RouterLink to="/">Home</RouterLink>
      </li>
      <li>
        <RouterLink to="/about">About</RouterLink>
      </li>
    </ul>
  </nav>
  <RouterView />
</template>

<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router';

</script>

Registering the routes in the root component

Now we can create our router, register the routes and update the vue app configuration.

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import HomePage from './components/HomePage.vue'
import AboutPage from './components/AboutPage.vue'
import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router'

// Routes registration
const routes: RouteRecordRaw[] = [
  { path: '/', component: HomePage },
  { path: '/about', component: AboutPage },
]

// Create Router
const router = createRouter({
  history: createWebHistory(),
  routes,
})

// Create app
createApp(App) // Root Component
  .use(router) // Use Router
  .mount('#app') // Html root element

Run the app

You can check that everything works by launching the vite server with npm run dev

Compile the Full stack application

Build the Front end

To compile the application, we have to build the front end.

As we saw Go will source the path ui/dist: e.Static("/", "ui/dist")

Just run npm run build

Now we have this structure:

.
├── go.mod
├── go.sum
├── main.go
└── ui
    ├── README.md
    ├── dist
    │   ├── assets
    │   │   ├── index-D52G_CEl.css
    │   │   └── index-y7ffriUP.js
    │   ├── index.html
    │   └── vite.svg
    ├── index.html
    ├── package-lock.json
    ├── package.json
    ├── public
    │   └── vite.svg
    ├── src
    │   ├── App.vue
    │   ├── assets
    │   │   └── vue.svg
    │   ├── components
    │   │   ├── AboutPage.vue
    │   │   └── HomePage.vue
    │   ├── main.ts
    │   ├── style.css
    │   └── vite-env.d.ts
    ├── tsconfig.json
    ├── tsconfig.node.json
    └── vite.config.ts

Build the backend

To compile Go into a single binary just go build ./main.go.

But this will ouput main as the binary name, and we want to rename it go-vue.

To do so run : go build -o go-vue ./main.go

Now you can run ./go-vue And the server should be running on port 8888

I hop you liked the article. Please share it and add your thoughts in the comment section.

Mode sombre facile avec NextJS 13 et Tailwind

maxiim3 — Fri, 14 Apr 2023 20:34:28 +0000

🚀 Mode sombre facile avec NextJS 13 et Tailwind 🌗

NextJS - TailwindCSS - ModeSombre - React - TypeScript - next-themes

On suppose que vous maîtrisez déjà les bases de NextJS, React et Tailwind.

Récap'

Nous utilisons TypeScript dans cet exemple. Si vous n'êtes pas familier avec TypeScript, considérez ces explications sur le typage :

// Exemple de typage de variables : 
let myString: string = 'Hello, world!'; // sera toujours une variable de type string
let myNumber: number = 42; // sera toujours un nombre
let myBoolean: boolean = true; // sera true ou false

// Définition d'un schéma grâce à `type`
type Person = {
  nom: string;
  age: number;
  estSympa?: boolean; // `?` indique que ce n'est pas obligatoire
};

// Utilisation de mon schema Person pour typer un objet
const Marie: Person = {
  nom: 'marie',
  age: 47,
 estSympa: true, // Sympa la Marie
};
const Johny: Person = {
  nom: 'johny',
  age: 25,
estSympa: false // désolé Johny
};

Installation

... 🐑 Revenons-en à nos moutons...

Commencez par créer votre projet en utilisant

create-next-app@13 --tailwind NOM-DU-PROJET

Dans cet exemple, on n'utilise pas src ni pages, mais app pour notre router.

On a installer Next Themes:

npm install next-themes

🎨 Configurer Tailwind avec next-theme 🎨

Comment ça fonctionne ?

Next-themes va ajouter[data-theme="dark"] / [data-theme="light"]au documentElement aka html tag.

Il faut indiquer à Tailwind d'observer cette donnée.

Configurer Tailwind

Dans tailwind.config.js, ajoutez darkMode:['class', '[data-theme="dark"]'].

Le fichier de configuration devrait ressembler à quelque chose comme ça :

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ['class', '[data-theme="dark"]'],
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
    './app/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      backgroundImage: {
        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
        'gradient-conic':
          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
      },
    },
  },
  plugins: [],
}

🌐 Ajouter le Provider 🌐

On va devoir créer un provider pour englober tous notre code. Next-themes va automatiquement gérer tout le code contenu dans ce provider.

Comme NextJs13 est server-first, on va extraire un composant Provider qui servira de provider côté client.

Créez un fichierProviders.tsx, on le crée dans components mais vous pouvez le mettree où bon vous semble.

Tout d'abord, ajoutez 'use client' tout en haut du fichier,

Puis importez le ThemeProvider de 'next-themes'

'use client'

import React from "react"
import { ThemeProvider } from 'next-themes' // importer le provider


//{ children } : {children: React.ReactNode}
// on destructure props pour extraire children, puis indique le typage de props
function Providers({ children } : {children: React.ReactNode}) {
    return <ThemeProvider>{children}</ThemeProvider>
}

export default Providers

On n'a plus qu'à wrapper les children de notre RootLayout avec ce provider.

On ajoute quelques classes Tailwind pour s'assurer d'avoir du style à tester.

import "./globals.css"
import React from "react"
import Providers from "@/components/Providers"

export const metadata = {
    title: "Create Next App",
    description: "Generated by create next app",
} // les Metadatas sont ajoutés ainsi depuis NextJS 13

export default function RootLayout({children}: {children: React.ReactNode}) {
    return (
        <html lang="en">
            <body className="bg-gray-100 dark:bg-slate-800">
                <Providers>{children}</Providers>
            </body>
        </html>
    )
}

Il faut maintenant que l'on ajoute un bouton pour switcher de thème

🔘 Toggle theme 🔘

Dans @app/page, soit notre home page, on va importer le hook de next-themes, et créer notre bouton qui aura une methode pour switcher l'état de theme.
On peut également ajouter un titre pour s'assurer du changement de couleur :

import { useTheme } from 'next-themes'

export default () => {
const { theme, setTheme } = useTheme()
return (
    <main>>
            <header className="fixed top-0 right-0 p-6">
                  <button
                    className="text-amber-500 dark:text-sky-200 text-4xl"
                    onClick={() => setTheme(theme === "light" ? "dark" : "light")}>
                    {theme === "light" ? <ReactIcons.Sun /> : <ReactIcons.Moon />}
                  </button>
        </header>
        <h1 className="text-4xl text-dark dark:text-white">Ma couleur change</h1>
    </main>
    )
}

À ce point, le bouton devrait fonctionner et permettre de basculer entre les thèmes clair et sombre. 🌞🌚

Et voilà ! Vous avez maintenant implémenté un mode sombre avec NextJS 13 et Tailwind en utilisant next-themes.
Vous pouvez maintenant explorer d'autres options de personnalisation et adapter le thème à vos préférences.
N'hésitez pas à expérimenter avec différentes couleurs et styles pour créer une expérience utilisateur unique et agréable. 🎉🚀
N'hésitez pas non plus à partager votre expérience ou vos astuces en commentaire 👇.

Créer des composants React à la volée

maxiim3 — Fri, 07 Apr 2023 11:29:42 +0000

⚛️ Le code sur Github

Table des matières

Créer des composants React à la volée
- Motivations
- 1. Créer le fichier
- 2. Le script
- 3. Enregistrez le fichier
- 4. Utilisation

Motivations

Voici comment j'organise mes composants :

composant /
|
 --- MyButton/
     |
      --- myButton.module.scss
     |
      --- MyButton.tsx
|
 --- MyArticle/
     |
      --- myArticle.module.scss
     |
      --- MyArticle.tsx

Pour le composant MyButton, il faut ensuite 'relier' le module et le composant :

TypeScript

// MyButton.tsx
import styles from "./myButton.module.scss"

type MyButtonProps = {label:string}

const MyButton = (props: MyButtonProps) => {
    const {label} = props
    return (<button className={styles.btn}>{label}</button>)
}

export default MyFirstAuto

// myButton.module.scss
.btn{
 // styles...
}

Certes on peut créer des files templates mais il s'agit toujours de créer :

le dossier,
puis de nommer les fichiers,
importer le module dans le composant
ajouter la classe...

Des étapes qui peuvent s'avérer répétitives et faire perdre beaucoup de temps. ⌛

1. Créer le fichier

Créez un nouveau fichier appelé create-component.sh et ouvrez-le dans votre éditeur de texte préféré.

 touch create-component.sh

2. Le script

Ouvrez le fichier avec open create-component.sh et
ajoutez à ce fichier:

 #!/bin/bash

if [ $# -ne 2 ]; then
    echo "Usage: create-component <ComponentName> <path>"
    exit 1
fi

component_name="$1"
path="$2"

# Convert to PascalCase and camelCase
component_name_pascal="$(tr a-z A-Z <<<"${component_name:0:1}")${component_name:1}"
component_name_camel="$(tr A-Z a-z <<<"${component_name:0:1}")${component_name:1}"

# Create directory
component_dir="${path}/${component_name_pascal}"
mkdir -p "${component_dir}"

# Create ComponentName.tsx
tsx_file="${component_dir}/${component_name_pascal}.tsx"
cat > "${tsx_file}" <<- EOM
import styles from "./${component_name_camel}.module.scss"

type ${component_name_pascal}Props = {}

const ${component_name_pascal} = (props: ${component_name_pascal}Props) => {
    const {} = props
    return (<div className={styles.component}></div>)
}

export default ${component_name_pascal}
EOM

# Create componentName.module.scss
scss_file="${component_dir}/${component_name_camel}.module.scss"
cat > "${scss_file}" <<- EOM
.component {
}
EOM

echo "Component '${component_name_pascal}' created at '${component_dir}'"

3. Enregistrez le Enregistrer le fichier

Enregistrer le fichier et rendez-le exécutable:

chmod +x create-component.sh

Puis, déplacez le script dans un répertoire de votre PATH, par exemple, /usr/local/bin, afin de pouvoir l'exécuter de n'importe où :

sudo mv create-component.sh /usr/local/bin/create-component

4. Utilisation

Maintenant, vous pouvez utiliser la commande create-component [componentName] [path] pour créer vos composants. Par exemple :

create-component BasedButton /path/to/components

Cela créera un répertoire BasedButton dans le chemin spécifié, ainsi que les fichiers BasedButton.tsx et basedButton.module.scss.

🎉

Vous aurez sans doute besoin de relancer votre terminal.
Lorsque l'on veut créer un composant Button dans src/components/[ici] , il n'y a plus qu'à entrer la commande

create-component Button ./src/components/

Hop! Le tour est joué! 😎

Comment Publier Rapidement un Projet sur GitHub

maxiim3 — Tue, 04 Apr 2023 11:28:59 +0000

Comment Publier Rapidement un Projet sur GitHub ?

Retrouvez cet article en format video sur youtube

GitHub est une plateforme de collaboration et de partage de code largement utilisée par les développeurs du monde entier. Dans cet article, nous allons vous montrer comment publier rapidement un projet sur GitHub en quelques étapes simples.

Créer un repo rapidement depuis Github.com:

Tout d'abord, assurez-vous d'avoir un compte GitHub.

Si vous n'en avez pas encore, rendez-vous sur https://github.com/join pour en créer un gratuitement.

Pro Tips :

Une fois connecté à votre compte GitHub, vous pouvez utiliser le raccourci https://github.com/new pour accéder directement à la page de création d'un nouveau dépôt.

Ensuite il ne vous reste plus qu'à initialiser voter projet via le terminal en suivant les instructions

echo "# [VOTRE_PROJET]" >> README.md
git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin git@github.com:[USER]/[VOTRE_PROJET].git
git push -u origin main

Créer un repo rapidement depuis un IDE IDEA:

Si vous utilisez un IDE IDEA - IntelliJ, WebStorm, ou PHPStorm comme moi - , vous pouvez alors créer un repo et publier un projet en littéralement 3 clics:

Votre projet ouvert, ouvrez un nouveau terminal (⌥ F12) et assurez-vous d'avoir initialisé Git (Sinon la fenêtre Git n'apparaîtra pas.)

git init

Rendez-vous dans le menu Git > GitHub > Share Project on GitHub.

Une fenêtre va s'ouvrir. Entrez le nom de votre repo
cliquez sur Share et sélectionnez les fichiers qui doivent être envoyés sur le repo Github.
Validez.
💥 C'est tout !

Maxime Tamburrini
yt/@maxwebstudio
github/maxiim3