• ¡Obtenga la seguridad de la aplicación de la manera correcta! Detectar, proteger, monitorear, acelerar y más ...
  • La implementación de aplicaciones frontend no es una gran cosa hoy en día. Podemos implementar un sitio en minutos con tecnologías modernas y plataformas de alojamiento. Existen muchas plataformas de alojamiento. Pero estamos interesados ​​en Netlify para este artículo.

    Implementemos nuestra aplicación frontend para Netlify.

    Frontend Applications

    Hay diferentes tipos de bibliotecas y marcos frontend como Reaccionar, Vue, Angular, etc., y la buena noticia es que todos usan el mismo empaquetador de paquetes. La implementación de todas las aplicaciones frontend compiladas con diferentes bibliotecas y marcos es similar. Entonces, estamos listos para usar cualquiera de esas bibliotecas y marcos.

    También podemos crear aplicaciones frontend sin bibliotecas ni marcos. Ésta es la forma tradicional de crear aplicaciones frontend alguna vez. Pero ahora cambia mucho. Entonces, podemos construir aplicaciones frontend de diferentes maneras. Aunque, el proceso de implementación es el mismo para todos esos diferentes tipos de aplicaciones frontend.

    Veremos desplegar uno aplicación de front-end construido con una biblioteca y otra sin biblioteca ni marco. Construyamos aplicaciones frontend mínimas para la implementación usando ReaccionarNatural JavaScript.

    Preparar

    Crearemos aplicaciones simples de React y JavaScript para la demostración de implementación. Usted los crea también para seguirlos. O, si ya ha tenido aplicaciones frontend, pase a la sección de implementación.

    Debemos recordar que el punto de entrada de cualquier aplicación frontend debe ser index.html mientras se despliega a Netlify.

    Si hemos creado aplicaciones utilizando cualquier biblioteca o marco, no tenemos que preocuparnos por eso. De forma predeterminada, las bibliotecas y los marcos crean index.html archivo en el proceso de construcción para nosotros. Pero, cuando tenemos aplicaciones JavaScript simples, necesitamos crear una index.html archivo como la entrada para nuestra aplicación.

    Reaccionar aplicación

    Ejecute el siguiente comando para crear una aplicación React.

    npx create-react-app demo

    Puede actualizar la aplicación como desee antes de implementarla. Acabo de actualizar una línea de texto en la página de inicio. Aunque no importa :).

    Aplicación JavaScript simple

    Siga los pasos a continuación para crear una aplicación JavaScript simple.

    • Crea una carpeta llamada manifestación.
    • Crea tres archivos llamados index.html, styles.cssguión.js.
    • Aquí, index.html es el punto de entrada para nuestra aplicación.

    Saca tu creatividad y actualiza la aplicación. Solo estoy agregando cosas simples a la aplicación.

    Deploying

    En cuanto a la implementación de aplicaciones frontend en Netlify, tenemos dos opciones. Podemos implementar aplicaciones directamente desde GitHub, GitLab, BitBucket, etc., a Netlify. O bien podemos implementar usando el Netlify CLI (interfaz de línea de comandos). No es obligatorio conocerlos todos para implementar nuestras aplicaciones. Pero son buenas las diferentes opciones que tenemos para la implementación.

    Exploremos cada uno de ellos uno por uno.

    GitHub

    Estamos usando GitHub para alojar nuestro código. No es necesario utilizarlo, ya que no es obligatorio. Puede utilizar otras plataformas que desee.

    Hay dos tipos de aplicaciones que podemos implementar. Pero el proceso parece similar para ambos. Aunque les mostraré los dos. Hay principalmente dos pasos en él. Ellos son

    • Envía el código a GitHub.
    • Implemente la aplicación desde GitHub usando Netlify.

    La primera parte es común para ambos Reaccionar JavaScript aplicaciones. Comencemos el proceso de implementación con el primer paso.

    Suponemos que no ha tenido su código en GitHub. Si tiene su código en GitHub, puede omitir la parte del código de inserción. Necesitas git herramienta. Si no tienes git instalado en su máquina, debe instalarlo antes de continuar.

    # 1. Enviar código a GitHub

    • Vaya a su cuenta de GitHub y cree un repositorio llamado manifestación.

    Creando repositorio de GitHub

    • Puede ver el repositorio de la siguiente manera una vez creado.

    Repositorio GitHub

    Ahora, tenemos que enviar nuestro código al repositorio que hemos creado anteriormente. Para enviar el código, puede seguir los comandos dados en el repositorio o debajo de los comandos.

    • Terminal abierto o cmd.
    • Vaya al directorio de su proyecto.
    • Inicializa el git con git init
    • Agregue los cambios a git local git add .
    • Confirma los cambios con un mensaje git commit -m 'Completed application'
    • Conecte el repositorio remoto con nuestro repositorio local git remote add origin 'your_repo_path'. Reemplazar your_repo_path con su repositorio remoto. Puedes encontrarlo en el repositorio de manera similar al mío. [email protected]:hafeezulkareem/demo.git
    • Ahora, presione el código git push -u origin main
    • Eso es; hemos enviado nuestro código a GitHub.

    Puede ver el código de la siguiente manera en su repositorio.

    Código del repositorio de GitHub

    Hemos terminado con el primer paso de enviar nuestro código a GitHub. Si está desplegando una llanura JavaScript aplicación, entonces su código puede tener el siguiente aspecto.

    Repositorio de JavaScript

    Pasemos al siguiente paso e implementemos nuestra aplicación en Netlify.

    # 2. Implementar código de GitHub en Netlify

    Si no tiene una cuenta en Netlify, cree una.

    • Vaya a la Netlify .
    • Ingrese a su cuenta.
    • Puedes ver un botón llamado Nuevo sitio de Git, como se muestra a continuación.

    Botón de nuevo sitio de Netlify

    • Haga clic en el botón para comenzar a implementar.
    • Navegará a la página de implementación que se ve de la siguiente manera.

    Página de implementación de Netlify

    • Puede diferentes plataformas de alojamiento de código en la página. Estamos usando GitHub. Entonces, haz clic en él.
    • Se abrirá una nueva ventana para iniciar sesión en nuestra cuenta de GitHub de la siguiente manera.

    Autenticación de Netlify GitHub

    • Inicie sesión en su cuenta de GitHub para obtener la autorización de Netlify.
    • Una vez que inicie sesión en su cuenta de GitHub, la ventana se cerrará diciendo Autorizado.
    • Ahora, busque el nombre de su repositorio en la barra de búsqueda dada.

    Repositorio de búsqueda de Netlify

    • Cuando busque el repositorio, no aparecerá porque no le dimos a nuestro repositorio acceso a Netlify. Verás un botón llamado Configurar Netlify en GitHub.

    Configuración del repositorio

    • Haga clic en el botón e ingrese la contraseña de su cuenta de GitHub para confirmar el acceso.

    Confirmar acceso a GitHub

    • Navegará a una página de acceso que se ve de la siguiente manera.

    Página de acceso a Netlify GitHub

    • Desplácese hacia abajo y verá una sección llamada Acceso al repositorio.

    Acceso al repositorio

    • Hay dos opciones. Podemos dar acceso a todos nuestros repositorios o algunos de ellos que lo requieran. Es mejor dar acceso a los repositorios que estamos implementando y no a todos.
    • Seleccione el botón Seleccionar solo repositorios opción de la siguiente manera.

    Seleccione la opción de repositorio

    • Haga clic en el menú desplegable a continuación y busque el repositorio que desea implementar. Selecciónelo.

    Repositorio seleccionado

    • Clickea en el Ahorra 
    • Redirigirá a Netlify Implementar la página. Y puedes ver el nuevo repositorio.

    Implementación del repositorio

    • Haga clic en el repositorio.
    • Mostrará diferentes detalles como una rama para implementar, comando para instalar paquetes, etc.

    Detalles del repositorio

    • Si tiene el código completo en una rama diferente que no sea dominar, actualícelo seleccionando la rama en el menú desplegable.
    • Finalmente, haga clic en Implementar sitio botón. Te redirigirá al panel de control.
    • Llevará algún tiempo implementar el sitio.

    Progreso de la implementación del sitio

    • Verá el sitio publicado una vez que esté implementado.

    Sitio publicado

    Eso es.

    Hemos implementado con éxito nuestro sitio en Netlify. Puede hacer clic en la URL del sitio para verlo en vivo.

    URL del sitio de demostración

    Demo en vivo

    Podemos actualizar la configuración del sitio y del dominio como queramos. Pero no lo cubriremos aquí, ya que es otro tema completo del que hablar. A continuación se muestra la aplicación de JavaScript simple después de la implementación.

    Demo en vivo

    No hay diferencia en el proceso de implementación. Pero recuerde no olvidarse del punto de entrada de la aplicación, es decir, index.html.

    Ahora es el momento de conocer otro método para implementar nuestra aplicación frontend.

    # 3. Implementar código usando Netlify CLI

    La CLI de Netlify es una interfaz de línea de comandos para implementar aplicaciones frontend desde la terminal o la línea de comandos. Es útil cuando no desea seguir algunos pasos adicionales (método anterior). Al igual que el método anterior, podemos implementar Reaccionar (cualquier biblioteca o marco) o JavaScript aplicaciones.

    Puede obtener la documentación completa de CLI de Netlify aquí. Pero no es necesario implementar una aplicación. Puede consultarlo cuando vaya al nivel avanzado.

    Veamos cómo implementar usando Netlify CLI.

    En primer lugar, tenemos que instalarlo en nuestra máquina. Está disponible como paquete de nodo. Entonces, podemos instalarlo usando el npm. Instalemos usando el siguiente comando.

    npm install netlify-cli -g

    La bandera -g es instalar el paquete globalmente para que podamos acceder a él desde cualquier lugar. Verá algo similar a la siguiente imagen.

    Instalación de CLI de Netlify

    Veamos los pasos para implementar Reaccionar y claro JavaScript aplicaciones que utilizan Netlify CLI.

    • Ejecute el comando de compilación de la aplicación React (o cualquier otra biblioteca o marco). No necesitamos ejecutar ningún comando en el caso de una aplicación JavaScript simple.
    npm run build
    • El comando de compilación puede variar según la biblioteca o el marco que esté utilizando.
    • Verá una carpeta de compilación de la siguiente manera.

    Crear

    • Cambie su directorio a build carpeta en el caso de la aplicación React o carpeta del proyecto en el caso de la aplicación JavaScript.

    Reaccionar Construir

    Aplicación JavaScript simple

    • Antes de continuar con los siguientes pasos, debemos crear un Netlify cuenta. Ir Netlify y cree una cuenta y continúe con los siguientes pasos.
    • Ahora, debemos iniciar sesión con la CLI. Ejecutemos el siguiente comando para iniciar sesión.
    netlify login
    • El comando anterior abrirá una nueva pestaña en el navegador predeterminado para iniciar sesión en la cuenta de Netlify. Lo llevará al sitio de Netlify.
    • Ingrese sus credenciales e inicie sesión. Autorizar la CLI después de iniciar sesión.

    Autorización de CLI de Netlify

    • Clickea en el Autorizar para autenticarse. Verá un mensaje de éxito después de él.

    Éxito de autorización de CLI de Netlify

    Éxito de autorización de CLI de Netlify

    • Ahora es el momento de implementar nuestra aplicación. Ejecute el siguiente comando de implementación.
    netlify deploy
    • Le pedirá que elija el sitio existente o cree uno nuevo. Elija (use sus flechas hacia arriba y hacia abajo) Crear y configurar un sitio nuevo y golpear Entrar.

    Implementación de CLI de Netlify: crear

    •  Entonces se mostrará Equipos para elegir, use sus flechas para seleccionar y presione Entrar.

    Equipo de implementación de CLI de Netlify

    • Ahora, puede ingresar el subdominio de su sitio. Sin embargo, no es obligatorio. Netlify elegirá uno al azar para nosotros si lo dejamos. Podemos cambiarlo más tarde si queremos. Lo dejo en blanco por ahora.

    Subdominio de implementación de CLI de Netlify

    • Nos pedirá que ingresemos al directorio que queremos implementar. Ya hemos navegado al directorio de destino. Vamos a golpear Entrar. También puede ingresar a otros directorios. Pero no es sencillo. Por lo tanto, es mejor navegar primero al directorio de destino y luego implementar.

    Directorio de implementación de CLI de Netlify

    • Implementará nuestro sitio para un borrador de URL de la siguiente manera.

    Borrador de implementación de CLI de Netlify

    • Puede verificar su sitio en el borrador de la URL y asegurarse de que todo esté correcto.
    • Después de verificar el sitio, podemos implementarlo en producción usando el siguiente comando.
    netlify deploy --prod

    Producción de implementación de CLI de Netlify

    • Solo le pedirá el directorio. Ingrese al directorio. Si estamos en el mismo directorio, simplemente presione Entrar.
    • Eso es. Nuestro despliegue del sitio está completo. Puede visitar el sitio para comprobarlo.

    Producción de implementación de CLI de Netlify

    • Y aqui esta el resultado.

    Demo en vivo

    Hemos terminado con la implementación de nuestro sitio en Netlify usando CLI de Netlify. Puede actualizar la configuración del sitio en su panel de Netlify.

    Conclusión

    ¡Uf! Es largo. No necesita ninguna otra guía para implementar su aplicación frontend en Netlify después de leer esto por completo.

    Hay dos métodos para implementar nuestra aplicación en Netlify. ¿Cuál seguir? Existe una ligera ventaja de utilizar el primer método. Netlify actualizará la compilación cada vez que enviemos un nuevo código al repositorio de nuestro sitio. Pero, en el caso del método CLI, tenemos que hacerlo manualmente.

    Siempre adoptamos un método sobre los demás en función de las situaciones en las que nos encontremos. De todos modos, ya conoce ambos métodos de implementación. Entonces, no tenemos que preocuparnos por el método. Elija el que mejor se adapte a sus necesidades.

    Nota: Es posible que los sitios de demostración que se muestran en el artículo no estén disponibles públicamente después de un tiempo.

    ¿Necesita una alternativa a Netlify? Mira estos mejores plataformas de alojamiento de sitios estáticos.

    Feliz implementación 🙂