Hola, me llamo Miguel y aquí les traigo un nuevo artículo.
Un tutorial sobre la implementación de un frontend ReactJS
y un backend de API Rails
en el mismo dinamómetro.
Puede ejecutar 2 aplicaciones (frontend y backend) en el mismo dinamómetro Heroku.
Simplemente no es sencillo … Hay un montón de formas en que no funcionará, y solo una que sí lo hará.
Hoy analizaremos la configuración de un frontend ReactJS / Node y un backend de API Rails.
Mi implementación final se inspiró en esta publicación sobre El blog de Heroku. Pero es bastante largo y sinuoso.
Simplemente analizaremos la carne y las papas para que funcione. Sin pelusa.
Índice
Crea y configura la aplicación
Ejecútelos en la línea de comandos.
$ rails new fe-be-app --api --database=postgresql -T $ cd fe-be-app $ bundle install $ rake db:create $ rails s -p 8000
Ahora visita el localhost:8000
para confirmar, verá el mensaje «¡Yay! ¡Estás sobre rieles!» página. ¡Genial, trabajando hasta ahora!
Agregue estas líneas a .gitignore
.idea/ tmp/ log/
No hay razón para enviar un código innecesario a Heroku.
Agregar la interfaz
Ejecútelos en la línea de comandos.
$ npx create-react-app client $ cd client $ npm install axios $ npm install http-proxy-middleware
Y copia / pega esto en client/src/App.js
.
import React, {useState, useEffect} from 'react'; import axios from 'axios' import './App.css'; const App = () => { useEffect(() => { axios.get('/api/bears') .then(res => setBears(res.data)) .catch(error => console.log(error)) }, []); const [bears, setBears] = useState([]); return ( <div className="App"> <h2>Bears in Canada:</h2> <div> <ul> {bears.map((b,idx) => { return ( <li> {idx}. {b} </li> ) })} </ul> </div> </div> ); } export default App;
Ahora pruebe que la interfaz funciona de forma aislada.
$ yarn --cwd client start
¿Ves «Osos en Canadá:» en la parte superior? ¡Perfecto!
Configurar solicitudes de proxy al backend
Agrega un archivo llamado client/src/setupProxy.js
con el siguiente código.
const { createProxyMiddleware } = require ('http-proxy-middleware'); module.exports = function (app) { app.use ( '/ api', createProxyMiddleware ({ target: 'http: // localhost: 8000', changeOrigin: true, }) ); };
Esto le evita proporcionar la URL completa en cada solicitud de interfaz, así como diferentes URL tanto para el desarrollo como para la producción.
Agregue el controlador Rails y la ruta
Crea un controlador en controllers/api/bears_controller.rb
con este código.
class Api::BearsController < ApplicationController BEARS = [ 'Polar Bear', 'Grizzly Bear', 'Black Bear', 'Brown Bear', 'Kermode Bear', 'Giant Panda', 'Sloth Bear'] def index render json: BEARS, status: 200 end end
Simplemente devolveremos una lista de nombres de osos a la interfaz. ¡Mantenlo simple!
Ahora actualiza routes.rb
con una sola ruta.
Rails.application.routes.draw do namespace :api do get '/bears', to: 'bears#index' end end
Agregar el Procfile
Este archivo se llama Procfile
. Existe en la raíz de la aplicación y no tiene extensión de archivo. Le dice al dinamómetro Heroku qué hacer al arrancar.
web: bundle exec rails s release: bin/rake db:migrate
Agregue package.json
en la raíz
Cree este archivo y pegue lo siguiente.
{ "name": "frontend-backend-app", "license": "MIT", "engines": { "node": "14.8.0", "yarn": "1.22.4" }, "scripts": { "build": "yarn --cwd client install && yarn --cwd client build", "deploy": "cp -a client/build/. public/", "heroku-postbuild": "yarn build && yarn deploy" } }
Esto es adicional a los otros package.json
en su aplicación frontend.
Agregar paquetes de construcción
En la línea de comando, ejecute.
$ heroku buildpacks:add heroku/nodejs --index 1 $ heroku buildpacks:add heroku/ruby --index 2
Estos le dicen a Heroku qué instalar en el servidor para admitir su código.
Implementar en Heroku
$ git add . -A $ git commit -m 'first commit' $ heroku create $ git push heroku master
Cuando visite su enlace de Heroku, debería ver una página con los nombres de osos que especificamos en nuestro controlador.
Deja un comentario si te quedas atascado y haré todo lo posible para ayudarte.
Gracias por leer este artículo. ¡Feliz codificación!
Añadir comentario