Hola a todos. Junto con la primavera, llegaron nuevos cursos a OTUS, que comenzamos a presentar hoy. Reclutamiento ya abierto para el curso "Desarrollador React.js" . Puede obtener más información sobre el curso en el seminario web gratuito , que se realizará el 11 de marzo. Como parte del mismo seminario web, se desarrollará una pequeña aplicación web en ReactJS.
Y ahora le sugerimos que lea el artículo sobre la implementación de su primera aplicación, que fue escrito por nuestro autor independiente.
La plantilla de inicio Create-react-app y Heroku son excelentes herramientas para crear rápidamente aplicaciones basadas en la nube, pero la documentación de React and Heroku incluye sorprendentemente poca información sobre cómo implementar su aplicación React en Heroku. Los pasos descritos en este artículo funcionarán en cualquier proyecto creado usando create-react-app . En nuestro artículo, instalaremos en Heroku una aplicación de tareas simple con el backend más mínimo, solo para ver el proceso en sí. Pero lo primero es lo primero:¿Qué es Heroku en general? ¿Por qué lo necesito?
Heroku es una plataforma de plataforma como servicio (PaaS) basada en la nube que admite muchos lenguajes de programación (y realmente se jacta y se destaca). La historia de Heroku comenzó en 2007, y luego Ruby fue el primer lenguaje de programación. Ahora es compatible con Java, Node.js, Scala, Clojure, Python, PHP y Go.¿Por qué necesito esta nube? Puedo comprar hosting barato
Sí, puede comprar cualquier alojamiento e instalar el servidor Node.js allí, si este servicio es compatible con el alojamiento. Sin embargo, las plataformas en la nube tienen cualidades tales como, por ejemplo, la medición de la elasticidad y el consumo: si muchos usuarios visitan su servicio, entonces la plataforma probablemente escalará (o usted mismo utilizando las herramientas proporcionadas por la plataforma) automáticamente o reducirá el flujo. Tener en cuenta el consumo significa que solo pagará por los recursos que están en demanda. Las plataformas en la nube tienen muchas más ventajas, una lista completa se puede encontrar aquí . Bueno, iremos directamente a la implementación.Creando tu propia aplicación React
¿Qué tipo de plantilla create-react-app es esta ? Probablemente sea imposible incluso estar un poco involucrado en el desarrollo de aplicaciones React y no saberlo. Esta plantilla proporciona React, React-dom, Webpack, ESLint "debajo del capó". Por supuesto, puede construir su propia aplicación React usted mismo, pero ¿por qué crear una aplicación compleja con muchas dependencias cuando puede usar una bicicleta ya preparada?Para comenzar, asegúrese de tener Node.js instalado .Para crear una nueva aplicación, ingrese los siguientes comandos en la consola: npx create-react-app test-app
cd test-app
Nota útil, , create-react-app . npm install -g create-react-app. , ( , ), - , react-scripts 3.4.0. , npm uninstall -g create-react-app.
Ok, entregaste el paquete y ahora quieres implementarlo. Para no implementar un paquete simple con un componente que crea-reaccionar- entrega de la aplicación, decidí escribir una pequeña aplicación de tareas, cuyo código fuente, si también desea intentar completar su aplicación, se puede encontrar aquí . En resumen, hay un estado de ahorro en forma de entradas nuevas y de moda , donde el texto de los casos y su identificación , que se genera directamente desde Date.now(). Participé en el diseño de componentes de Material-UI react .Puedes ponerte esta aplicación y desplegarla con: npm i -D
npm start
Entonces tenemos una oportunidad increíble para jugar y crear nuestros propios asuntos. Sin embargo, todas las características que se encuentran en esta aplicación es guardar cosas en estado . No hice ninguna liga al servidor o al menos a localStorage , el propósito de este artículo no es este. Supongamos que soy muy paranoico y grabaré mis asuntos en una sola inclusión de la pestaña del navegador.Crea tu favicon
¿Por qué incluso necesitamos un servidor Node.js si no hay trabajo con la base de datos? Usando el servidor, le daremos favicon y todo el resto del código. En nuestra aplicación React , vaya a la carpeta pública y elimine la plantilla favicon.ico desde allí. Tomaré el ícono desde aquí y lo transferiré a la carpeta pública.Crea tu servidor Express
A continuación, creamos nuestro servidor Express para dar servicio a la compilación. Directamente en la carpeta de la aplicación, cree un archivo server.jsen el que se desarrolle el trabajo de nuestro backend.Escribimos lo siguiente en él: const express = require('express');
const favicon = require('express-favicon');
const path = require('path');
const port = process.env.PORT || 8080;
const app = express();
app.use(favicon(__dirname + '/build/favicon.png'));
app.use(express.static(__dirname));
app.use(express.static(path.join(__dirname, 'build')));
app.get('/ping', function (req, res) {
return res.send('pong');
});
app.get('/*', function (req, res) {
res.sendFile(path.join(__dirname, 'build', 'index.html'));
});
app.listen(port);
Como utilizamos los paquetes express , express-favicon y path , necesitamos instalarlos: yarn add express express-favicon path -D
En package.jsoncambiamos el comando de inicio a lo siguiente: "start": "node server.js",
Ejecutar compilación
A continuación, necesitamos compilar la aplicación usando el siguiente comando: yarn build
Sería bueno probar que nuestra aplicación funciona correctamente. Para hacer esto, reclutamos yarn starty evaluamos cómo funciona correctamente.Ocultar mapa fuente
Quizás no desee que nadie pueda acceder a su código fuente. En este caso, debe eliminar el acceso al suyo sourcemap. Para hacer esto, cree un archivo en el repositorio .envy prohíba la generación de mapas en él: GENERATE_SOURCEMAP=false
Nota útilSource map ( , , , , - ). — source map, , .
Implementar directamente
Si aún no tiene una cuenta en heroku , debe registrarse aquí . Para la implementación, también necesitará instalar Heroku CLI desde aquí . Pruebe su funcionamiento escribiendo heroku login en la línea de comando. A continuación, encontrará una redirección al sitio web de heroku, donde debe iniciar sesión.Luego ingrese el nombre de su aplicación. En mi caso, será todoisakura313 , porque no puedes usar caracteres especiales y guiones bajos en el nombre de la aplicación: heroku create todoisakura313
Luego enviaremos nuestra compilación utilizando los siguientes comandos: npm install
git add --all
git commit -m "first commit"
git push heroku master
Estos comandos le permitirán agregar dependencias, inicializar gity descargar la aplicación en sí.¡Multa! En general, todo está listo, ahora la aplicación ya debería aparecer en la dirección https://< >.herokuapp.com/. Puede abrir la aplicación escribiendo los siguientes comandos en la consola:heroku open
Si algo salió mal, averigüe qué le pasa al equipo heroku logs --tail. Sin embargo, en general, si no se desvió de las instrucciones de este artículo, debería haber tenido éxito.¡Eso es todo! Gracias por la atención. Puede encontrar una aplicación de trabajo aquí , y con su código terminado, aquí .Y aquellos que han leído hasta el final, lo invitamos a otro seminario web gratuito , en el que aprenderá las fortalezas y debilidades de los marcos JS más populares para el desarrollo Frontend, comprenderá para qué tareas se adapta mejor y qué puede decidir cuál es mejor para estudiar.