Utilizando Vue en Astilectron

Ya vimos en un post anterior como instalar go-astilectron sin ningún framework o libreria javascript y hacer el programa más básico que podemos hacer, esta vez veremos como hacer para utilizar VUE.js en modo dev.

Cuando me refiero a modo dev es que utilizaremos npm run dev sin necesidad de ir a consola para correrlo.

Instalando VUE.js

Lo primero que tenemos que hacer es instalar vue.js, obviamente tendríamos que instalar Node primero.

En este caso estoy utilizaré vue3 asi que utilizaremos la herramienta de scaffolding.

Algo que debemos de tener en cuenta es de correr el siguiente comando en la carpeta src de go

npm init vue@latest

en mi caso instalaré mi proyecto Vue, pero no utilizaré ninguna de las opciones que nos pregunta instalar, por tanto, a todas las preguntas pondré que No

una vez termine el scaffolding de nuestro proyecto deberemos correr

npm install

También podemos probar la instalación corriendo y yendo al localhost especificado

npm run dev

vite v2.9.12 dev server running at:

  > Local: http://localhost:3000/
  > Network: use `--host` to expose

  ready in 1133ms.

La información del host donde correrá será relevante e en nuestra parte de go.

Astilectron

Dentro de la carpeta de nuestro proyecto crearemos nuestro main.go este archivo será el responsable de cargar nuestro proyecto Vue en una ventana. No tocaré como instalar Astilectron, ya que ya lo tocamos en primer programa en go-astilectron.

Lo mínimo que necesitamos para correr nuestra app sería lo siguiente:

package main

import (
	"bytes"
	"fmt"
	"log"
	"os"
	"os/exec"

	"github.com/asticode/go-astikit"
	"github.com/asticode/go-astilectron"
)

func main() {
	var a, _ = astilectron.New(log.New(os.Stderr, "", 0), astilectron.Options{
		AppName: "AE",
	})
	defer a.Close()

	// Start astilectron
	a.Start()
	nwin(a)
	// Blocking pattern
	a.Wait()
}

func nwin(parent *astilectron.Astilectron) {
	var w, _ = parent.NewWindow("http://localhost:3000/", &astilectron.WindowOptions{
		Center: astikit.BoolPtr(true),
		Height: astikit.IntPtr(600),
		Width:  astikit.IntPtr(600),
	})
	w.Create()
}

Ya generando nuestro exe o archivo de ejecución con go debería funcionar nuestra app en modo dev, aunque tendríamos que correr npm run dev cada vez que queramos utilizarla.

¿Podemos Automatizar esto?

Claro que si tendríamos que hacer que nuestro archivo, ejecute comandos de consola y es por eso que en import esta «os/exec».

Automatizando el comando | npm run dev | en nuestro proyecto

Para automatizar npm run dev deberemos hacer una función que se encargue de ejecutar el comando, también hemos de tener en cuenta de que deberíamos utilizar go routines porque debemos dejar que este se ejecute por separado si no no nos funcionara.

func runDevEnv() {
	var stderr bytes.Buffer
	cmd := exec.Command("npm", "run", "dev")
	cmd.Stderr = &stderr
	err := cmd.Run()
	if err != nil {
		fmt.Println("Error in cmd | npm run dev | command")
		fmt.Println(err.Error())
		fmt.Println(fmt.Sprint(err) + ": " + stderr.String())
		log.Fatal(err)

	}
}

Cuando hagamos nuestro main por completo nos debería quedar algo como lo siguiente:

package main

import (
	"bytes"
	"fmt"
	"log"
	"os"
	"os/exec"

	"github.com/asticode/go-astikit"
	"github.com/asticode/go-astilectron"
)

func main() {
	go runDevEnv()
	var a, _ = astilectron.New(log.New(os.Stderr, "", 0), astilectron.Options{
		AppName: "AE",
	})
	defer a.Close()

	// Start astilectron
	a.Start()
	nwin(a)
	// Blocking pattern
	a.Wait()
}

func nwin(parent *astilectron.Astilectron) {
	var w, _ = parent.NewWindow("http://localhost:3000/", &astilectron.WindowOptions{
		Center: astikit.BoolPtr(true),
		Height: astikit.IntPtr(600),
		Width:  astikit.IntPtr(600),
	})
	w.Create()
}
func runDevEnv() {
	var stderr bytes.Buffer
	cmd := exec.Command("npm", "run", "dev")
	cmd.Stderr = &stderr
	err := cmd.Run()
	if err != nil {
		fmt.Println("Error in cmd | npm run dev | command")
		fmt.Println(err.Error())
		fmt.Println(fmt.Sprint(err) + ": " + stderr.String())
		log.Fatal(err)

	}
}

Ahora cuando generemos nuestro archivo de ejecución y lo corramos nos debería dar el clásico cartel de VUE.js de cuando creamos un nuevo proyecto.

Bueno, espero que el post te sea de utilidad y nos veamos en un nuevo post en el futuro.

Caso de que no funcione o nuestra ventana quede en blanco

Tenga en cuenta que en el tutorial di por hecho de que el puerto es 3000 porque estamos utilizando Vite, esto no siempre tiene que ser así. Puede que el puerto haya sido utilizado por otro server y que Vite esté tomando otro puerto en este caso lo más conveniente es que utilices el puerto que esté utilizando vite cuando corremos npm run dev.

En caso que quieras especificar el puerto que usa vite puedes hacerlo en vite.config.js

Un ejemplo de vite.config.js:

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'

// https://vitejs.dev/config/
const path = require('path')

export default defineConfig({
	server: {
		port: 3000,
	},
  plugins: [vue(), vueJsx()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
      '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
    }
  }
})