No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Curso de Webpack

Curso de Webpack

Oscar Barajas Tavares

Oscar Barajas Tavares

Deploy a Netlify

18/28
Recursos

Aportes 108

Preguntas 54

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Asi quedo mi proyecto

馃コ 隆Pude desplegarlo con 茅xito!

Estuve 1 hora sin entender por que no me funcionaba el deploy, hasta que me doy cuenta que escrib铆 el directorio 鈥渟cripts鈥 como 鈥渟cript鈥, y por cosa rara mi cerebro ignoraba la falta de la s.

Les comparto mi ejercicio modificado:
Repo: (https://github.com/aeruizmx/curso-webpack-2021)

Compadres y comadres. Le cuento que cuando estaba haciendo el despliegue me sali贸 este error: 鈥渂uild.command鈥 failed; seg煤n vi en la pagina de Netlify, dicho error se debe a unos cambios que hicieron y recomiendan usar CI.
Teniendo en cuenta lo anterior, fu铆 al archivo netlify.toml e hice el cambio鈥CI = 鈥渘pm run build鈥
隆funcion贸 de maravilla!

Lo primero que debemos hacer es crear una cuenta en Netlify. Lo siguiente es crear un archivo en la ra铆z del proyecto llamado netlify.toml el cual va a llevar la siguiente configuraci贸n:

## **netlify.toml**
[build]
    publish = "dist" // 驴cual va a ser la carpeta a publicar?
    command = "npm run build" // Comando a ejecutar para el deploy

Para el siguiente paso debemos ya tener nuestro repositorio en alg煤n servicio de la nube, como Github. Ahora, vamos a la pagina de Netlify para crear el nuevo sitio.

Crear nuevo sitio 鈫 Seleccionar nube (Github) 鈫 Elegir repositorio y rama a subir 鈫 Deploy

Apartir de ahora Netlify nos levanta el servidor de manera gratuita, este proceso puede ser lento ya que es un servicio gratuito. En el summary de nuestro deploy podemos ver el log del build donde podriamos ver los errores presentes.

En el proyecto actual, al hacer uso de una variable de entorno, necesitamos realizar la siguiente configuraci贸n para que Netlify pueda trabajar con ella: Creamos una carpeta llamada scripts/ y adentro de esta carpeta vamos a crear un archivo llamado create-env.js. En este archivo vamos a colocar este c贸digo

// **create-env.js**

const fs = require('fs'); // fs = file system

// fs.writeFileSync("path", `argumento a crear`);
fs.writeFileSync("./.env", `API=${process.env.API}\n`);

Pero 驴de d贸nde vamos a obtener/setear el process.env? Lo vamos a asignar en netlify, en nuestro deploy vamos a buscar la Secci贸n de EnviromentEnviroment Variables 鈫 Edit Variables. En nuestro caso la llamaremos API y asignaremos el valor de nuestro API: https://randomuser.me/api/

Ahora, debemos ejecutar este script antes de ejecutar el comando de build, para que sea enviado a netlify. Vamos a nuestro package.json y vamos a modificar el script build de la siguiente manera:

"scripts": {
    ...
    "build": "node ./scripts/create-env.js && webpack --config webpack.config.js",
  }

鈿狅笍Cuidado al anidar la ejecuci贸n de scripts, porque si el primero en ejecutarse lo hace como demonio, puede causar un problema ya que no va a ejecutarse el segundo script.

Luego de todos estos cambios debemos empujarlos a la nube 鉁岎煆

Bueno, a esta altura no deber铆a ser mucho problema levantar el repo a Github, pero dejo una gu铆a paso a paso por si sirva a alguien. El primer paso es:

  1. Crear un repositorio en tu perfil de Github (repositories-new) y copiar la url del repo.

  2. En la consola estando en el directorio en que estamos trabajando ingresar: <git init>

  3. Luego dar <git add . > para de esta forma agregar todos los archivos de la carpeta.

  4. Luego hacer commit con una breve descripci贸n: <git commit -m 鈥淚nicia el proyecto鈥>

  5. Luego, si queremos alzar a Github con git add remote, tendremos que nuestro repositorio est谩 referenciado al repositorio de Gndx, que es de donde bajamos el proyecto incial. Entonces, para referenciar a nuestro repositorio hacemos: <git remote set url origin 鈥> y seguidamente copiamos el enlace de nuestro repositorio en Github.

  6. Finalmente, alzamos todo repo a la nube con <git push origin main>

Y listo, con esto tienes tu repositorio en la nube

Recuerden que si en el repo tienen varias carpetas adem谩s de la que contiene el proyecto EJ:

Podr铆an tener el error que netlify no encuentra el package.json, para eso tienen que agregar el directorio base al que tendr谩 que moverse la maquina para encontrar el package.json as铆:


Yo estuve bastante con ese problema, espero ayudarle a alguien 馃榿

Les comparto mi resultado: link

En definitiva un desastre de curso鈥 DEBEN DE RENOVARLO demasiados errores, el profesor no explica con claridad, hasta la p谩gina de Netlify es completamente otra!!! Mal Platzi todo muy mal鈥

me molesta tanto que usen estas plataformas para ense帽ar un deploy o un paso mas alla del desarrollo de la aplicacion, porque no muestran las cosas como son, como coger mi VPS y montar mis cosas alli bien montadas, como si fuera posible meter los costos e imposibilidades de estas plataformas a un cliente, eso si no me gusta de platzi, usando vainas todas facilistas para ense帽ar, asi no hacemos desarrolladores de calidad, mostrarlas decir que existen es buena idea pero no dejarnos con que con esas vainas se hace el trabajo siempre, no hagan eso recuerden que pagamos para no tener que pegarnos de google y youtube despues, si saben hacerlo ense帽enlo porfavir

Este es el segundo curso de Platzi que veo y la verdad que se nota el porque de su 茅xito.

Yo hice el deploy en GitHub pages 馃槃

18.-Deploy a Netlify

.
Permite desplegar los sitios de manera amigable, conect谩ndonos con el repo que estemos usando, aceptar permisos, etc.

  • Crear cuenta.

  • Conectar nuestro repositorio. No sin antes mandar el proyecto al repositorio en cuesti贸n.

  • Para configurarlo hacemos lo siguiente:

    • Creamos un archivo que nos ayude a tener la configuraci贸n. El archivo se llamara netlify.toml y dentro ponemos lo siguiente.
    [build]
      publish = "dist"  //Que carpeta desplegamos
      command = "npm run build"  //Que comando usamos
    
    • Subimos los cambios al repo haciendo el push correspondiente.
  • Configuraci贸n en netlify:

    • Seleccionamos 鈥渘ew site from git鈥.
    • Elegimos la herramienta que usamos para guardar el repo.
    • Escogemos el repositorio.
    • Llenamos las opciones: owner, branch to deploy, build command, publish directory.
    • Deploy site.
    • Esperamos que se asigne un server para que se ejecute el servicio. Durante este momento netlify habilita una m谩quina virtual que descarga el repo y corre las instrucciones necesarias para tener node y una instancia que ejecute el proyecto. Despu茅s ejecuta el comando que asignamos y toma la carpeta resultante para ponerla en la p谩gina.
  • En el tiempo de compilaci贸n en el server, no tiene acceso a .env, por lo que no est谩 accediendo a las variables de entorno, las cuales afectan la p谩gina. Para solucionar esto vamos a:

    • Crear una carpeta llamada 鈥渟cripts鈥 (podemos crear todos los que necesitemos).
    • Creamos un archivo llamado 鈥渃reate-env.js鈥 que corre sobre node
    const fs = require("fs");
    //Requiere de file system que nos permite trabajar con el SO
    //Nos permite hacer, guardar o enviar datos en archivos de nuestra computadora
    
    fs.writeFileSync("./.env", `API=${process.env.API}\n`);
    //Creamos el archivo y lo llenamos con la informaci贸n que necesitamos
    //Este script se corre en el server.
    
    • Lo asignamos en netlify 鈫抎eploy settings 鈫 Environment 鈫 Edit variables

      key: API value: https://randomuser.me/api

      Y lo guardamos. Esta variable solo se la estoy compartiendo a netlify.

    • Antes de enviar los cambios ejecutamos el script antes del build. Modificamos el package.json. NOTA: Podemos anidar diferentes elementos en el script, aqu铆 el primero es ejecutar el script y el segundo mandarlo a producci贸n. Si uno de estos elementos se queda procesando un elemento que no termina no continua con el siguiente script.

    • Netlify autom谩ticamente escucha el cambio, y ya no tenemos que decirle nada.

    • Por defecto instala las dependencias.

TIP: Para los que quieran profundizar en este tema aqu铆 les dejo el Curso de Introducci贸n al Despliegue de Aplicaciones que forma parte de la Escuela de Desarrollo Web

Para los que clonaron el repositorio del profesor Oscar e hicieron commits a partir de este y no les permite subir a un repositorio propio deben hacer

git remote rename origin upstream
git remote add origin URL_TO_GITHUB_REPO
git push origin master

Para los que quieran instalar gitmoji:

npm i -g gitmoji-cli

Les comparto la opci贸n de cambiar el dominio por defecto:

Como les parece que 鈥 馃槂 鈥 Hoy 17 de septiembre 2021 a mi no me arrojo ningun Error . La duda queda, si realmente me quedo perfecto. jjejejej. SIn embargo, al presionar preview , el sitio no me funcion贸, lo muestra en blanco. 馃槮

Si tienen el problema de cuando hacen el build de forma local, el archivo .env se sobreescribe y le da el valor de undifined.
.
Se debe al script que realizamos.
.
Esto no nos dar谩 ning煤n problema en Netlify, dado que ya declaramos la variable API en la plataforma. Pero de forma local no tenemos ning煤n lugar de asignaci贸n de la variable, es por eso que nos sobreescribe el archivo .env y nos da el valor de undifined.
.
Para volver a ejecutar el proyecto de forma local de nuevo, lo 煤nico que debes hacer es:

  1. Editar el archivo package.json, borrar la l铆nea de ejecuci贸n del script que le agregamos en esta clase, que b谩sicamente ser铆a dejarlo tal y como estaba al inicio de esta clase.

  2. Editar tu archivo .env de nuevo coloc谩ndole una vez m谩s el link hacia la API.

  3. Guardas todos los cambios y haces de nuevo la empaquetaci贸n en modo producci贸n con webpack y listo.
    .
    Cabe a destacar de que estos cambios no los vamos a subir a nuestro repositorio de Github porque de lo contrario nuestra Web App en Netlify se romper谩.

lo hice, lo hice 馃槂 [](https://webpackplatziejercicio.netlify.app!

creamos un archivo netlify.toml
.
y dentro de el creamos una configuracion

[build]

  publis = "dist"
  command = "npm run build"

.
despues vamos a crear un script que nos ayudara a crear las variables de entorno en nuestro servidor
.
primero creamos una carpeta que se llame scripts
y un archivo que se llamara create-env.js
y dentro de el colocamos el siguiente codigo
.


const fs = require('fs');

	fs.writeFileSync('./.env',`API=${process.env.API}\n`)

despues vamos a la pagina de netlify a la seccion de build & deploy
.
vamos a la secci贸n que dice enviroment, y le damos en edit variables, y alli colocamos las variables que en este caso solo es la variable API y con su valor que es https://randomuser.me/api/

Les comparto un proyecto que hize utilizando la pokeAPI, poniendo en practica los conocimientos adquiridos en este curso y el de SPA con vanilla JS PokeDex.

Para los que est谩n en el 2022 netlify hizo algunas actualizaciones y para no tener errores con el comando npm run build, deben colocar su netlify.toml as铆:

## **netlify.toml**
[build]
    publish = 'dist'
    command = "CI= npm run build"

馃槃 Wow!, esta genial este curso

As铆 quedo el m铆o: estrellita

Para resolver los que tienen la p谩gina en blanco y errores en la consola, hagan esto:

file: create-env.js

const fs = require('fs');

fs.writeFileSync('./.env', `API=${process.env.API}\n`)

.env

API=https://randomuser.me/api/

Guarda, haz commit y luego me dices.

Algo importante de preparar el proyecto con webpack es poder despegarlo. Vamos a preparar lo que necesita el proyecto.

Primero necesitamos una cuenta en Netlify y tener subido nuestro proyecto a un repositorio y ahora si tenemos que preparar el proyecto, para esto necesitamos un nuevo archivo llamado 鈥榥etlify.toml鈥

Y dentro vamos a crear una configuracion que nos dira el build que vamos a ejecutar, donde le diremos con un publish sobre la carpeta que vamos a ejecutar y un command que es el que se va a ejecutar para el despliegue de nuestra aplicacion y ahora a subir los cambios de este proyecto.

iniciamos, creamos una nueva pagina y seleccionamos el repositorio y en la consola veremos los errores o cosas que pasan para iniciar la pagina.

Dentro podremos ver que no sabe que pasa con el archivo .env ya que este no fue enviado, enttonces tenemos que instalar las variables de entorno para que el servidor pueda leerlas. Esto es creando una carpeta en al raiz llamada 鈥渟cripts鈥 donde cregaremos un nuevo archivo llamado 鈥渃reate-env.js鈥 que corre en Node y dentro agregaremos el siguiente codigo:

const fs = require('fs');
fs.writeFileSync('./.env', `API=${process.env.API}\n`)

Y en DeploySettings en netlify agregaremos la variable con su valor para que solo esta este compartida con NETLIFY

Yo usar铆a un script hook, o sea crear铆a un script con un pre:script_name en lugar de ejecutar multiples scripts en un mismo command, siento que es mas limpio, pero igualmente es valido, igualmente dejo el c贸digo:

{
"pre:build": "node ./scripts/create-env.js",
"build": "webpack --mode production"
}

Re larga la clase, mal, re larga

As铆 quedo mi proyecto 馃槂
Proyecto
Repo

uff tuve un problema con la opci贸n de base directory, el cual es opcional y como lo puse pensando que era necesaria no se pudo hacer el build hasta que se lo quite.

aqu铆 esta mi sitio

Les comparto mis apuntes, junto a un mini-proyecto
https://github.com/naldorck01/helloworld-webpack

aqu铆 esta mi deploy jsportafolio

Despu茅s de muchos intentos logr茅 subirlo
Sitio
Repositorio

#NuncaParesDeAprender

Es un honor estar junto a Oscar Barajas en un repositorio de Github 馃槃

![](

Si alguno tiene problema de se ve blaco aunque no haya ningun error, tengan cuidado con el archivo que creamos (create-env.js), el tipo de comillas es muy importante al usar /n

Tuve un page 404 al hacer deploy y la raz贸n fue que mi archivo .html lo cree con el nombre de main.html y netlify lo buscaba como index.html. Entonces fue al archivo de configuraci贸n y cambie la propiedad filename del HtmlWebpacktPlugin y listo no tuve m谩s errores.

new HtmlWebpackPlugin(
        {
            filename: "index.html",
            title: "PROFILE APP",
            inject: true,  
            template: "./public/index.html"
        }),

Hubiera sido genial una explicaci贸n de por qu茅 netlify se us贸 para el deploy en vez de github. De todos modos leyendo en internet creo que entiendo un poco sus ventajas. Estuvo bien aprender a usar una herramienta nueva, abre paso a entender conceptos nuevos.

Les comparto todas mis notas del paso a paso de webpack, espero que les sirva y si es el caso puedan utilizarlo seg煤n sus necesidades.

https://github.com/ospinajuanp/FrontEnd-EscuelaFullStack-Platzi/blob/master/EscuelaPlatizWeb/Webpack/15-deploy-netlify-webpack.md

Si a alguien le sigue dando error luego de lo que el profesor nos explica es porque deben instalar webpack para que actualice el json ya que solo lo tenemos instalado en nuestro entorno local npm install webpack webpack-dev-server --save-dev

Les recomiendo si tienen inconvienientes al hacer el deploy en netlify revisar el archivo .env y volver a escribir la ruta de la api, ya que al ejecutar los comandos en producci贸n, este archivo queda como UNDEFINED

mi proyecto:

Me est谩 costando entender al 100% el curso, sin embargo, me sirvi贸 y hasta le cambi茅 el fondo proyectoNetlify

As铆 quedo mi proyecto con otra fuente.
https://jolly-euler-9979b2.netlify.app/

Por si quieren saber algo m谩s sobre env variables al desplegar proyectos en Netlify (https://docs.netlify.com/configure-builds/file-based-configuration/)

Yuhu! Ya est谩 desplegado: https://javascriptportfolio.netlify.app/

Comparto la Url del proyecto ya desplegado.

https://js-portafolio-anibal-ortega.netlify.app/

Excelente curso hasta al momento.

Excelente. Aqu铆 dejo mi despliegue: https://practical-ramanujan-e36b33.netlify.app/ 馃槑

Comet铆 varios errores pero si se pudo 馃コ
https://quizzical-wing-4e23ac.netlify.app/

Desplegado con 茅xito: https://cocky-torvalds-e01460.netlify.app/ lml

me gaste poco de tiempo de mas porque hab铆a escribido parte de c贸digo mal en el main.css con las declaraci贸n de las fuentes pero lo logre hacer funcionar le dejo mi guthub
https://github.com/miguelporras1994/CursoWepack.git por si quieren ver el c贸digo

Les dejo todo mi documento webpack.config comentado con las explicaciones de cada cosa que hicimos 馃槃

const path = require('path'); // Path es un modulo nativo de Node.js, sirve para trabajar con rutas de archivos y directorios
const HtmlWebpackPlugin = require('html-webpack-plugin'); // Plugin para generar un archivo HTML
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); // Plugin para extraer CSS a archivos separados
const CopyPlugin = require('copy-webpack-plugin'); // Plugin para copiar archivos y carpetas
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin'); // Plugin para minimizar CSS
const TerserPlugin = require('terser-webpack-plugin'); // Plugin para minimizar JS
const Dotenv = require('dotenv-webpack'); // Plugin para establecer variables de entorno
// const { CleanWebpackPlugin } = require('clean-webpack-plugin'); // Plugin para limpiar la carpeta dist

module.exports = { // Exportamos un objeto con la configuraci贸n de Webpack
    entry: './src/index.js', // Entry es el punto de entrada de nuestra aplicaci贸n
    output: {  // Output es donde Webpack va a colocar el c贸digo que genera
        path: path.resolve(__dirname, 'dist'), // Path es la ruta donde se va a colocar el c贸digo generado, en este caso en la carpeta dist, __dirname es una variable que contiene la ruta del archivo actual
        filename: '[name].[contenthash].js', // Filename es el nombre del archivo que se va a generar
        assetModuleFilename: 'assets/images/[hash][ext][query]', // AssetModuleFilename permite establecer el nombre del archivo que se va a generar, en este caso se va a generar un hash con la extensi贸n del archivo original
        // Un hash es un n煤mero que se genera a partir de un string, este n煤mero es 煤nico y se utiliza para identificar de forma 煤nica a un archivo
        clean: true, // Clean permite establecer si se va a limpiar la carpeta dist antes de generar el c贸digo
    },
    resolve: { // Resolve permite establecer las extensiones que va a leer Webpack
        extensions: ['.js'], // En este caso solo vamos a leer archivos con extensi贸n .js
        alias: { // Alias permite establecer alias para rutas
            '@utils': path.resolve(__dirname, 'src/utils/'), // En este caso estamos estableciendo un alias para la ruta src/utils/
            '@templates': path.resolve(__dirname, 'src/templates/'), // En este caso estamos estableciendo un alias para la ruta src/templates/
            '@styles': path.resolve(__dirname, 'src/styles/'), // En este caso estamos estableciendo un alias para la ruta src/styles/
            '@images': path.resolve(__dirname, 'src/assets/images/'), // En este caso estamos estableciendo un alias para la ruta src/assets/images/
        }
    },
    module: {
        // Module permite establecer reglas para los archivos
        rules: [ // Rules es un arreglo de objetos, cada objeto es una regla
        {
            test: /\.m?js$/, // Test permite identificar los archivos que se van a leer, en este caso solo los archivos que terminen en .js
            exclude: /node_modules/, // Exclude permite omitir archivos o carpetas, en este caso omitimos la carpeta node_modules
            use: { // Use permite establecer que loader se va a encargar del archivo
                loader: 'babel-loader', // Babel loader es un loader que permite transpilar el c贸digo JS moderno a JS compatible con navegadores antiguos
                }
            },
            {
                test: /\.css|.styl$/i, // Test permite identificar los archivos que se van a leer, en este caso solo los archivos que terminen en .css o .styl
                use: [MiniCssExtractPlugin.loader, 
                    'css-loader', // Use permite establecer que loader se va a encargar del archivo, en este caso vamos a usar dos loaders, el primero es para extraer el CSS a archivos separados y el segundo es para interpretar el c贸digo CSS
                    'stylus-loader'
                ]
            },
            {
                test: /\.png/, // Test permite identificar los archivos que se van a leer, en este caso solo los archivos que terminen en .png
                type: 'asset/resource', // Type permite establecer el tipo de m贸dulo que se va a generar, en este caso un recurso
            },
            {
                test: /\.(woff|woff2)$/, // Test permite identificar los archivos que se van a leer, en este caso solo los archivos que terminen en .woff o .woff2
                use: {
                    loader: 'url-loader', // Url loader es un loader que permite importar archivos como m贸dulos
                    options: {
                        limit: 10000, // Limit permite establecer un l铆mite en el tama帽o del archivo, en este caso si el archivo es menor a 10kb se va a convertir en un m贸dulo, de lo contrario se va a copiar
                        mimetype: "application/font-woff", // Mimetype permite establecer el tipo de archivo que se va a generar, en este caso un archivo WOFF
                        name: "[name].[contenthash].[ext]", // Name permite establecer el nombre del archivo que se va a generar
                        outputPath: "./assets/fonts/", // OutputPath permite establecer la ruta de salida del archivo
                        publicPath: "../assets/fonts/", // PublicPath permite establecer la ruta p煤blica del archivo
                        esModule: false, // EsModule permite establecer si se va a generar un m贸dulo ES
                        // Un modulo ES es un archivo que se puede importar en otro archivo JS como un m贸dulo
                    },
                },
            },
        ]
    },
    plugins: [  //Plugins permite establecer funcionalidades adicionales
        new HtmlWebpackPlugin({ //Este plugin permite generar un archivo HTML
            inject: true, // Inject permite establecer si se van a inyectar los scripts al archivo HTML
            template: './public/index.html', // Template es la ruta del archivo HTML que se va a generar
            filename: './index.html', // Filename es el nombre del archivo HTML que se va a generar
        }),
        new MiniCssExtractPlugin({
            filename: 'assets/[name].[contenthash].css', // Filename permite establecer el nombre del archivo CSS que se va a generar
        }), // Este plugin permite extraer el CSS a archivos separados
        new CopyPlugin({ // Este plugin permite copiar archivos y carpetas
            patterns: [ // Patterns es un arreglo de objetos, cada objeto es un archivo o carpeta que se va a copiar
                {
                    from: path.resolve(__dirname, "src", "assets/images"), // From es la ruta de los archivos que se van a copiar
                    to: "assets/images" // To es la ruta de destino de los archivos
                }
                    ]
        }),
        new Dotenv(), // Este plugin permite establecer variables de entorno
        // new CleanWebpackPlugin(), // Este plugin permite limpiar la carpeta dist

    ],
    optimization: { // Optimization permite establecer opciones de optimizaci贸n
        minimize: true, // Minimize permite establecer si se va a minimizar el c贸digo
        minimizer: [ // Minimizer es un arreglo de plugins que se van a encargar de minimizar el c贸digo
            new CssMinimizerPlugin(), // Este plugin permite minimizar CSS
            new TerserPlugin(), // Este plugin permite minimizar JS
        ]},
}

Pude desplegar mi proyecto, gracias a todos los comentarios que me ayudaron a lograrlo, ya que cuando el curso ya no es tan reciente muchas cosas van cambiando.
https://curso-webpack-oly.netlify.app/

netlify

Mucha satisfacci贸n cuando el deploy es correcto, les dejo el mio aqu铆

Entiendo que con GitHub Pages esto ya no es necesario.

Aqu铆 les dejo mi proyecto. Me tom茅 la molestia de cambiar los links por los de mis redes sociales, al ver que estaban los del profe GNDX鈥 No suelo usar twtitter, as铆 que puse mi linkedin.

as铆 se cambia la url del origin remoto y se pone la de tu propio repo
git remote remove origin
-remueves el del profe

git remote add origin [tu url del repo]
-agregas tu repo previamente echo

ya solo continua los pasos que te deja github
salt谩ndote el primero

Para aquellos que tienen conflicto a subirlo a un repo propio en GitHub dado que el proyecto orginal viene del repo del profe, aqu铆 mis pasos para solucionarlo:

  1. Crear su repo en GitHub.
  2. En su carpeta local:
    a. git add .
    b. git commit -am 鈥淐omentario relacionado a cambios鈥.
    c. git set git remote set-url origin +su repo URL+
    d. git fetch
    e. git pull origin main --allow-unrelated-histories (si les da conflictos aqu铆 como en la licencia que fue en mi caso, resuelvalo, salvan y hacen otro add . y un commit).
    f. git push origin main

Les comparto el enlace de mi proyecto para que puedan visualizarlo, fue complicado ya que no lograba hacerlo, https://curso-webpack-danny-galvan.netlify.app/ saludos

Al desplegarlo en Netlify me marcaba el error de que hab铆a un conflicto entre style-loader y mini-css-extract-plugin, as铆 que tube q remover style-loader del documento webpack.config.js y desinstalarlo desde la terminal con el comando npm uninstall style-loader -D

Buenas tardes compa帽eros si les aparece en blanco y tienen problemas con el CORS es que estan colocando el HTTP y luego HTTPS o viceversa el correcto es el segundo

Listo, pero no me permite publicar enlaces

Aqu铆 mi deploy. 馃憣
.
馃捇馃搩Leyendo un poco la documentaci贸n de netlify, me percat茅 de que no es necesario crear el archivo .toml, lo que hace ese archivo es reescribir las configuraciones que hagamos en la UI (osea la web).

鉁 en mi opini贸n, si queremos robustecer las configuraciones del proyecto lo veo 煤til, pero no es necesario.

ejercicio terminado! AQUI!

Tengan en cuenta que antes de esta clase en orden debe estar la clase 19.Webpack Dev Serve. Y por eso no ven en sus configuraciones de package.js la linea de scrip 鈥淪tart鈥. Sin embargo, no afecta la publicaci贸n del proyecto.

Bien, muy interesante la clase, aqu铆 mi deply listo.

Mi primer sitio webpack

En Netlify, me aparece sin nig煤n problema; pero, al ya verlo 鈥渓ive鈥, no me carga la API. Se ve blanca.

Podemos agregar la redirecci贸n? Es un 鈥淭ip鈥: Curso de Angular.
[[redirects]]
from = 鈥/*鈥
to = 鈥/index.html鈥
status = 200

Se puede usar s贸lo Github Page? o Vercel o Firebase? Es que, he visto que, recomiendas estos cuatro sitios para desplegar un sitio ( Deploy). Pregunto porque, quiero comenzar a subir mis proyectos (cursos e portafolio). Gracias.

Aqu铆 est谩 el m铆o

Acabo de hacer mi deploy y me sali贸 esto:

Hola buenas noches, comparto el deploy realizado link

Estaba a poquito de arrancarme los pelos, por suerte gracias al profe Oscar que nos explico como declarar las variables de entorno para la API lo solucion茅. Aqu铆 esta el deploy del proyecto

Llevaba media hora intentando hacer deploy de la pagina, y no habia caido en cuenta de que el archivo webpack.config.js lo tenia con watch:true 馃槄馃槄

excelente clase, muchas veces el archivo .env es el mayor detonanto a un error

Excelente !!!
Que bonitoooo 馃槶

Para cambiar el nombre de dominio, pueden ir a setting del sitio y cambiar el nombre de este y ya esta

Se puede user 鈥減rebuild鈥 (siempre que se agregue 鈥減re鈥 + el nombre del script, o 鈥減ost鈥 + el nombre del script, se ejecutar谩n esas sentencias antes y despu茅s respectivamente) y ejecutar el script antes de que se corra el build

Excelente 鈥 aqui el mio

Les comparto mi version del proyecto 馃敟
Repositorio: https://github.com/PerezCode/js-portfolio
Link en producci贸n: https://random-user-perezcode.netlify.app

Para que el proyecto sea visible en Internet Explorer 11, deben hacer lo siguiente:

  1. Deben instalar las siguientes dependencias:
npm install core-js && whatwg-fetch --save
  1. En ambos archivos config de webpack, deben establecer el siguiente entry:
entry: ["whatwg-fetch","core-js/stable","./src/index.js"],
  1. En ambos archivos config de webpack, agregar lo siguiente:
module.exports = {
...
target: ['web', 'es5'],
....
}