Prepara el entorno de desarrollo

0. Deben tenerse instalados todas las aplicaciones necesarias:

• Editor de código o IDE
  • Visual Code Studio
  • Sublime text
  • Notepad++
  • Atom
  • PHPStorm
• Cliente git (si no se emplea un IDE que lo traiga)
• Nodejs y npm
• [Shell] (si no se emplea un IDE que lo traiga)
  • cygwin
  • powershell: viene con windows
  • git bash: se puede seleccionar la opción de instalarlo junto con git
• cliente SSH
  • putty
  • superputty
  • mobaxterm
• cliente SFTP
  • filezilla
  • superputty
  • mobaxterm

1. Descargar del repositorio remoto el proyecto starter, si no se tiene en local. (documentación de referencia)

$ git clone git@bitbucket.org:SmartclipDev/starter.git

2. Crear la carpeta de nuestro nuevo proyecto
3. Copiar los archivos de configuración a la nueva carpeta y la carpeta src.
4. Modificar los archivos de configuración según las necesidades del proyecto.

• webpack.common.js (documentación de referencia)

entry: './src/index.js',  // change if needed
  output: {
    filename: 'index.js',  // change if needed
    path: path.resolve(__dirname, 'dist'),    // change if needed
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',  // change if needed
      filename: path.resolve(__dirname, 'dist', 'index.html'),  // change if needed
    }),
    
    // ...
  ],

• webpack.dev.js

devServer: {
  contentBase: path.join(__dirname, 'dist'),  // change if needed
  port: 9000,  // change if needed
  historyApiFallback: true,
},

• package.json (documentación de referencia)

{
    "name": "test-app", // project name
    "version": "0.1.0", // initial version
    "description": "",  // project description
    "main": "src/index.js", // main project file. Where the party starts.
    "scripts": {
        "start": "webpack-dev-server --open --config webpack.dev.js",
        "dist": "webpack --config webpack.prod.js",
        "test": "jest",
        "test:watch": "jest --watch"
    },
    "devDependencies": {
        "@babel/core": "^7.11.6",
        "@babel/preset-env": "^7.11.5",
        "@babel/preset-react": "^7.10.4",
        "babel-loader": "^8.0.6",
        "css-loader": "^3.6.0",
        "eslint": "^7.8.1",
        "html-webpack-plugin": "^3.2.0",
        "husky": "^4.3.0",
        "jest": "^24.9.0",
        "jsdoc": "^3.6.5",
        "mini-css-extract-plugin": "^0.8.2",
        "nodemon": "^2.0.4",
        "redoc-cli": "^0.9.12",
        "style-loader": "^1.2.1",
        "webpack": "^4.44.1",
        "webpack-cli": "^3.3.12",
        "webpack-dev-server": "^3.11.0",
        "webpack-merge": "^4.2.2"
    }
}

5. Añadir las dependencias de desarrollo o de producción necesarias.

• por terminal (documentación de referencia)

  $ npm install dev dependency-name
  $ npm i -D dependency-name
  

• añadiendo en el archivo package.json las nuevas dependencias (documentación de referencia)

6. Añadir las bibiotecas de Adtech Smartclip necesarias como dependencias.

• MCF Objects: Gestión de objetos añadiendo tipado fuerte
• MCF Components: Capa de abstracción sobre React y Material-UI
• Smart Ads: Definición de los objetos necesarios comunes a todas las applicaciones
• Smart Client Socket: Set de funciones para trabajar con servidores
• Smart Utils: Set de funciones de proposito general

Una vez añadidas quedarían de la siguiente forma:

"dependencies": {
  "mcf-components": "git+ssh://git@bitbucket.org/SmartclipDev/mcf-components.git#v0.2.0",
  "mcf-objects": "git+ssh://git@bitbucket.org/SmartclipDev/mcf-objects.git#v0.2.0",
  "smart-client-socket": "git+ssh://git@bitbucket.org/SmartclipDev/smart-client-socket.git#v0.2.0",
  "smart-ads": "git+ssh://git@bitbucket.org/SmartclipDev/smart-ads.git#v0.2.0",
  "smart-utils": "git+ssh://git@bitbucket.org/SmartclipDev/smart-utils.git#v0.1.4"
}

Es necesario revisar en los repositorios las últimas versiones de las bibliotecas para incluir la versión adecuada en el proyecto. Esto se hace mediante el número de la versión detrás del símbolo #.

7. Incluir las dependencias adicionales que sean necesarias.
8. Modificar la estructura de archivos y carpetas según lo que se haya cambiado en los archivos de configuración. Si no se han relizado modificaciones, la estructura será la siguiente:

app-name
    +-- src
        +-- index.js
        +-- index.html

9. Descargar e instalar todas las dependencias del proyecto (documentación de referencia)

$ npm install

10. Actualizar las dependencias a la última versión (documentación de referencia).

$ npm update

11. Iniciar el entorno de desarrollo para verificar que el funcionamiento es correcto.

$ npm run start

Debería abrirse una nueva pestaña en el navegador haciendo una petición al servidor local localhost en el puerto que se haya indicado en la configuración (por defecto 9000) y en la cual se puede leer un mensaje de bienvenida.

12. Crear el repositorio remoto en el workspace de bitbucket. Si se trata de una web-app, dentro del proyecto web-apps
13. Iniciar el repositorio local con git y añadir la referencia remota al repositorio local (documentación de referencia).
14. Verificar que el archivo .gitignore contiene todos los path necesarios (documentación de referencia)
15. Realizar el primer commit (documentación de referencia).