Flujo de Trabajo para Pasar una Aplicación en Desarrollo a Producción

Guía para subir a un VPS una aplicación desarrollada con HTML y JavaSctript con código ECMAScript 6 y el módulo Moment instalado con npm. En el entorno de desarrollo se creará un Bundle con Webpack y se transpilará el código con Babel para poder ser interpretado por los distintos navegadores. Usaré Node para gestionar este proceso.Seguidamente se creará un repositorio en Github al que subiré el código empaquetado.Por último se clonará el repositorio y se instalará en el servidor.

Crear aplicación con la siguiente estructura de carpetas y archivos

Dispongo de una aplicación desarrollada con Node y el módulo Moment instalado con la siguiente estructura:

.
├── node_modules
├── package.json
├── index.js
└── public
    ├── index.html

Tanto index.js, index.html como la carpeta public hay que crearlas.

index.js

const moment = require("moment");
let time = moment().startOf('day').fromNow();
const relativeTime = () => document.getElementById('tiempoTranscurrido').innerText=(`Tiempo transcurrido: ${time}`);
relativeTime();

En este fragmento de código en ECMAScript 6 se llama al módulo Moment .

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Moment</title>
</head>
<body>
    <h1>Moment</h1>
    <p id="tiempoTranscurrido"></p>
    <script src="bundle.js"></script>
</body>
</html>

En la línea 11 se carga el archivo bundle.js ,el cual será creado con Webpack en el siguiente apartado.

Crear el Bundle con Webpack y Babel

Webpack

Webpack es un empaquetador de módulos para aplicaciones modernas hechas en JavaScript.

Instalar los siguientes módulos:

webpack
webpack-cli , la interface de línea de comandos de webpack
webpack-dev-server , servidor de desarrollo para webpack

Con la opción –save-dev, para guardar la configuración de los módulos en el archivo package.json sólo en desarrollo:

npm install --save-dev webpack webpack-dev-server webpack-cli

En el package.json debe aparecer lo siguiente:

  "devDependencies": {
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.11.0"
  }

Crear archivo de configuración en la raíz de la aplicación:

webpack.config.json

module.exports = {
    entry: "./index.js", 
        path: __dirname + "/public", //Indica dónde vamos a colocar el bundler
        filename: "bundle.js" // Se nombra así por default
    },
    devServer:{
        contentBase: "./public"
    }// Indicamos que en public está el contenido que tiene que servir
}

Ejecutar webpack desde la línea de comandos:

./node_modules/.bin/webpack

Esto hace que se cree en la carpeta public el archivo bundle.js, en el cual ,se encuentra empaquetado el archivo index.js y la dependencia moment.

Babel

Babel es un transpilador que convierte un nuevo estándar a una versión totalmente compatible de JavaScript.

Instalar los siguientes paquetes:

@babel/core
@babel/preset-env , diccionario a utilizar.
@bable-loader , permite transpilar archivos usando Babel y webpack.

El archivo pakege.json quedaría así:

  "devDependencies": {
    "@babel/core": "^7.10.2",
    "@babel/preset-env": "^7.10.2",
    "babel-loader": "^8.1.0",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.11.0"
  }

Añadir el siguiente módulo a webpack.config.json:

    module:{
        rules:[
            {
                test: /\.(js)$/,
                exclude: /node_modules/,
                use: ['babel-loader']
            }
        ]
    },
    resolve:{
        extensions:['*','.js']
    }

Este plugin hace que todos los archivos js, excluyendo los contenidos en node_modules pasen por babel-loader. Este va a tomar una directiva la cual hay que agregar en package.json:

  "author": "Guti",
  "license": "ISC",
  "babel":{
    "presets":[
      "@babel/preset-env"
    ]
  }

Ejecutar de nuevo webpack:

./node_modules/.bin/webpack

Esto agrega el código JavaScript transpilado al archivo bundle.js.

Programar tareas

Puede resultar útil programar tareas mediante npm durante el desarrollo, para ello añadimos los siguientes scripts al archivo package.json :

  "scripts": {
    "build": "webpack --progress -p",
    "server": "webpack-dev-server"
  }

npm run build , ejecuta webpack mostrando cada paso.
npm run server , corre un servidor en localhost:8080 con live reloading (cada vez que modifico y guardo el código también se modifica bundle.js).

Subir el código a GitHub

En la carpeta public inicializar git:

git init

Crear el archivo .gitignore para indicarle que no suba los modulos de Node:

node_modules

Crear repositorio en GitHub:

https://github.com/gutifer666/deploy-webpack-babel.git

Subir el proyecto:

git add .
git commit -m 'Primer commit'
git remote add origin https://github.com/gutifer666/deploy-webpack-babel.git
git push -u origin master

Clonar desde el servidor

Descargar el repositorio de GitHub:

git clone https://github.com/gutifer666/deploy-webpack-babel.git

Con esto ya está la aplicación sirviéndose en producción.