React es una biblioteca muy popular y ampliamente utilizada para crear interfaces de usuario. Entonces, si está pensando en implementar su aplicación Static React, podemos usar el paquete de aumento, Publicar aplicaciones web en un CDN con un solo comando y sin necesidad de configuración.
Requisitos previos: Node.js y npm instalados.
Surge: hay algunas herramientas gratuitas disponibles para alojar nuestro sitio web, como GitHub y Heroku, pero la configuración es un poco complicada cuando se trata de publicar solo el front-end. Para tal escenario podemos usar Surge. Es una biblioteca npm popular que se utiliza para implementar páginas web estáticas con un solo comando. Primero, creamos una compilación de nuestro proyecto y luego escribimos el comando de aumento en el terminal dentro de la carpeta de compilación. Incluso podemos elegir un nombre personalizado para nuestro proyecto.
A continuación se muestra la implementación paso a paso:
Paso 1: Cree una aplicación React usando el siguiente comando:
npx create-react-app deploy
Nota: si ya instaló create-react-app globalmente a través de npm, use directamente el siguiente comando:
Reaccionar creación de aplicaciones
Su entorno de desarrollo está listo. Instalemos ahora Surge en nuestra aplicación.
Paso 2: después de crear la carpeta de su proyecto, es decir, con estilo, muévase a la misma carpeta:
cd deploy
Paso 3: Surge se puede instalar a través de npm en su aplicación React. Siga los pasos que se indican a continuación para instalar Surge en su aplicación React: Para instalar Surge, use el siguiente comando:
npm install --global surge
Estructura del proyecto : Se verá como lo siguiente.
Paso 4: ahora cree un proyecto ficticio y coloque el siguiente código en su archivo App.js.
App.js
import React from 'react';
function App(){
return (
<div> Hello, World! </div>
)
}
export default App;
Paso 5: ahora necesita crear una carpeta de compilación para poder implementar su aplicación React. Build básicamente agrupa y minimiza nuestro código y esta carpeta consta de React compilado que se reduce a Html, CSS y JavaScript simples.
npm run build
Paso 6: ahora podemos alojar e implementar nuestra aplicación React. Ahora tiene ‘surge’ instalado globalmente en su sistema para que pueda usarlo tantas veces como quiera en el futuro. Ejecute el siguiente comando:
surge
Paso 7: ahora le pedirá su ID de correo electrónico y una contraseña (si lo está utilizando por primera vez). Aquí debe ingresar su identificación de correo electrónico y una nueva contraseña para su cuenta de aumento.
Si ya ha iniciado sesión, verá lo siguiente:
Paso 8: Después de eso, debe dar una ubicación a sus archivos estáticos (es decir, carpeta de compilación). Si abrió la terminal en la misma carpeta que se indica, presione enter.
Paso 9: Ahora te pedirá un nombre de dominio con un nombre de dominio de ejemplo. Continúe y edite la parte anterior a ‘.surge.sh’ y, si ese dominio está disponible, se le asignará. Ahora puede personalizar el nombre de dominio del sitio web y se alojará en esa URL y puede cambiar la parte antes de surge.sh.
Paso 10: Ahora presione enter y obtendrá el enlace a su sitio publicado en la web.
Salida: ahora, si abre la URL, puede ver la siguiente salida, o puede visitar este enlace para verificar la aplicación React alojada dapper-food.surge.eh
Como podemos ver, el proceso de alojamiento de un sitio web estático en aumento es muy fácil. Podemos alojar nuestro sitio web usando solo 2 comandos en aumento.
Publicación traducida automáticamente
Artículo escrito por prasanna1995 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA