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.

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 Copy

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 Copy

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

1. Instalamos capacitor:

npm install @capacitor/cli --save-dev

2. Lo inicializamos

npx cap init

3. 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

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

vite build

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

npx cap sync

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

Convertir en progessive webapp

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:

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

...
plugins: [
    react(),
    VitePWA({
      registerType: 'autoUpdate',
      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" />