Configuración de now y deploy

Curso Profesional de Vue.js 2

Introducción

Desarrollo de Aplicaciones Profesionales con VueJS

VueJS: Creación y Desarrollo de Aplicaciones Web Progresivas

CLI y Dev Tools

Herramientas esenciales para desarrollar con BioJS y NodeJS

Creación de una Aplicación Vue.js con CLI y Webpack Simple

Configuración y uso de Webpack en proyectos JavaScript

Configuración y uso de Babel para compatibilidad JavaScript

Configuración de eSlimt con EstándarJS y Webpack

Integración de SaaS y Bulma en Aplicaciones Vue.js

Configuración de Pag para optimizar el workflow de desarrollo HTML

Diseño de Mockups: Práctica y Colaboración en Comunidad

Creación de Vistas con Mockups y Vue.js

Manipulación del DOM

Expresiones en Vue: Manipulación Dinámica del DOM

Directivas de Vue: Uso y Funciones Principales

Data Binding y Directivas en Vue: bmodel y bevined

Propiedades Computadas en JavaScript: Creación y Uso Práctico

Uso de Watchers en Biomóvil para Gestión de Cambios de Propiedades

Manipulación de Eventos y Métodos en Aplicaciones Web

Creación de Interfaz con Vue.js y Framework CSS Bulma

Manipulación del DOM con Vue.js: Práctica y Ejercicios

REST y HTTP

Integración de Servicios HTTP con JavaScript y API Fetch

Uso de la librería Trae para peticiones HTTP con Fetch API en JavaScript

Integración de Servicios en Vue.js: Uso de API y Mejora de Código

Sistema de Componentes

Creación y Registro de Componentes en Vue.js

Creación de Componentes en Vue.js con Bulma para Platzi Music

Reactividad y Virtual DOM en Vue.js: Conceptos y Soluciones

Ciclo de Vida de Componentes en Vue.js: Hooks y Ejecución de Código

Comunicación entre Componentes en Vue.js: Props y Eventos

Comunicación entre Componentes en Vue: Eventos de Hijo a Padre

Uso de Slots para Inyección Dinámica de HTML en Componentes Vue

Comunicación entre Componentes Vue con Event Bus y Plugins

Vue Router

Vue Router: Creación de Single Page Applications

Instalación y Configuración de Vue Router en Aplicaciones Vue.js

Navegación de Rutas con Vue Router en Aplicaciones SPA

Extendiendo VueJS

Uso de Modifiers en VueJS para Mejorar Funcionalidad de Eventos

Filtros en Vue: Formateo de Duraciones de Canciones en Componentes

Creación de Directivas Personalizadas en Vue.js

Reutilización de Funcionalidad con Mixins en VueJS

Clases, Animaciones y Transiciones36

Integración de Animaciones CSS3 en Aplicaciones VueJS

Vuex

Gestión de Estados Centralizados con la Librería BuX

Integración de VueX y arquitectura Flux en Vue.js

Mutaciones en Vuex: Gestión y Actualización del Estado Reactivo

Uso de Getters en Vuex para Acceso Personalizado de Estado

Acciones asincrónicas en Vuex: cómo implementarlas y utilizarlas

Integración de VueX y Babel en PlatziMusic

Nuxt.js

Renderizado del Lado del Servidor con Vue.js y Nuxt

Creación de Proyectos con Nact.js en Vue para Server-Side Rendering

Integración de VueJS con Nuxt para Server-Side Rendering

Deploy a Producción con Now

Despliegue de Aplicaciones con NOW en BIOS JS

Despliegue de Aplicaciones Node.js con NOW y Webpack

Conclusiones

Construcción de Aplicaciones Profesionales con Vue.js

Bonus

Internacionalización de Aplicaciones con Vue I18n

Pruebas Unitarias con Vue.js y Webpack: Configuración y Ejecución

Autenticación en Vue.js con JSON Web Tokens (JWT)

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Si ya tienes una cuenta,

Recursos

¿Cómo preparar tu aplicación para production con Webpack?

Para llevar una aplicación de desarrollo a producción, uno de los pasos cruciales es generar un proceso de build que sea soportado por la mayoría de los navegadores. Aquí es donde entra en juego Webpack. Aunque durante el desarrollo se suele utilizar Webpack Dev Server para compilar en tiempo real y servir la aplicación localmente, en un entorno de producción es diferente. Aquí te explicaré cómo preparar tu aplicación para el despliegue final.

¿Cómo instalar y configurar SERP como servidor web estático?

Para tener un servidor web estático, utilizaremos SERP, una herramienta de NPM que permite servir aplicaciones de manera sencilla. Este componente no es solo de desarrollo, sino que se ejecuta en producción, actuando como servidor web. El proceso de instalación es simple y se realiza desde la terminal:

npm install -s serv

¿Por qué es esencial el script 'start' en NOW?

NOW, una herramienta para deploy, requiere un script start en las aplicaciones Node.js. Este script informa a los servidores y desarrolladores sobre cómo iniciar correctamente la aplicación. En NPM, los scripts start y test tienen una peculiaridad: no es necesario usar run. El script start para nuestra aplicación sería:

"start": "serv --single"

Este comando simplificado permite que el servidor funcione conforme a lo esperado.

¿Cómo realizar el build de la aplicación con Webpack?

Un build con Webpack es esencial para producción. Webpack ofrece diversas configuraciones que optimizan el código, incluyendo minificación y obfuscación, lo cual mejora la eficiencia. Para iniciar el build ejecutarás:

npm run build

Esto genera una carpeta dist que almacena todos los componentes compilados, listos para ser servidos.

¿Por qué incluir la carpeta 'dist' en el repositorio?

La carpeta dist contiene todo el código necesario en su forma optimizada. Aunque hay diferentes enfoques sobre si debe ser parte del repositorio o no, en nuestro caso es crucial incluirla para asegurar un correcto despliegue con NOW. Para ello, eliminaremos dist del archivo .gitignore.

¿Cómo desplegar tu aplicación con NOW?

Deployar con NOW se realiza en pocos pasos. Una vez configurados los scripts y completado el build, se ejecuta el comando:

now

NOW asignará una URL única para el seguimiento del despliegue. Esta dirección web permitirá ver el estado y la compilación en tiempo real.

¿Qué ocurre tras el despliegue?

Después de ejecutar NOW, y una vez completado el proceso de build y deploy, la URL asignada se convierte en tu aplicación funcional en producción. Es posible verificar su funcionalidad cargando y probando elementos, como canciones en un reproductor, para confirmar que todo funcione como en el ambiente de desarrollo.

¿Cuáles son los próximos pasos después del despliegue?

Una vez asegurado que tu aplicación se despliega y funciona correctamente, puedes explorar más opciones de personalización y control sobre tus deployments en NOW. Considera la configuración del nombre del paquete en package.json para identificar mejor la aplicación.

Con estos pasos, tu proyecto estará listo para ser compartido con el mundo, optimizado y liberado de complejidades técnicas adicionales de entorno local. ¡Continúa perfeccionando tus habilidades y sigue adelante en tu viaje de desarrollo!

Aportes 16

Preguntas 4

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Paolo Joaquin Pinto Perez

hace 4 años

Configuración de now y deploy 2021

Aqui el mío: https://platzi-music-blush.vercel.app/
UPDATE

Ahora ya no se llama now es vercel.
Lo que hice me funciono a mi, espero a ustedes también:

instalar vercel con npm en global

npm install -g vercel

loguearnos con el comando vercel login
Hacer el deploy con el comando vercel:
1.- En Set up and deploy “~/projects/platzi-music”? [Y/n] => Pulsar Y
2.- En Which scope do you want to deploy to?: Pulsar Enter
3.- En Link to existing project? [y/N]: Pulsar N y enter:
4.- En What’s your project’s name? (platzi-music): Presionar Enter
5.- En In which directory is your code located?: Presionar Enter
6.- En Want to override the settings? [y/N]: Pulsar Y
7.- Con espacio seleccionar Build command y Development Command y al terminar de seleccionar: Enter
8.- En What's your Build Command?, poner: `

vue-cli-service build

9.- En What's your Development Command?, poner:

vue-cli-service serve

Y Enter
Pd: Se copiara automáticamente el link de su proyecto así que al finalizar el deploy solo deben pegarlo en el navegador.

Juan Jose Ortiz Santa

hace 4 años

El proceso aqui, se me presento un poco enredado, depronto pudo ser por lo viejo el video, con now ahora llamado vercel, es muy sencillo ahora, como entrar a la pagina, importar el repositorio y esperar que el solo haga todo. no se si es debido, pero quiero compartir este video para lo que quieran ver lo sencillo que puede ser tutorial rapido

Kronio HR

hace 5 años

**Tuve el siguiente error: **

2020-01-13T14:05:36.690Z  Downloading 48 deployment files...
2020-01-13T14:05:37.539Z  Installing build runtime...
2020-01-13T14:05:37.541Z  yarn info @now/build-utils@latest...
2020-01-13T14:05:37.545Z  yarn info @now/static-build...
2020-01-13T14:05:38.049Z  Build runtime installed: 510.018ms
2020-01-13T14:05:38.492Z  Looking up build cache...
2020-01-13T14:05:38.978Z  Running builder.exports.build...
2020-01-13T14:05:38.983Z  Installing dependencies...
2020-01-13T14:05:51.256Z
2020-01-13T14:05:51.257Z  > node-sass@4.13.0 install /zeit/6b93ac14/node_modules/node-sass
2020-01-13T14:05:51.257Z  > node scripts/install.js
2020-01-13T14:05:51.257Z
2020-01-13T14:05:51.526Z  Downloading binary from https://github.com/sass/node-sass/releases/download/v4.13.0/linux-x64-72_binding.node
2020-01-13T14:05:52.620Z  Download complete
2020-01-13T14:05:52.623Z  Binary saved to /zeit/6b93ac14/node_modules/node-sass/vendor/linux-x64-72/binding.node
2020-01-13T14:05:52.661Z  Caching binary to /zeit/.npm/node-sass/4.13.0/linux-x64-72_binding.node
2020-01-13T14:05:52.742Z
2020-01-13T14:05:52.743Z  > core-js@2.6.10 postinstall /zeit/6b93ac14/node_modules/core-js
2020-01-13T14:05:52.743Z  > node postinstall || echo "ignore"
2020-01-13T14:05:52.743Z
2020-01-13T14:05:52.793Z  Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!
2020-01-13T14:05:52.793Z  
2020-01-13T14:05:52.793Z  The project needs your help! Please consider supporting of core-js on Open Collective or Patreon: 
2020-01-13T14:05:52.793Z  > https://opencollective.com/core-js 
2020-01-13T14:05:52.793Z  > https://www.patreon.com/zloirock 
2020-01-13T14:05:52.793Z
2020-01-13T14:05:52.793Z  Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)
2020-01-13T14:05:52.793Z
2020-01-13T14:05:52.957Z
2020-01-13T14:05:52.957Z  > uglifyjs-webpack-plugin@0.4.6 postinstall /zeit/6b93ac14/node_modules/uglifyjs-webpack-plugin
2020-01-13T14:05:52.957Z  > node lib/post_install.js
2020-01-13T14:05:52.957Z
2020-01-13T14:05:53.021Z
2020-01-13T14:05:53.021Z  > node-sass@4.13.0 postinstall /zeit/6b93ac14/node_modules/node-sass
2020-01-13T14:05:53.021Z  > node scripts/build.js
2020-01-13T14:05:53.021Z
2020-01-13T14:05:53.168Z  Binary found at /zeit/6b93ac14/node_modules/node-sass/vendor/linux-x64-72/binding.node
2020-01-13T14:05:53.169Z  Testing binary
2020-01-13T14:05:53.266Z  Binary is fine
2020-01-13T14:05:53.903Z  npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules/fsevents):
2020-01-13T14:05:53.903Z  npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
2020-01-13T14:05:53.903Z
2020-01-13T14:05:53.906Z  added 1103 packages from 699 contributors in 14.592s
2020-01-13T14:05:53.961Z  Running "npm run build"
2020-01-13T14:05:54.141Z
2020-01-13T14:05:54.141Z  > platzi-music@1.0.0 build /zeit/6b93ac14
2020-01-13T14:05:54.141Z  > cross-env NODE_ENV=production webpack --progress --hide-modules
2020-01-13T14:05:54.141Z
2020-01-13T14:06:01.302Z  Hash: 558b8a5f22283042f5a5
2020-01-13T14:06:01.302Z  Version: webpack 3.12.0
2020-01-13T14:06:01.303Z  Time: 6810ms
2020-01-13T14:06:01.303Z         Asset     Size  Chunks                    Chunk Names
2020-01-13T14:06:01.303Z      build.js   369 kB       0  [emitted]  [big]  main
2020-01-13T14:06:01.303Z  build.js.map  1.77 MB       0  [emitted]         main
2020-01-13T14:06:01.335Z   11% building modules 10/15 modules 5 active ...ode_modules/timers-bowserify/main.js
2020-01-13T14:06:01.335Z  More details: https://zeit.co/docs/v2/platform/frequently-asked-questions#missing-public-directory
2020-01-13T14:06:01.335Z      at validateDistDir (/zeit/faaf3da4146fa99a/.build-utils/.builder/node_modules/@now/static-build/dist/index.js:132:15)
2020-01-13T14:06:01.335Z      at Object.build (/zeit/faaf3da4146fa99a/.build-utils/.builder/node_modules/@now/static-build/dist/index.js:374:13)
2020-01-13T14:06:01.335Z      at <anonymous>
2020-01-13T14:06:01.335Z      at process._tickDomainCallback (internal/process/next_tick.js:228:7)
2020-01-13T14:06:01.450Z  worker exited with code 20 and signal null
2020-01-13T14:06:03.848Z  done```

Eduardo Rafael Romero Bernal

hace 4 años

npm start
npm test
npm run dev
npm run build

Juan Esteban Galvis

hace 5 años

Esto también se puede hacer a través de Netlify no?

RetaxMaster

hace 5 años

En la nueva versión de vue genera un index html, peo he tratado de usar ese index para correrlo en “producción” (En realidad lo corro en la máquina local para ver si funciona pero no funciona) Así que no se cómo podría hostear esto en un VPS

Emanuel Torres Clemente

hace 6 años

genial esto de now.

Ezequiel Mella Leonardelli

hace 6 años

Excelente curso

ivanmtoroc

hace 6 años

Fácil y rápido.

Gustavo J. Arias

hace 6 años

Hola, mi build funciona correctamente, lo abrí en un editor de texto y tengo lo siguiente:

!function(t){function e(n){if(r[n])return r[n].exports;var a=r[n]={i:n,l:!1,exports:{}};return t[n].call(a.exports,a,a.exports,e),a.l=!0,a.exports}var r={};e.m=t,e.c=r,e.d=function(t,r,n){e.o(t,r)||Object.defineProperty(t,r,{configurable:!1,enumerable:!0,get:n})},e.n=function(t){var r=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(r,"a",r),r},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="dist/",e(e.s=48)}([function(t,e,r){"use strict";function n(t){r(213)}var a=r(47),i=r(1),s=n,o=i(a.a,null,!1,s,null,null);e.a=o.exports},function(t,e){t.exports=functi...

que es lo correcto, pero cuando subo todo el dist a un servidor para poder verlo en produccion, el inspector de chrome me dice que mi archivo build,js en realidad tiene lo siguiente:

/******/ (function(modules) { // webpackBootstrap
/******/ 	function hotDisposeChunk(chunkId) {
/******/ 		delete installedChunks[chunkId];
/******/ 	}
/******/ 	var parentHotUpdateCallback = window["webpackHotUpdate"];
/******/ 	window["webpackHotUpdate"] = 
/******/ 	function webpackHotUpdateCallback(chunkId, moreModules) { // eslint-disable-line no-unused-vars
/******/ 		hotAddUpdateChunk(chunkId, moreModules);
/******/ 		if(parentHotUpdateCallback) parentHotUpdateCallback(chunkId, moreModules);
/******/ 	} ;
/******/ 	
/******/ 	function hotDownloadUpdateChunk(chunkId) { // eslint-disable-line no-unused-vars
/******/ 		var head = document.getElementsByTagName("head")[0];
/******/ 		var script = document.createElement("script");
/******/ 		script.type = "text/javascript";
/******/ 		script.charset = "utf-8";
/******/ 		script.src = __webpack_require__.p + "" + chunkId + "." + hotCurrentHash + ".hot-update.js";
/******/ 		;
/******/ 		head.appendChild(script);
/******/ 	}
/******/ 	...

No pego el código completo porque es demasiaaaado extenso, pero pego las primeras lineas al menos, notese que hay una gran diferencia, que puedo estar haciendo mal, espero sus comentarios, muchas gracias 😄

Jesús Miguel Quinto Teran

hace 6 años

Que fácil es usar Now

mlok

hace 6 años

estoy por comenzar un proyecto y tengo 3 ambientes, dev, stg y prod, mi duda es la siguiente, para el ambiente de dev, tengo que hacer un build como se hace a prod?

jonathan sanchez

hace 5 años

muy facil el deploy con now.

softdynamic

hace 6 años

En mi caso me salió un problema:

Error: No output directory named “public” found.

Tuve que cambiar el webpack.config.json y reemplazar ‘dist’ por ‘public’ y luego agregar a esa carpeta el index.html cambiando también el atributo src del script

y bueno …
https://cmb-music.fyupanquia.now.sh/

David Alejandro Abreu Abreu

hace 5 años

Seria bueno una clase bonus de como subir tu proyecto a Github pages 🤔

Alexander Orellana Manayalle

hace 5 años

Buenas noches para realizar el deploy en produccion en un servidor VPS como seria ? yo tengo un servidor AWS pero no se que pasos seguir para configurar la aplicacion con ngnix ? Gracias de antemano.