├── .devcontainer └── devcontainer.json ├── .eslintrc ├── .gitignore ├── .gitpod.yml ├── .vscode └── settings.json ├── README.es.md ├── README.md ├── _utils ├── clean-stack.js └── prettier.js ├── learn.json ├── package-lock.json ├── package.json ├── src ├── app.js ├── assets │ └── img │ │ ├── 4geeks.ico │ │ └── rigo-baby.jpg ├── index.html └── style.css └── webpack.config.js /.devcontainer/devcontainer.json: -------------------------------------------------------------------------------- 1 | // For format details, see https://aka.ms/devcontainer.json. For config options, see the 2 | // README at: https://github.com/devcontainers/templates/tree/main/src/javascript-node 3 | { 4 | "name": "Node.js", 5 | // Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile 6 | "image": "mcr.microsoft.com/devcontainers/javascript-node:0-16", 7 | 8 | // Features to add to the dev container. More info: https://containers.dev/features. 9 | // "features": {}, 10 | 11 | // Use 'forwardPorts' to make a list of ports inside the container available locally. 12 | "forwardPorts": [3000], 13 | 14 | // Use 'postCreateCommand' to run commands after the container is created. 15 | "postCreateCommand": "npm install", 16 | 17 | // Configure tool-specific properties. 18 | "customizations": { 19 | // Configure properties specific to VS Code. 20 | "vscode": { 21 | // Set *default* container specific settings.json values on container create. 22 | "settings": { 23 | "editor.formatOnSave": true, 24 | "editor.defaultFormatter": "esbenp.prettier-vscode", 25 | "workbench.editorAssociations": { 26 | "*.md": "vscode.markdown.preview.editor" 27 | } 28 | }, 29 | "extensions": [ "esbenp.prettier-vscode" ] 30 | } 31 | } 32 | 33 | // Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root. 34 | // "remoteUser": "root" 35 | } 36 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "parser": "babel-eslint", 3 | "env": { 4 | "browser": true, 5 | }, 6 | "rules": { 7 | "strict":0, 8 | "no-unused-vars": 0, 9 | "no-console": 1, 10 | "semi": ["error", "always"], 11 | "allowImportExportEverywhere": false, 12 | "comma-dangle": [1, { //when to use the last comma 13 | "arrays": "never", 14 | "objects": "never", 15 | "imports": "never", 16 | "exports": "never", 17 | "functions": "ignore", 18 | }], 19 | }, 20 | "extends": ["eslint:recommended"] 21 | } 22 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | #ignore the git local files and the c9 project files 2 | .git 3 | .c9 4 | 5 | # ignore the repositories where webpack puts the bundles 6 | dist/ 7 | public/ 8 | node_modules/ 9 | -------------------------------------------------------------------------------- /.gitpod.yml: -------------------------------------------------------------------------------- 1 | # Command to start on workspace startup (optional) 2 | tasks: 3 | - before: nvm install 16 4 | init: npm install; 5 | command: npm run start; 6 | # Ports to expose on workspace startup (optional) 7 | ports: 8 | - port: 3000 9 | onOpen: open-preview 10 | visibility: public 11 | 12 | vscode: 13 | extensions: 14 | - esbenp.prettier-vscode 15 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "editor.formatOnSave": true, 3 | "editor.defaultFormatter": "esbenp.prettier-vscode", 4 | "workbench.editorAssociations": { 5 | "*.md": "vscode.markdown.preview.editor" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /README.es.md: -------------------------------------------------------------------------------- 1 | # Hola Mundo con Vanilla JS 2 | 3 | > ⚠️ Esta plantilla se ha deprecado, y no recibe mantenimiento o mejoras. [Por favor utiliza esta otra en su lugar](https://github.com/4GeeksAcademy/vanillajs-hello-vite). 4 | 5 | Empieza a programar un sitio web JS/HTML/CSS en 30 segundos abriendo esta plantilla con nuestro puente de [One-Click Coding](https://s.4geeks.com/start?repo=https://github.com/4GeeksAcademy/vanillajs-hello) o localmente en tu computador. 6 | 7 | ## Antes de empezar 8 | 9 | Una vez tu editor de codigo este abierto, instala los paquetes escribiendo: `npm install`. 10 | 11 | ### ¿Cómo ejecuto mi sitio web para ver los cambios en vivo? 12 | 13 | Escribe en la línea de comandos `$ npm run start` y escribe localhost en el navegador. 14 | 15 | ### ¿Dónde escribo mi código? 16 | 17 | Depende del lenguaje, pero tienes `./src/app.js`, `./src/style.css` y `./src/index.html` respectivamente. Puedes agregar nuevos `.html` como desees, solo asegúrate de importarlo en el `app.js`. 18 | 19 | > Nota: recuerda que el flujo de trabajo de JS comienza dentro de `window.onload`. 20 | 21 | ## Resolución de problemas 22 | 23 | ### No veo mis cambios... 24 | 25 | Cada vez que cambies cualquier archivo dentro de la carpeta `./src`, la URL pública del sitio web se actualizará automáticamente (es un proceso llamado hot deploy). Recuerda también actualizar limpiando la caché (`command+shift+r` en Mac, `control+shift+r` en PC y Linux). 26 | 27 | ### ¿Cómo incluyo más imágenes en mi proyecto? 28 | 29 | Agrégalas dentro de la carpeta `./src/assets/img` y luego impórtalas desde cualquiera de tus archivos JS. Ejemplo: `import "../assets/img/rigo-baby.jpg";`. 30 | 31 | ### ¿Cómo incluyo más archivos JS? 32 | 33 | Simplemente agrega los archivos en la carpeta src e importa los archivos/variables en tu app.js. Ejemplo: `import myVar from "./file2.js"`. 34 | 35 | ### ¿Cómo publico el sitio web? 36 | 37 | Esta plantilla es 100% compatible con el alojamiento gratuito de GitHub Pages. Publica tu sitio web ejecutando: 38 | 39 | ```bash 40 | $ npm run deploy 41 | ``` 42 | 43 | ¡Muy fácil y en solo un paso! Sube a tu rama __main__ y utiliza el alojamiento gratuito que viene con [GitHub Pages](https://help.github.com/articles/configuring-a-publishing-source-for-github-pages/#enabling-github-pages-to-publish-your-site-from-master-or-gh-pages), el proyecto está listo para ser publicado. Recuerda elegir ejecutar la Página de GitHub desde tu rama principal. 44 | 45 | ### Gracias 46 | 47 | Esta plantilla fue creada como parte del [curso de programacion](https://4geeksacademy.com/es/curso-de-programacion-desde-cero?lang=es) de 4Geeks Academy por [Alejandro Sanchez](https://twitter.com/alesanchezr) y muchos otros contribuyentes. Descubre más sobre nuestro [Curso de Desarrollador Full Stack](https://4geeksacademy.com/es/coding-bootcamps/desarrollador-full-stack?lang=es), [Bootcamp de Ciencia de Datos](https://4geeksacademy.com/es/coding-bootcamps/curso-datascience-machine-learning?lang=es) o [Curso de Ciberseguridad](https://4geeksacademy.com/es/coding-bootcamps/curso-ciberseguridad?lang=es). 48 | 49 | Puedes encontrar otras plantillas y recursos como este en la [página de GitHub de la escuela](https://github.com/4geeksacademy/). 50 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | # Hello World with Vanilla JS 3 | 🇪🇸 [Spanish version](./README.es.md). 4 | 5 | > ⚠️ This template has been deprecated, and it's not receiving any more maintenance. [Please use this one instead](https://github.com/4GeeksAcademy/vanillajs-hello-vite). 6 | 7 | 8 | Start coding a JS/HTML/CSS website in 30 seconds by opening this template using 4Geeks' [One-Click Coding](https://s.4geeks.com/start?repo=https://github.com/4GeeksAcademy/vanillajs-hello) or locally on your computer. 9 | 10 | ## Before you begin 11 | 12 | Install the packages by typing: `npm install`. 13 | 14 | 15 | ### How do I run my website to see live changes? 16 | 17 | 18 | Type on the command line `$ npm run start` and type localhost on the browser. 19 | 20 | ### Where do I write my code? 21 | 22 | It depends on the language, but you have `./src/app.js`, `./src/style.css` and `./src/index.html` respectively, you can add new `.html` as you please, just make sure to import it on the `app.js`. 23 | 24 | > Note: remember that the JS workflow starts inside `window.onload`. 25 | 26 | 27 | ## Troubleshooting 28 | 29 | ### I don't see my changes... 30 | 31 | Everytime you change any file inside the `./src` folder the website's public URL will automatically refresh the changes (it's a process called hot deploy) 32 | Remember also to refresh cleaning the cache (`command+shift+r` on Mac, `control+shift+r` on PC & Linux) 33 | 34 | ### How do I include more images in my project? 35 | 36 | Add them inside the `./src/assets/img` folder and import them from any of your JS files. E.g: `import "../assets/img/rigo-baby.jpg";` 37 | 38 | ### How do I include more JS files? 39 | 40 | Just add the files into the src folder and import the file/variables into your app.js. E.g: `import myVar from "./file2.js"` 41 | 42 | ### How do I publish the website? 43 | 44 | This boilerplate is 100% compatible with the free GitHub pages hosting. Publish your website by running: 45 | 46 | ```bash 47 | $ npm run deploy 48 | ``` 49 | 50 | Very easy and in just one step! Push to your __main__ branch and use the free hosting that comes with [GitHub pages](https://help.github.com/articles/configuring-a-publishing-source-for-github-pages/#enabling-github-pages-to-publish-your-site-from-master-or-gh-pages), the project is ready to be published. Remember to choose to run the Github Page from your main branch. 51 | 52 | ### Thank you 53 | 54 | This template was built as part of the 4Geeks Academy [Coding Bootcamp](https://4geeksacademy.com/us/coding-bootcamp) by [Alejandro Sanchez](https://twitter.com/alesanchezr) and many other contributors. Find out more about our [Full Stack Developer Course](https://4geeksacademy.com/us/coding-bootcamps/part-time-full-stack-developer), [Data Science Bootcamp](https://4geeksacademy.com/us/coding-bootcamps/datascience-machine-learning) or [CyberSecurity Bootcamp](https://4geeksacademy.com/us/coding-bootcamps/cybersecurity) 55 | 56 | You can find other templates and resources like this at the [school's GitHub page](https://github.com/4geeksacademy/). 57 | 58 | -------------------------------------------------------------------------------- /_utils/clean-stack.js: -------------------------------------------------------------------------------- 1 | 2 | 'use strict'; 3 | 4 | const StackUtils = require('stack-utils'); 5 | const stack = new StackUtils({cwd: process.cwd(), internals: StackUtils.nodeInternals()}); 6 | const chalk = require('chalk'); 7 | 8 | function displayError(severity, error) { 9 | return "error!!"; 10 | const baseError = formatTitle(severity, severity); 11 | console.log("baseError", baseError) 12 | return concat( 13 | `${baseError} ${removeLoaders(error.file)}`, 14 | '', 15 | error.message, 16 | (error.origin ? error.origin : undefined), 17 | '', 18 | error.infos 19 | ); 20 | } 21 | 22 | function removeLoaders(file) { 23 | if (!file) { 24 | return ""; 25 | } 26 | const split = file.split('!'); 27 | const filePath = split[split.length - 1]; 28 | return `in ${filePath}`; 29 | } 30 | 31 | function format(errors, type) { 32 | return errors 33 | // .filter(isDefaultError) 34 | .reduce((accum, error) => ( 35 | accum.concat(displayError(type, error)) 36 | ), []); 37 | } 38 | 39 | module.exports = format; -------------------------------------------------------------------------------- /_utils/prettier.js: -------------------------------------------------------------------------------- 1 | const prettier = require("prettier"); 2 | const fs = require("fs"); 3 | const path = require("path"); 4 | 5 | const DEFAULT_EXTENSIONS = prettier.getSupportInfo 6 | ? prettier 7 | .getSupportInfo() 8 | .languages.map(l => l.extensions) 9 | .reduce((accumulator, currentValue) => accumulator.concat(currentValue)) 10 | : [ 11 | ".css", 12 | ".graphql", 13 | ".js", 14 | ".json", 15 | ".jsx", 16 | ".less", 17 | ".sass", 18 | ".scss", 19 | ".ts", 20 | ".tsx", 21 | ".vue", 22 | ".yaml", 23 | ]; 24 | 25 | const DEFAULT_ENCODING = "utf-8"; 26 | 27 | const DEFAULT_CONFIG_FILE = `${process.cwd()}/.prettierrc`; 28 | 29 | module.exports = class PrettierPlugin { 30 | constructor(options) { 31 | options = options || {}; 32 | 33 | // Encoding to use when reading / writing files 34 | this.encoding = options.encoding || DEFAULT_ENCODING; 35 | delete options.encoding; 36 | 37 | // Only process these files 38 | this.extensions = options.extensions || DEFAULT_EXTENSIONS; 39 | delete options.extensions; 40 | 41 | // Utilize this config file for options 42 | this.configFile = options.configFile || DEFAULT_CONFIG_FILE; 43 | delete options.configFile; 44 | 45 | // Resolve the config options from file to an object 46 | const configOptions = prettier.resolveConfig.sync(this.configFile) || {}; 47 | 48 | // Override Prettier options from config if any are specified 49 | this.prettierOptions = Object.assign(configOptions, options); 50 | 51 | // Fail silently 52 | this.failSilently = options.failSilently || false; 53 | delete options.failSilently; 54 | } 55 | 56 | apply(compiler) { 57 | compiler.hooks.emit.tapAsync('Prettier', (compilation, callback) => { 58 | const promises = []; 59 | compilation.fileDependencies.forEach(filepath => { 60 | if (this.extensions.indexOf(path.extname(filepath)) === -1) { 61 | return; 62 | } 63 | 64 | if (/node_modules/.exec(filepath)) { 65 | return; 66 | } 67 | promises.push(new Promise((resolve, reject) => { 68 | fs.readFile(filepath, this.encoding, (err, source) => { 69 | if (err) { 70 | return reject(err); 71 | } 72 | 73 | try{ 74 | const prettierSource = prettier.format(source, Object.assign({}, this.prettierOptions, { filepath })); 75 | if (prettierSource !== source) { 76 | fs.writeFile(filepath, prettierSource, this.encoding, err => { 77 | if (err) { 78 | return reject(err); 79 | } 80 | resolve(); 81 | }); 82 | } else { 83 | resolve(); 84 | } 85 | } 86 | catch(err){ 87 | if(this.failSilently) resolve(); 88 | else return reject(err); 89 | } 90 | }); 91 | })); 92 | }); 93 | 94 | Promise.all(promises).then(() => { 95 | callback(); 96 | }).catch(err => { 97 | callback(err); 98 | }); 99 | }); 100 | } 101 | }; 102 | -------------------------------------------------------------------------------- /learn.json: -------------------------------------------------------------------------------- 1 | { 2 | "autoPlay": false, 3 | "title": { 4 | "en": "Vanilla.js Starter Template for beginners", 5 | "es": "Plantilla Inicial de Vanilla.js para principiantes" 6 | }, 7 | "description": { 8 | "en": "This is a starter template for Vanilla.js projects. It includes a basic folder structure with separation between CSS, JS and HTML files. It also uses Vite to kickstart your project and it can be deployed to Vercel in just one click", 9 | "es": "Este es un template inicial para proyectos en Vanilla.js. Incluye una estructura básica de carpetas con separación entre archivos CSS, JS y HTML. También utiliza Vite para iniciar tu proyecto y puede ser desplegado en Vercel con un solo clic." 10 | }, 11 | "repository": "https://github.com/4GeeksAcademy/vanillajs-hello", 12 | "preview": "https://repository-images.githubusercontent.com/130237499/fc593900-78de-11ea-8d19-fb66acf4d7fe", 13 | "projectType": "template", 14 | "difficulty": "beginner", 15 | "technologies": ["HTML", "CSS", "Javascript", "DOM", "VITE", "MODULE BUNDLER"] 16 | } 17 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vanillajs-hello", 3 | "version": "1.0.0", 4 | "description": "Professional Boilerplate for Vanilla.js Web Apps", 5 | "private": true, 6 | "scripts": { 7 | "start": "webpack-dev-server --mode development --port 3000 --open", 8 | "build": "webpack --mode development --verbose --colors --display-error-details", 9 | "deploy": "node deploy-to-github.js" 10 | }, 11 | "repository": { 12 | "type": "git", 13 | "url": "git+https://github.com/4GeeksAcademy/vanillajs-hello.git" 14 | }, 15 | "keywords": [ 16 | "Vanilla.js", 17 | "Boilerplate", 18 | "WebPack", 19 | "Boilerplate", 20 | "BreatheCode" 21 | ], 22 | "babel": { 23 | "presets": [ 24 | "@babel/preset-env" 25 | ] 26 | }, 27 | "author": "Alejandro Sanchez", 28 | "license": "ISC", 29 | "bugs": { 30 | "url": "https://github.com/4GeeksAcademy/vanillajs-hello/issues" 31 | }, 32 | "homepage": "https://github.com/4GeeksAcademy/vanillajs-hello#readme", 33 | "dependencies": { 34 | "@popperjs/core": "^2.10.1", 35 | "bootstrap": "^5.1.1" 36 | }, 37 | "devDependencies": { 38 | "@babel/cli": "^7.4.3", 39 | "@babel/core": "^7.4.3", 40 | "@babel/preset-env": "^7.4.3", 41 | "babel-eslint": "^10.0.1", 42 | "babel-loader": "^8.0.5", 43 | "bc-console": "0.0.2", 44 | "bc-webpack-error-reporting-plugin": "0.0.2", 45 | "clean-stack": "^3.0.1", 46 | "css-loader": "^3.5.1", 47 | "error-overlay-webpack-plugin": "^0.2.0", 48 | "escape-string-regexp": "^1.0.5", 49 | "eslint": "^4.19.1", 50 | "eslint-loader": "^2.0.0", 51 | "file-loader": "^6.0.0", 52 | "friendly-errors-webpack-plugin": "^1.7.0", 53 | "gh-pages": "^1.2.0", 54 | "html-loader": "^1.1.0", 55 | "html-webpack-plugin": "^4.3.0", 56 | "parse-github-url": "^1.0.2", 57 | "prettier": "^1.19.1", 58 | "prettier-webpack-plugin": "^1.1.0", 59 | "remote-origin-url": "^1.0.0", 60 | "stack-utils": "^2.0.3", 61 | "style-loader": "^1.1.3", 62 | "webpack": "^4.44.2", 63 | "webpack-cli": "^3.3.11", 64 | "webpack-dev-server": "^3.11.0" 65 | } 66 | } 67 | -------------------------------------------------------------------------------- /src/app.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | import "bootstrap"; 3 | import "./style.css"; 4 | 5 | import "./assets/img/rigo-baby.jpg"; 6 | import "./assets/img/4geeks.ico"; 7 | 8 | window.onload = function() { 9 | //write your code here 10 | console.log("Hello Rigo from the console!"); 11 | }; 12 | -------------------------------------------------------------------------------- /src/assets/img/4geeks.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/4GeeksAcademy/vanillajs-hello-deprecated/9431161d59e7cc61747c573eb32624fb91a07ca2/src/assets/img/4geeks.ico -------------------------------------------------------------------------------- /src/assets/img/rigo-baby.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/4GeeksAcademy/vanillajs-hello-deprecated/9431161d59e7cc61747c573eb32624fb91a07ca2/src/assets/img/rigo-baby.jpg -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Hello Rigo with Vanilla.js 7 | 13 | 14 | 15 | 16 |
17 |

Hello Rigo!

18 | 19 |

20 | If this text is not centered and yellow, you probably have 21 | an error 22 |

23 |
24 | Made with ❤️ by 25 | 4Geeks Academy 26 |
27 |
28 | 29 | 30 | -------------------------------------------------------------------------------- /src/style.css: -------------------------------------------------------------------------------- 1 | @import "~bootstrap/dist/css/bootstrap.min.css"; 2 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | 3 | const PrettierPlugin = require("./_utils/prettier.js"); 4 | const cleanStack = require("./_utils/clean-stack.js"); 5 | const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin'); 6 | const ErrorOverlayPlugin = require('error-overlay-webpack-plugin'); 7 | const WebpackErrorReporting = require('bc-webpack-error-reporting-plugin'); 8 | const HtmlWebpackPlugin = require('html-webpack-plugin') 9 | 10 | const port = 3000; 11 | let publicUrl = `http://localhost:${port}`; 12 | if(process.env.GITPOD_WORKSPACE_URL){ 13 | const [schema, host] = process.env.GITPOD_WORKSPACE_URL.split('://'); 14 | publicUrl = `${port}-${host}`; 15 | } 16 | 17 | module.exports = { 18 | mode: 'development', 19 | entry: ['./src/app.js'], 20 | output: { 21 | path: path.resolve(__dirname, 'public'), 22 | filename: 'main.bundle.js', 23 | sourceMapFilename: '[name].js.map' 24 | }, 25 | devtool: "source-map", 26 | devServer: { 27 | historyApiFallback: true, 28 | public: publicUrl, 29 | stats: 'errors-warnings', 30 | }, 31 | module: { 32 | rules: [ 33 | { 34 | test: /\.js$/, 35 | exclude: /node_modules/, 36 | use: ['babel-loader', 'eslint-loader'] 37 | }, 38 | { 39 | test: /\.css$/, 40 | use: ['style-loader', 'css-loader'] 41 | }, 42 | { 43 | test: /\.(png|svg|jpg|gif|ico)$/, 44 | use: { 45 | loader: 'file-loader', 46 | options: { name: '[name].[ext]' } 47 | } 48 | }, 49 | { 50 | test: /\.html$/i, 51 | use: { 52 | loader: 'html-loader', 53 | options: { 54 | attributes: false 55 | } 56 | } 57 | } 58 | ] 59 | }, 60 | plugins: [ 61 | new WebpackErrorReporting({ 62 | hookURL: process.env.BC_ERROR_HOOK, 63 | username: process.env.BC_STUDENT_EMAIL, 64 | token: process.env.BC_ASSETS_TOKEN, 65 | compiler: "webpack", 66 | language: "html,css,javascript", 67 | framework: "vanillajs" 68 | }), 69 | new FriendlyErrorsWebpackPlugin({ 70 | // additionalFormatters: [cleanStack] 71 | }), 72 | new ErrorOverlayPlugin(), 73 | new HtmlWebpackPlugin({ 74 | filename: "index.html", 75 | template: "src/index.html" 76 | }), 77 | new PrettierPlugin({ 78 | failSilently: true 79 | }), 80 | ] 81 | }; 82 | --------------------------------------------------------------------------------