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. 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?
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. A continuación, puedes encontrar 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. Es decir, nosotros codificamos con el comando start, que monta un servidor de desarrollo donde podemos meter cambios en el código y verlos en el browser directamente. Sin embargo, esta no es la manera de entregar una aplicación a producción; no entregamos el código e instruimos ejecutar el comando start para arrancar la aplicación. La manera correcta es crear un build.
Para contestar a la pregunta de qué es un build, debemos hacer un repaso del código de create-react-app. Allí tenemos una carpeta public con un archivo index.html que utiliza create-react-app para acceder al código que escribimos mediante un root, que conecta a nuestro index.js en la carpeta src.
Entonces, hacer un build es entrar desde el punto de entrada index.js a la aplicación y seguir todos los import. Lo que hace esto es instruir a webPack para que vaya generando un archivo final .js muy pequeño que podrá descargarse lo más rápido posible. A la vez que se crea este archivo JavaScript final, webPack nos irá generando un archivo de CSS si se encuentra con imports de este tipo.
Todos estos archivos, junto al archivo HTML que genera los enlaces necesarios para crear la conexión con el JavaScript y el CSS, se pondrán en una carpeta. Es esta carpeta la que realmente pondremos en funcionamiento. Es decir, es este build el que mandaremos a producción, no el código que tenemos en nuestra carpeta src.
¿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 buildUna vez le des a enter en este comando, verás que se está creando una carpeta build. Este proceso no tarda demasiado. Al finalizar, verás una carpeta llamada build dentro de tu proyecto. Dentro de esta verás copiado el archivo index.html que estaba en public.
Sin embargo, este archivo no es completamente igual al original. Si pinchas sobre él, podrás ver que este index ha quedado lo más comprimido posible. Además, verás que hay una etiqueta script con la ruta al archivo JavaScript creado en el proceso de build. 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.
El paso final es entregar esta carpeta a un servidor para que puedan ser visualizados por quien pida la aplicación. A este proceso se le llama servir una aplicación. Existen muchas maneras de hacer esto, pues existen muchísimos servidores disponibles.
¿Te animas a seguir aprendiendo?
Ahora que sabes qué es y cómo funciona el comando build en create-react-app, 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!
