En este tutorial aprenderas a desplegar una aplicacion web Frontend usando Railway, un servicio de la nube PaaS(Platform as a Serice) que te permite desplegar aplicacion sin la necesidad de configurarlos desde cero.

Para esto solo necesateremos crear un proyecto, en mi caso estare usando Vitejs, luego tambien necesitaremos una cuenta de Github y tener Nodejs instalado.

Teniendo estos requerimientos podemos comenzar.

Creación de un proyecto de React

Primero vamos a crear un proyecto de React usando Vitejs:

npm create vite

Estas son mis selecciones:

√ Project name: ... react-railway-test
√ Select a framework: » React
√ Select a variant: » JavaScript

y luego simplemente ejecutamos:

cd react-railway-test
npm install
npm run dev

Ahora para poder desplegar este proyecto en Railway necesitamos saber lo siguiente:

1. Railway ejecutara esto en su propio servidor HTTP, por lo que necesitamos servir nuestros archivos estaticos generados por React, usando algun servidor. Por suerte ya existe un modulo que hace esto llamado serve
2. Railway nos dara un puerto definido para ejecutar el servidor, esto tambien se puede configurar con serve
3. Railway ejecutar de forma secuencial, los comandos npm install, npm run build y npm start, por lo que necesitamos crear nuestro comando start en package.json

Comando npm start

Para poder configurar me estaré basando en este template del propio Railway: https://railway.app/template/6sjhSn en donde el repositorio es este: https://github.com/brody192/create-react-app-starter

Primero instala el paqute serve:

npm i serve

Luego Actualiza tu package.json de esta forma

  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "start": "serve dist -s -n -L -p $PORT"
  },

el comando importante aqui es serve que permite servir los archivos de la carpeta dist que serán generados por Vitejs, cuando se ejecute el comando npm run build (el cual Railway lo ejecutara automaticamente) ademas tambien tiene los comandos:

• dist: Es el directorio que deseas servir. En este caso, se está utilizando "dist" como ejemplo, pero podrías reemplazarlo con el directorio que desees servir.
• s o --single: Esta opción habilita el modo de "archivo único" (single-page application). Cuando se activa, todas las rutas desconocidas se redirigen a un archivo principal, generalmente index.html. Esto es útil cuando estás construyendo una aplicación de una sola página.
• -n o --no-clipboard: Al utilizar esta opción, se desactiva la funcionalidad de copiado automático del enlace del servidor al portapapeles. Por defecto, el enlace se copiaría automáticamente para facilitar su acceso.
• -L o --no-localhost: Al utilizar esta opción, se desactiva la apertura automática del navegador web en la dirección del servidor local. Por defecto, se abriría automáticamente una pestaña del navegador en la dirección localhost para visualizar los archivos servidos.
• -p $PORT: Esta opción establece el número de puerto en el que se servirán los archivos. En este caso, se utiliza $PORT como una variable de entorno que podría contener un número de puerto específico. Si $PORT no está definido, se utilizará un puerto predeterminado (generalmente el puerto 5000).

Y ya estaríá. lo unico que se tiene que hacer ahora es desplegarlo con Railway.

Despliegue en Railway

Para desplegar en Railway tenemos dos opciones:

1. Usando el CLI de Railway (en donde se necesita una cuenta de Github para poder desplegar tu proyecto)
2. Usando la interfaz grafica (no hace falta crear un repositorio de Git)

Para instalar el CLI, podemos ejecutar:

npm i -g @railway/cli

Para poder ingresar a nuestra cuenta desde consola, ejecutamos:

railway login

Para poder inicializar nuestra aplicacion en Railway, es decir crear un proyecto de Railway en donde se subira nuestro código:

railway init

este comando anterior te mostra la opcion de un nombre, colocale el que gustes, en mi caso usaré react-fazt-test

Project Name react-fazt-test

Y finalmente para poder desplegarlo:

railway up

una vez desplegado, puedes generar un dominio usando:

railway domain

Para conocer mas comandos puedes visitar este sitio: https://docs.railway.app/develop/cli

Luego para cada modificacion que hagas, simplemente

Variables de entorno

Luego otro asunto importante tambien es usar variables de entorno desde el frontend. Para poder probar esto, crea un archivo .env en la raiz de tu proyecto, y añade lo siguiente:

VITE_API=http://somehost/api/v1

Luego actualiza App.jsx, con el siguiente codigo:

      <h1>Vite + React</h1>
      <h1>{import.meta.env.VITE_API}</h1>

Si ejecutas npm run dev, podras ver en pantalla, la direccion que has escrito en tu variable de entorno.

Esto es solo una prueba, en este archivo .env puedes crear muchas mas variables de entorno, pero todos deben empezar con el VITE_, esto es porque de esa forma los lee Vitejs las variables de entorno dentro de la aplicacion frontend.

finalmente para desplegarlo, vamos a crear nuestra variable de entorno en Railway, el cual debe ser creado desde interfaz, porque la consola ya no permite añadir variables de entorno desde el CLI de railway.

Primero ve en tu proyecto en Railway, cerca de Settings, veras alli una opcion llamada Variables, añade alli el nombre VITE_API con el valor https://somebackend.com

solo ejecuta nuevamente:

railway up

Y listo, con esto tambien tendrias tu proyecto de frontend desplegado y leyendo variables de entorno.

Más Recursos

• Plantilla de Despliegue de Proyecto de React en Railway