From 6b0faeb2e5e1f84432b1c5303d5fb3e1455e4b7a Mon Sep 17 00:00:00 2001 From: Daniel Garcia Date: Thu, 1 Jul 2021 13:02:41 +0200 Subject: [PATCH] Initial commit --- .babelrc | 3 + .editorconfig | 10 ++++ .eslintrc.js | 52 +++++++++++++++++ .gitignore | 3 + .nvmrc | 1 + README.md | 143 ++++++++++++++++++++++++++++++++++++++++++++++ package.json | 32 +++++++++++ src/index.html | 14 +++++ src/index.js | 5 ++ webpack.common.js | 42 ++++++++++++++ webpack.dev.js | 13 +++++ webpack.prod.js | 7 +++ 12 files changed, 325 insertions(+) create mode 100644 .babelrc create mode 100644 .editorconfig create mode 100644 .eslintrc.js create mode 100644 .gitignore create mode 100644 .nvmrc create mode 100644 README.md create mode 100644 package.json create mode 100644 src/index.html create mode 100644 src/index.js create mode 100644 webpack.common.js create mode 100644 webpack.dev.js create mode 100644 webpack.prod.js diff --git a/.babelrc b/.babelrc new file mode 100644 index 0000000..2b7bafa --- /dev/null +++ b/.babelrc @@ -0,0 +1,3 @@ +{ + "presets": ["@babel/preset-env", "@babel/preset-react"] +} diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..8822ba2 --- /dev/null +++ b/.editorconfig @@ -0,0 +1,10 @@ +# top-most EditorConfig file +root = true + +# Unix-style newlines with a newline ending every file +[*] +end_of_line = lf +insert_final_newline = true +charset = utf-8 +indent_style = space +indent_size = 2 diff --git a/.eslintrc.js b/.eslintrc.js new file mode 100644 index 0000000..d5fe488 --- /dev/null +++ b/.eslintrc.js @@ -0,0 +1,52 @@ +module.exports = { + 'plugins': ['jest'], + 'env': { + 'commonjs': true, + 'es6': true, + 'node': true, + 'jest/globals': true, + }, + 'extends': 'eslint:recommended', + 'globals': { + 'Atomics': 'readonly', + 'SharedArrayBuffer': 'readonly', + }, + 'parserOptions': { + 'ecmaVersion': 2018, + 'sourceType': 'module', + }, + 'rules': { + 'indent': [ + 'error', + 2, + ], + 'linebreak-style': [ + 'error', + 'unix', + ], + 'quotes': [ + 'error', + 'single', + { 'avoidEscape': true }, + ], + 'semi': [ + 'error', + 'never', + ], + 'comma-dangle': [ + 'error', + 'always-multiline', + ], + 'arrow-parens': [ + 'error', + 'as-needed', + ], + 'no-var': [ + 'error', + ], + 'prefer-const': ['error', { + 'destructuring': 'all', + 'ignoreReadBeforeAssign': true, + }], + }, +} diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..400900c --- /dev/null +++ b/.gitignore @@ -0,0 +1,3 @@ +/node_modules/ +/.idea/ +/dist/ \ No newline at end of file diff --git a/.nvmrc b/.nvmrc new file mode 100644 index 0000000..28193ca --- /dev/null +++ b/.nvmrc @@ -0,0 +1 @@ +v12.13.1 diff --git a/README.md b/README.md new file mode 100644 index 0000000..bdc60b4 --- /dev/null +++ b/README.md @@ -0,0 +1,143 @@ +# 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](https://git-scm.com/downloads) (si no se emplea un IDE que lo traiga) + - [Nodejs y npm](https://nodejs.org/en/download/) + - [Shell] (si no se emplea un IDE que lo traiga) + - [cygwin](https://cygwin.com/install.html) + - powershell: viene con windows + - git bash: se puede seleccionar la opción de instalarlo junto con git + - cliente SSH + - [putty](https://www.microsoft.com/en-us/p/putty-unofficial/9n8pdn6ks0f8?activetab=pivot:overviewtab) + - [superputty](https://www.puttygen.com/superputty) + - [mobaxterm](https://mobaxterm.mobatek.net/) + - cliente SFTP + - [filezilla](https://filezilla-project.org/download.php) + - [superputty](https://www.puttygen.com/superputty) + - [mobaxterm](https://mobaxterm.mobatek.net/) + +1. Descargar del repositorio remoto el proyecto **starter**, si no se tiene en local. [(documentación de referencia)](https://git-scm.com/book/en/v2/Git-Basics-Getting-a-Git-Repository) + ```shell + $ 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)](https://webpack.js.org/guides/production/#setup) +```javascript +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 +```javascript +devServer: { +contentBase: path.join(__dirname, 'dist'), // change if needed +port: 9000, // change if needed +historyApiFallback: true, +}, +``` + + - package.json [(documentación de referencia)](https://docs.npmjs.com/cli/v6/configuring-npm/package-json) +```json +{ + "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)](https://nodejs.dev/learn/npm-dependencies-and-devdependencies) + ```shell + $ npm install dev dependency-name + $ npm i -D dependency-name + ``` + - añadiendo en el archivo package.json las nuevas dependencias [(documentación de referencia)](https://docs.npmjs.com/specifying-dependencies-and-devdependencies-in-a-package-json-file#manually-editing-the-packagejson-file) +6. Añadir las bibiotecas de **Adtech Smartclip** necesarias como dependencias. + - [MCF Objects](https://bitbucket.org/SmartclipDev/mcf-objects/src/master/): Gestión de objetos añadiendo tipado fuerte + - [MCF Components](https://bitbucket.org/SmartclipDev/mcf-components/src/master/): Capa de abstracción sobre React y Material-UI + - [Smart Ads](https://bitbucket.org/SmartclipDev/smart-ads/src/master/): Definición de los objetos necesarios comunes a todas las applicaciones + - [Smart Client Socket](https://bitbucket.org/SmartclipDev/smart-client-socket/src/master/): Set de funciones para trabajar con servidores + - [Smart Utils](https://bitbucket.org/SmartclipDev/smart-utils/src/master/): Set de funciones de proposito general + + Una vez añadidas quedarían de la siguiente forma: +```json +"dependencies": { + "mcf-components": "git+ssh://git@bitbucket.org/SmartclipDev/mcf-components.git#v0.1.3", + "mcf-objects": "git+ssh://git@bitbucket.org/SmartclipDev/mcf-objects.git#v0.1.4", + "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.1.3" + "smart-utils": "git+ssh://git@bitbucket.org/SmartclipDev/smart-utils.git#v0.1.3" +} +``` +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](https://docs.npmjs.com/cli/v6/commands/npm-install)) +```shell +$ npm install +``` +10. Actualizar las dependencias a la última versión ([documentación de referencia](https://docs.npmjs.com/cli/v6/commands/npm-update)). +```shell +$ npm update +``` +11. Iniciar el entorno de desarrollo para verificar que el funcionamiento es correcto. +```shell +$ 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](https://bitbucket.org/SmartclipDev/). Si se trata de una web-app, dentro del [proyecto web-apps](https://bitbucket.org/SmartclipDev/workspace/projects/WA) +13. Iniciar el repositorio local con git y añadir la referencia remota al repositorio local ([documentación de referencia](https://git-scm.com/book/en/v2/Git-Basics-Working-with-Remotes)). +14. Verificar que el archivo .gitignore contiene todos los path necesarios ([documentación de referencia](https://git-scm.com/docs/gitignore)) +15. Realizar el primer commit ([documentación de referencia](https://git-scm.com/book/en/v2/Git-Basics-Recording-Changes-to-the-Repository)). \ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 0000000..9788942 --- /dev/null +++ b/package.json @@ -0,0 +1,32 @@ +{ + "name": "app-name", + "version": "0.1.0", + "description": "", + "main": "src/index.js", + "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" + } +} \ No newline at end of file diff --git a/src/index.html b/src/index.html new file mode 100644 index 0000000..866dd9c --- /dev/null +++ b/src/index.html @@ -0,0 +1,14 @@ + + + + + + Starter project + + + +
+ + + + \ No newline at end of file diff --git a/src/index.js b/src/index.js new file mode 100644 index 0000000..be976d5 --- /dev/null +++ b/src/index.js @@ -0,0 +1,5 @@ +const greetingElement = document.createElement('div'); +const greetingContent = document.createTextNode('Hi there. Time to create the future!'); +greetingElement.appendChild(greetingContent); +const pageReference = document.getElementById('app'); +document.body.insertBefore(greetingElement, pageReference); \ No newline at end of file diff --git a/webpack.common.js b/webpack.common.js new file mode 100644 index 0000000..0b97388 --- /dev/null +++ b/webpack.common.js @@ -0,0 +1,42 @@ +const path = require('path'); +const HtmlWebpackPlugin = require('html-webpack-plugin'); +const MiniCssExtractPlugin = require('mini-css-extract-plugin'); + +module.exports = { + entry: './src/index.js', + output: { + filename: 'index.js', + path: path.resolve(__dirname, 'dist'), + // library: 'smartClientSocket', + // libraryTarget: 'umd' + }, + plugins: [ + new HtmlWebpackPlugin({ + template: './src/index.html', + filename: path.resolve(__dirname, 'dist', 'index.html'), + }), + new MiniCssExtractPlugin({ + filename: '[name].css', + chunkFilename: '[id].css', + }), + ], + module: { + rules: [{ + test: /\.(js|jsx)$/, + exclude: /node_modules/, + use: { + loader: 'babel-loader', + }, + }, + { + test: /\.css$/, + use: [{ + loader: MiniCssExtractPlugin.loader, + }, + 'css-loader', + ], + }, + ], + }, + +}; \ No newline at end of file diff --git a/webpack.dev.js b/webpack.dev.js new file mode 100644 index 0000000..e7c8d29 --- /dev/null +++ b/webpack.dev.js @@ -0,0 +1,13 @@ +const path = require('path'); +const merge = require('webpack-merge'); +const common = require('./webpack.common.js'); + +module.exports = merge(common, { + mode: 'development', + devtool: 'inline-source-map', + devServer: { + contentBase: path.join(__dirname, 'dist'), + port: 9000, + historyApiFallback: true, + }, +}); diff --git a/webpack.prod.js b/webpack.prod.js new file mode 100644 index 0000000..3698d41 --- /dev/null +++ b/webpack.prod.js @@ -0,0 +1,7 @@ +const merge = require('webpack-merge'); +const common = require('./webpack.common.js'); + +module.exports = merge(common, { + mode: 'production', + devtool: 'source-map', +});