Cursos de páginas web

Curso de React | 26. Compilar (build o publicar) una aplicación de React

Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.

El siguiente comando crea en la carpeta build un compilado de nuestra aplicación.

npm run build

Si la aplicación no esta en la raíz del servidor…

Debemos definir su ruta dándole valor a la propiedad base dentro del fichero vite.config.js:

export default defineConfig({
  plugins: [react()],
  base: '/ruta-en-produccion'
})

Si la aplicación no esta en la raíz del servidor y estamos usando react router…

Podemos definir una variable de entorno, por ejemplo VITE_PUBLIC_URL para la ruta base:

.env
VITE_PUBLIC_URL = "/amor"
Curso de React | Compilar (build o publicar) una aplicación de React 1

Será necesario además asignar este valor al atributo basename:

<BrowserRouter basename={import.meta.env.VITE_PUBLIC_URL} >
vite.config.js
import { defineConfig, loadEnv } from 'vite'
import react from '@vitejs/plugin-react'


export default ({ mode }) => {
  const env = { ...process.env, ...loadEnv(mode, process.cwd()) };

  console.log(env)

  const config = {
    plugins: [react()],
    base: env.VITE_PUBLIC_URL,
  }
  return defineConfig(config);
};

Configuración del fichero .htaccess para evitar errores 404 al refrescar la página

Guardaremos un fichero .htaccess en la carpeta de la aplicación de React que estamos desarrollando.

# Front-controller (exclude static resources)
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f 
RewriteRule . index.html [L]

Subir a netlify

1. Instalaremos netlify en nuestro sistema operativo:

npm i -g netlify-cli

2. Haremos un build de nuestra aplicación.

3. Debemos borrar la carpeta en la que se hace el build de nuestro .gitignore.

4. Subimos nuestro código a un repositorio de github.

5. Accederemos a la página web de netlify y crearemos un nuevo sitio web. En el proceso de creación vincularemos el sitio al repositorio de github donde debemos hacer subido los datos. Durante la subida (y en las opciones de configuración que aparecerán posteriormente) podimos acceder a configuración avanzada para configurar las variables de entorno.

A tener en cuenta

La aplicación se subirá a un subdominio random. Ten en cuenta que es posible cambiar el nombre de este subdomino desde el panel de administración de netifly.

Ten en cuenta que en el menú netifly pudes comprar un dominio para vincularlo a tu proyecto. Puedes hacerlo desde el menú Domain management.

Compilar aplicación móvil

Hay varias formas de obtener una aplicación móvil a partir de una aplicación web. Nosotros vamos a usar capacitor.js.

1. Abrimos la terminal desde la carpeta del proyecto web del cual queremos obtener una aplicación móvil.

2. Instalamos capacitor:

npm install @capacitor/cli --save-dev

3. Lo inicializamos

npx cap init # Se nos preguntará por lo carpeta de la que queremos extraer el código. Por defecto esta www, aunque generalmente será la carpeta dist

4. Instalamos el core el las librerías de android e ios.

npm install @capacitor/core @capacitor/ios @capacitor/android
npx cap add android
npx cap add ios

5. Compilamos la aplicación web como siempre hacemos:

npm run vite build
... o ...
npm run astro build

6. Añadimos el código recien compilado a las carpetas de las plataformas añadidas al desarrollo (android e ios)

npx cap sync

7. Abrimos la carpeta de android con el android studio y compilamos desde ahí la aplicación.

Convertir en progessive webapp

La experiencia completa de pwa (posibilidad de instalar en el móvil y el ordenador, etc) sólo la tendremos cuando subamos nuestra app a producción en un servidor real.

1. Para que la aplicación pueda instalarse en el teléfono móvil, será necesario que la url sea segura (comience por https).

2. Instalamos el siguiente plugin:

npm i vite-plugin-pwa

3. Añadimos el siguiente código al fichero vite.config.js. Ten en cuenta que si alguna de las siguientes cosas falla, no se verán las opciones de instalación de la app:

  • Si la ruta de las imágenes es incorrecta.
  • Si el tamaño de la imagen no se corresponde con el size especificado.
  • Si la imagen no tiene un mínimo de 144×144 px de tramaño

Para visualizar los posibles errores que pudiese tener nuestra progressive web app, podemos ir a la pestaña Application de chrome.

Curso de React | Compilar (build o publicar) una aplicación de React 2

Recuerda que si subes la app en una subcarpeta del servidor, habrá que reflejarlo en la ruta.

import { VitePWA } from 'vite-plugin-pwa';

...
plugins: [
    react(),
    VitePWA({
      registerType: 'autoUpdate',
      globPatterns: [
          '**/*.{js,css,svg,png,jpg,jpeg,gif,webp,woff,woff2,ttf,eot,ico}',
      ],
      // Con la siguiente opción activada, se verá el botón de instalación de la PWA cuando estemos en modo desarrollo
      devOptions: {
        enabled: true
      },
      // Con la siguiente opción activada, la aplicación del cliente se actualizará cuando la refresquemos tras haber hecho una nueva subida al servidor web
      workbox: {
            navigateFallbackDenylist: [/asset-manifest\.json$/, /index\.html$/],
      },
      includeAssets: ['favicon.ico'],
      manifest: {
        name: 'My App',
        short_name: 'My App',
        description: 'My App description',
        icons: [
          {
            src: '/icon-192x192.png',
            sizes: '192x192',
            type: 'image/png'
          },
          {
            src: '/icon-512x512.png',
            sizes: '512x512',
            type: 'image/png'
          }
        ]
      }
    })
]

Variables de entorno en el index.html

<link rel="icon" type="image/svg+xml" href="%VITE_SELECTED_ROUTINE%/icon-64x64.png" />

Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.