En este tutorial vamos a mostrar como crear y desplegar una aplicación en ReactJS utilizando los servidores VPS de Clouding.io.
¿Qué es React?
React o ReactJS es una biblioteca JavaScript front-end gratuita y de código abierto para la construcción de interfaces de usuario o componentes UI y ocuparse de esta capa de visualización de una manera mucho más ágil, versátil y rápida que otros frameworks como por ejemplo AngularJS. Está mantenida por Facebook y por una comunidad de desarrolladores individuales y empresas. (Repositorio GIT).
React puede utilizarse como base en el desarrollo de aplicaciones de una sola página o móviles. Sin embargo, React sólo se ocupa de la gestión del estado y de renderizar ese estado en el DOM, por lo que la creación de aplicaciones React suele requerir el uso de librerías adicionales para el enrutamiento, así como ciertas funcionalidades del lado del cliente.
Características de React.JS
Al igual que otros marcos web Javascript, ReactJS tiene muchas características principales que podrían ser su consideración. Son:
- Composición de componentes.
- Desarrollo Declarativo Vs Imperativo.
- Flujo de datos unidireccional.
- Performance gracias al DOM Virtual.
- Isomorfismo
- Elementos y JSX.
- Componentes con y sin estado.
- Ciclo de vida de los componentes.
- Ideal para aplicaciones de alta demanda.
- Permite el desarrollo de aplicaciones móviles.
Instalar React en Ubuntu 20.04 con Clouding
Lo primero de todo es tener un servidor donde poder instalar su aplicativo. EEn esta ocasión vamos a utilizar los servidores VPS de Clouding, que ofrecen una gran versatilidad a un precio más que competente.
- Registrate en https://portal.clouding.io/register?lang=es
- Cuando estés registrado accede al panel de servidores.
- Pinchamos en crear servidor y empezamos la configuración.
- Damos un nombre a nuestra aplicación
- Seleccionamos como sistema operativo Ubuntu y la versión 20.04
- Ahora llega el momento de asignar recursos a tu VPS.
Tendrás que realizar un previo análisis de que recursos va a necesitar tu aplicación. Una configuración básica para empezar suele ser utilizar al menos 2 vCores con 2GB de RAM por core y mínimo de 50GB de espacio en disco.
Gracias a la facilidad en la gestión del panel de Clouding, una vez creado nuestro servidor podemos escalarlo hacia arriba si necesitamos más recursos.
Además directamente desde el panel de configuración podemos visualizar cual será el coste de nuestra instancia a medida que vamos ajustando la configuración.
Para nuestra aplicación de React el coste de la instancia ronda los 15€/mes, un precio bastante competente.
Una vez le damos a enviar, nuestro VPS se aprovisiona y empieza el setup automático.
y en unos 30 segundos ya tenemos el cluster lanzado.
Conexión a nuestro VPS
Para conectar a nuestro servidor es super sencillo. Desde una ventana de terminal accedemos con root y la contraseña que nos ofrece el proveedor. Aunque también podemos conectarnos con nuevas claves pública/privada, que se puede especificar en la configuración previa, y que nos aporta un nivel adicional de seguridad.
MacBook-Pro-de-Pedro:~ pedroventura$ ssh [email protected]
y listo estamos dentro:
Ejecutamos el comando htop y veremos nuestros recursos (los 2 cores y los 4 GB de RAM, que hemos especificado en la configuración)
Instalar React en Ubuntu
Una vez montado el entorno y ya teniendo la base de arquitectura podemos empezar a instalar las librerías y componente de React.
Lo primero es instalar NodeJS como servidor web y npm que administrará las dependencias de las aplicaciones javascript.
Instalar Node y npm
Ejecutamos el siguiente comando
sudo apt install nodejs npm
Una vez que finalice la instalación de los paquetes comprobamos las versiones
[email protected]:~# npm -v
6.14.4
[email protected]:~# nodejs -v
v10.19.0
[email protected]:~#
Instalar create-react-app
Para instalar un entorno productivo de React, necesitaremos configurar herramientas como babel, webpack, etc… lo cual es complejo de configurar para principiantes en el mundo React, Y claro, si estas comenzando, todo eso añade un nivel de complejidad que nos hace perder el foco de nuestro workflow del proyecto.
Aquí es donde entra create-react-app que es la herramienta más sencilla de utilizar y configurar, ofreciéndonos todo lo necesario para comenzar una app con React, pero sin tener que perder tiempo configurando herramientas.
Ejecutamos el comando: sudo npm install -g create-react-app
Y obtenemos el siguiente resultado
[email protected]:~# sudo npm install -g create-react-app
added 67 packages, and audited 68 packages in 2s
4 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
[email protected]:~#
Creando la primera aplicación React
Nuestra primera aplicación React se puede crear simplemente usando create-react-app. Tan solo tendremos que utilizar el siguiente comando:
create-react-app demo
Y listo! Tenemos nuestra aplicación demo creada
Mediante el comando create-react-appcreamos la aplicación React que hemos llamado «demo». Este comando además crea la estructura de carpetas, archivos y configuraciones necesarias así como la resolución de todas las dependencias de las bibliotecas.
Para ejecutar nuestra aplicación tan sólo tendremos que ejecutar npm start
Iniciando el servidor web que llevará a cabo todo el proceso de computación y compilado de la aplicación.
Para poder acceder a la aplicación desde tu navegador, tendrás que arrancar npm indicando el host de tu aplicación:
HOST=161.22.41.110 npm run start
Si ahora accedo mediante el navegador a mi aplicación:
http://161.22.41.110:3002
Ya tenemos la base de nuestra aplicación en React funcionando y operativa en modo desarrollo.
NOTA.
En el firewall de tu VPS con Clouding, tendrás que abrir el tráfico a ese puerto, ya que no es un puerto por defecto.
Tendrás que incluir una nueva normal de Firewall HTTP especificando los puertos que estés utilizando en modo desarrollo.
Idealmente en lugar de dejar todo el rango de IPs publicas abiertas (0.0.0.0/0), lo mejor es definir solamente tu IP publica, para mejorar la seguridad y que sólo tu máquina tenga acceso a la aplicación.
CONCLUSIÓN
La experiencia utilizando los servicios y soluciones de Clouding ha sido muy buena destacando notablemente la usabilidad de su interfaz, facilitando la experiencia de usuario, donde literalmente en «4 clicks» puedes tener un servidor VPS operativo. A nivel de coste presentan competencia a otros grandes proveedores tecnológicos ya que se encuentran en rangos muy similares de pricing. Como último aspecto diferencial destacar que el soporte es en castellano por lo que si tienes dudas o incidencias te las pueden resolver sus técnicos sin problema. Un proveedor más que recomendable.