01. Configuración Inicial para el Proyecto Yard Sales | ESandries

18819

Recursos de interés:

Requisitos antes de empezar:

Es como requisito que ya hayas configurado todo lo necesario para que puedas trabajar con NodeJs, HTML, CSS y JS. Tener conocimientos en lo esencial de HTML, CSS y JS. Es requisito haber realizado el Curso de Práctico de Frontend Developer de TeffCode en Platzi donde comprenderás mejor este proyecto.

Recomendaciones:

Si te pierdes o tienes una duda puedes poner tu twit con el #ESandriesPlatzi y etiquetando a “@ESandries” para que así él te pueda ayudar. O puedes unirte a los grupos de estudio de Platzi en telegram si das click aquí

<h1>Configuración antes de empezar.</h1>

01 Crear nuestro proyecto

Como todo inicio, vas a empezar creando una carpeta donde estará todo el proyecto. Lo puedes crear de manera manual en el explorador de archivos o desde la terminal. A continuación, les muestro como pueden crear una carpeta desde la terminal.

mkdir proyecto-yard-sale
#MaKeDIRectory

01.1 Inicias Git para el control de versiones.

git init

01.2 Inicias NPM

npm init

Vas a rellenar de acuerdo a lo que necesites. Recuerda que esté será tu proyecto.

01.3 Empieza a instalar los paquetes NPM que usaras.

Vas a ejecutar lo que esta abajo para así empezar a instalar las dependencias que vas a usar para el manejo de React en tu proyecto.

npm install react react-dom

La siguiente línea la vas a usar para instalar lo necesario para usar babel. Babel es una herramienta que te va ayudar a convertir el código de React a JavaScript. Para poder usar Babel debes configurarlo creando un archivo “.babelrc” la creación de este archivo lo veremos en el tutorial 02 Primeros Pasos | ESandries.

npm install -D @babel/core @babel/preset-env @babel/preset-react

Ahora vas a proceder a instalar las dependencias necesarias para trabajar con WebPack. Este tal WebPack será tu nuevo mejor amigo empacador. Tu mejor amigo empacador se encargará de unir todo el código que crees en una carpetita. A esa carpetita le llamaremos dist.

npm install -D webpack webpack-cli webpack-dev-server

Ahora vas a instalar el loader para babel. ¿Qué es un loader? Un loader de una manera sencilla, será las herramientas que ocupará tu mejor amigo para empacar. Entonces para que tu mejor amigo pueda empacar lo que consiga de Babel le vas a instalar este tal “babel-loader” a tu proyecto y luego le vas a decir a tu mejor amigo que la use en casos específicos.

npm install -D babel-loader

Como vas a estar trabajando con estilos (Styles en inglés) vas a necesitar instalar el style-loader para que tu mejor amigo pueda empacar estilos. Además, le vas a instalar css-loader para el manejo de CSS. Si vas a seguir el manejo de los estilos con el preprocesador Sass como esta en este curso. Será necesario que instales la dependencia de sass y el sass-loader para que tu mejor amigo pueda empacar sass.

npm install -D css-loader style-loader sass sass-loader

¿Recuerdas que el navegador lee unos documentos en formato HTML? Bueno, en este proyecto no será la excepción. Como vas a usar html es necesario instalar html-loader para que tu mejor amigo pueda empacar también html.

npm install -D html-loader

Como vas a usar iconos en formato SVG será necesario que instales svg-url-loader para que tu mejor amigo pueda empacar estos archivos.

npm install -D svg-url-loader

Por último, agregas dos plugins. Estos serán como agregarle super poderes a tus amigos.

npm install -D html-webpack-plugin mini-css-extract-plugin

01.4 Configuración de WebPack.Config

const path = require('path');
//Aquí creamos una cajita que adentro requiere tener la ruta pathconst HtmlWebpackPlugin = require('html-webpack-plugin');
//Aquí creamos una cajita que adentro requiere tener el plugin html-webpack-pluginconst { Template } = require('webpack');
//Aquí creamos una cajita Template adentro requiere tener webpackconst MiniCssExtractPlugin = require('mini-css-extract-plugin'); 
//Aquí creamos una cajita que adentro requiere tener el plugin mini-css-extrac-pluginmodule.exports = {
	mode: 'development',
	//Aquí le dices a tu mejor amigo que empaque todo como si fuera para probar//Si pones le dices que empaque como si fuera para un clienteentry: './src/index.js',
	//Aquí le dices que el punto de entrada de donde debe sacar su guía sería './src/index.js'output: {
	//Aquí le empiezas a decir donde te pondrá el paquete final.path: path.resolve(__dirname, 'dist'),
		//La ruta para poner debe resolver cual es la ruta principal del proyecto//Ahí debe empacar todo en una carpeta llamada "dist"filename: 'bundle.js',
		//El nombre el paquete será "bundle.js"publicPath: '/'
	},
	resolve: {
		extensions: ['.js', '.jsx']
		//aquí le decimos que vamos a trabajar con archivos ".js" y ".jsx"
	},
	module: {
	rules: [
		//Aquí le diremos a nuestro mejor amigo que reglas debe seguir a la hora de empacar.
		{
			//Regla 01test: /\.(js|jsx)$/, //Aqui dice que si encuentra un archivo .js o .jsxexclude: /node_modules/, //Que ese archivo NO este en node_modulesuse: { //utilice lo siguiente para empacar:loader: 'babel-loader'// el loader llamado "babel-loader"
			}
		},
		{
			//Regla 02test: /\.html$/, //Aquí dice que si encuentra un archivo .htmluse: { //utilice lo siguiente para empacarloader: 'html-loader'//el loader llamado: "html-loader"
			}
		},
		{
			//Regla 03test: /\.(css|scss)$/, //Aquí dice que si encuentra un archivo .css o .scssuse: [ //utilice lo siguiente para empacar'style-loader', //Loader para empacar estilos llamado "style-loader"'css-loader', //Loader para empacar css llamado "css-loader"'sass-loader'//Loader para emparcar sass llamado "sass-loader"
			]
	   },
    {
			//Regla 04test: /\.svg$/, //Aquí dice que si encuentra un archivo .svguse: [ //utilice lo siguiente para empacar
				{
					loader: 'svg-url-loader', // Loader de llamado "svg-url-loader" conoptions: { //las siguientes configuraciones:limit: 10000, //un limite de 10000
						},
					},
				 ],
				}
		  ]
    },
    plugins: [
		//Aquí vas a poner los plugins y le darás super poderes a tu mejor amigo WeobPacknew HtmlWebpackPlugin(
            {
                template: './public/index.html', //Usa de plantilla este documentofilename: './index.html'//Vas a terminar generando un archivo llamado index.htlm
            }
        ),
        new MiniCssExtractPlugin({
				//Aquí le damos el super poder para crear los archivos de css que iran a tu paquete para clientefilename: '[name].css'
        })
    ],
		//LO DE ABAJO COPIA Y PEGALO, ES UNA CONFIGURACIÓN PARA DEV SERVERdevServer: {
        historyApiFallback: true,
    } //MÁS INFO SOBRE ESTA CONFIGURACIÓN EN EL CURSO DE WEBPACK 
}

01.5 Agregas scripts a Package.json

Los scripts son como comando o instrucciones que daremos desde la terminal.

"scripts": {
    "start": "webpack serve --open", //Añade esta linea a tu package.js//la idea es que cuando ejecutes la instrucción de "start" se ejecute WepPack.//Se le active el devServe y sirva el paquete.//Luego va a abrir el paquete en tu navegador predeterminando."build": "webpack --mode production"//Añade esta Linea a tu package.js
  },

¡Listo! Ya has configurado lo necesario para dar tus primeros pasos en el proyecto de Yard Sales. Ahora puedes seguir en el tutorial 02 Primeros Pasos | ESandries

hace 3 años