Deploy a Netlify

Asi quedo mi proyecto

🥳 ¡Pude desplegarlo con éxito!

• https://avatar-webpack-devferx.netlify.app

Estuve 1 hora sin entender por que no me funcionaba el deploy, hasta que me doy cuenta que escribí el directorio “scripts” como “script”, 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: “build.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 = “npm 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 Enviroment → Enviroment 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 “Inicia 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 “new 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 “scripts” (podemos crear todos los que necesitemos).
  • Creamos un archivo llamado “create-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 →deploy 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

• Aqui pueden ver mi despliegue

• y el repositorio
  

  

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 ‘netlify.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 “scripts” donde cregaremos un nuevo archivo llamado “create-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

Logre desplegarlo 😄
https://keen-panini-73c67a.netlify.app/

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

Logrado!

https://js-portfolioxd.netlify.app/

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

JS Portfolio

https://webpack-with-api.netlify.app/

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/)

https://randomuserwebpack.netlify.app

Desplegado!
Page(https://kurostranger.netlify.app/)

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

Por aca dejo mi proyecto:

https://frosty-goldwasser-413e17.netlify.app/

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

con repositorio de bitbuket :
git clone https://[email protected]/Andy00/js-portfolio.git
sitio aun valido :
https://jade-travesseiro-bbc1d7.netlify.app/

PAGINA PUBLICADA!!

[:]](https://phenomenal-selkie-bce063.netlify.app/)

Despliegue exitoso: https://thriving-tapioca-db4325.netlify.app/

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/

Mi Deploy en Netlify y mi Repositorio 😉

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 “Comentario 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

https://platzi-webpack-kfiguera.netlify.app/

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!

Ejercicio culminado
(https://proyectokiron23.netlify.app/)

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 “Start”. Sin embargo, no afecta la publicación del proyecto.

Buen dia campeon
Increible…

repo https://github.com/brunomaldonado/webpack
deploy https://brunomaldonado.netlify.app/

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 “live”, no me carga la API. Se ve blanca.

Podemos agregar la redirección? Es un “Tip”: 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

Yay!

Mi sitio desplegado

Acabo de hacer mi deploy y me salió esto:

Hola buenas noches, comparto el deploy realizado link

https://angry-meitner-364640.netlify.app

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

desplegado https://sharp-hawking-4edae2.netlify.app/

Se logró
https://modest-heisenberg-d77285.netlify.app/

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 “prebuild” (siempre que se agregue “pre” + el nombre del script, o “post” + 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

Aquí está mi ejercicio: https://cv-portafolio.netlify.app

Y mi repositorio: https://github.com/andreimyvc/js-portfolio

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'],
....
}