Conoce todo sobre el comando build en create-react-app

Debes tener presente que una vez terminas de programar tu aplicación web, todavía queda un paso final: construir el archivo que mandarás a producción para que el resto del equipo pueda ver el resultado. Por eso, en este post, te enseñaremos qué es y cómo funciona el comando build en create-react-app, una palabra fundamental para finalizar tus proyectos React.

¿Qué es el comando build en create-react-app?

Para empezar, el comando build en create-react-app es uno de los comandos que encontramos por defecto dentro del archivo package.json al crear una aplicación con create-react-app. Si no conoces de lo que te estamos hablando, te recomendamos leer nuestros posts sobre cómo crear una aplicación con create-react-app y código de una aplicación creada con create-react-app.

Entonces, cuando abras el archivo package.json de tu proyecto creado con esta herramienta, verás una sección llamada scripts con los comandos start, build, test y eject. Ahora te mostraremos la línea de código del comando start:

//react create build
"start": "react-scripts start"

El comando anterior debe parecerte familiar, pues es el que usamos para arrancar el entorno de desarrollo e ir codificando. Es decir, lo insertamos dentro de nuestra terminal para dar inicio a nuestra aplicación. A continuación, te mostraremos cómo se ve y cómo funciona otro de los comandos en este objeto scripts: el comando build en create-react-app.

¿Cómo funciona el comando build en create-react-app?

Por defecto, el comando build en create-react-app se ve de la siguiente manera:

//react js build
"build": "react-scripts build",

¿Para qué sirve este comando build? Este comando es el que nos va a generar la aplicación final por medio de los siguientes pasos:

1. Se comienza el desarrollo utilizando el comando start, el cual monta un servidor de desarrollo donde es posible hacer cambios en el código y visualizarlos directamente en el navegador.
2. Este método no es adecuado para desplegar una aplicación en producción; no se debe entregar el código y pedir que se ejecute el comando start para iniciar la aplicación.
3. La forma correcta de preparar una aplicación para producción es mediante la creación de un build.
4. Para explicar qué es un build, es necesario revisar el código de create-react-app. En este entorno, se tiene una carpeta llamada public que contiene un archivo index.html. Este archivo utiliza create-react-app para acceder al código que escribimos mediante un elemento root, que a su vez se conecta a nuestro index.js en la carpeta src.
5. Hacer un build implica iniciar desde el archivo index.js y seguir todos los import.
6. Este proceso instruye a webPack para que compile y genere un archivo final .js muy pequeño, optimizado para ser descargado rápidamente.
7. Además, mientras se crea este archivo JavaScript, webPack también generará un archivo de CSS si encuentra import de este tipo en el código.
8. Todos estos archivos, incluyendo el archivo HTML que enlaza con el JavaScript y el CSS, se colocan en una carpeta destinada para la producción.
9. Es esta carpeta, y no el código fuente en la carpeta src, la que se desplegará en el entorno de producción.

¿Cómo se ejecuta el comando build en create-react-app?

Para ejecutar el comando build en create-react-app basta con insertar la siguiente línea en tu terminal:

//react script build
npm run build

1. Una vez le des a enter en este comando, verás que se está creando una carpeta build. Este proceso no tarda demasiado.
2. Al finalizar, verás una carpeta llamada build dentro de tu proyecto.
3. Dentro de esta verás copiado el archivo index.html que estaba en public.
4. Ten en cuenta que este archivo no es completamente igual al original.
5. Si das clic sobre él, podrás ver que este index ha quedado lo más comprimido posible.
6. Además, verás que hay una etiqueta script con la ruta al archivo JavaScript creado en el proceso de build.
7. Lo mismo ha sucedido con el archivo CSS, que ha sido creado en la carpeta build y ha sido importado en el HTML con una etiqueta link.
8. El paso final es entregar esta carpeta a un servidor para que puedan ser visualizados por quien pida la aplicación.
9. A este proceso se le llama servir una aplicación. Existen muchas maneras de hacer esto, pues hay muchísimos servidores disponibles.

Ahora que sabes qué es y cómo funciona el comando react build, te animamos a que te atrevas a crear tus propios proyectos con esta gran herramienta. Para seguir aprendiendo sobre el desarrollo de todo tipo de proyectos para la web, no solo en React, sino también en JavaScript, HTML o CSS, entre otros, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp. ¿Te animas a seguir aprendiendo con nosotros? ¡Inscríbete ya y transforma tu vida!