Initial commit
This commit is contained in:
Daniel Garcia
commit
6b0faeb2e5
12 changed files with 325 additions and 0 deletions
3
.babelrc
Normal file
3
.babelrc
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"presets": ["@babel/preset-env", "@babel/preset-react"]
|
||||
}
|
||||
10
.editorconfig
Normal file
10
.editorconfig
Normal file
|
|
@ -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
|
||||
52
.eslintrc.js
Normal file
52
.eslintrc.js
Normal file
|
|
@ -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,
|
||||
}],
|
||||
},
|
||||
}
|
||||
3
.gitignore
vendored
Normal file
3
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
/node_modules/
|
||||
/.idea/
|
||||
/dist/
|
||||
1
.nvmrc
Normal file
1
.nvmrc
Normal file
|
|
@ -0,0 +1 @@
|
|||
v12.13.1
|
||||
143
README.md
Normal file
143
README.md
Normal file
|
|
@ -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)).
|
||||
32
package.json
Normal file
32
package.json
Normal file
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
14
src/index.html
Normal file
14
src/index.html
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Starter project</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script src="index.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
5
src/index.js
Normal file
5
src/index.js
Normal file
|
|
@ -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);
|
||||
42
webpack.common.js
Normal file
42
webpack.common.js
Normal file
|
|
@ -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',
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
};
|
||||
13
webpack.dev.js
Normal file
13
webpack.dev.js
Normal file
|
|
@ -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,
|
||||
},
|
||||
});
|
||||
7
webpack.prod.js
Normal file
7
webpack.prod.js
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
const merge = require('webpack-merge');
|
||||
const common = require('./webpack.common.js');
|
||||
|
||||
module.exports = merge(common, {
|
||||
mode: 'production',
|
||||
devtool: 'source-map',
|
||||
});
|
||||
Loading…
Reference in a new issue