Initial commit

.devcontainer/devcontainer.json

@@ -0,0 +1,22 @@
+// For format details, see https://aka.ms/devcontainer.json. For config options, see the
+// README at: https://github.com/devcontainers/templates/tree/main/src/javascript-node
+{
+	"name": "Node.js",
+	// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
+	"image": "mcr.microsoft.com/devcontainers/javascript-node:0-16",
+
+	// Features to add to the dev container. More info: https://containers.dev/features.
+	// "features": {},
+
+	// Use 'forwardPorts' to make a list of ports inside the container available locally.
+	"forwardPorts": [3000],
+
+	// Use 'postCreateCommand' to run commands after the container is created.
+	"postCreateCommand": "npm install && node .devcontainer/welcome.js"
+
+	// Configure tool-specific properties.
+	// "customizations": {},
+
+	// Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
+	// "remoteUser": "root"
+}

.devcontainer/welcome.js

@@ -0,0 +1 @@
+console.log("Welcome!")

.eslintrc

@@ -0,0 +1,33 @@
+{
+  "parser": "@babel/eslint-parser",
+  "plugins": [
+    "react"
+  ],
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  },
+  "env": {
+    "browser": true,
+    "es6": true
+  },
+  "rules": {
+    "strict":0,
+    "no-unused-vars": 0,
+    "no-mixed-spaces-and-tabs": 0,
+    "no-debugger": 0,
+    "no-console": 1,
+    "semi": ["error", "always"],
+    "allowImportExportEverywhere": 0,
+    "comma-dangle": [1, { //when to use the last comma
+        "arrays": "never",
+        "objects": "never",
+        "imports": "never",
+        "exports": "never",
+        "functions": "ignore",
+    }],
+    "react/prop-types": [2]
+  },
+  "extends": ["eslint:recommended", "plugin:react/recommended"]
+}

.github/settings.yml

@@ -0,0 +1,27 @@
+repository:
+  has_wiki: false
+
+# Labels: define labels for Issues and Pull Requests
+labels:
+  - name: "bug"
+    color: c10000
+  - name: ":nerd_face: 4geeks student"
+    color: 7057ff
+  - name: "enhancement"
+    color: a2eeef
+  - name: "first-timers-only"
+    color: 69db89
+  - name: "good first issue"
+    color: 7057ff
+  - name: "help wanted"
+    color: 008672
+  - name: ":star: P1"
+    color: fbca04
+  - name: ":star: P2"
+    color: fbca04
+  - name: ":memo: bc-writter"
+    color: 98bde2
+  - name: ":computer: bc-coder"
+    color: 98bde2
+  - name: ":beetle: bc-inspector"
+    color: 98bde2

.gitignore

@@ -0,0 +1,68 @@
+# ignore all files starting with .
+.*
+
+# track this file .gitignore (i.e. do NOT ignore it)
+!.gitignore
+!.gitpod.yml
+!.devcontainer
+!.github
+!.vscode
+php_errorlog
+.log
+
+# track this file .gitignore (i.e. do NOT ignore it)
+!composer.json
+!webpack.config.js
+!package.json
+!webpack.production.js
+!webpack.development.js
+
+# track readme.md in the root (i.e. do NOT ignore it)
+!README.md
+
+# ignore OS generated files
+ehthumbs.db
+Thumbs.db
+
+# ignore Editor files
+*.sublime-project
+*.sublime-workspace
+*.komodoproject
+
+# ignore log files and databases
+*.log
+*.sql
+*.sqlite
+
+# ignore compiled files
+*.com
+*.class
+*.dll
+*.exe
+*.o
+*.so
+
+# ignore packaged files
+*.7z
+*.dmg
+*.gz
+*.iso
+*.jar
+*.rar
+*.tar
+*.zip
+
+# ignore node/grunt dependency directories
+node_modules/
+
+# ignore the dist directory were our bundle files are going to be
+public/*
+!public/index.html
+
+dist/*
+!dist/index.html
+
+!.gitkeep
+!.htaccess
+!.eslintrc
+.now

.gitpod.yml

@@ -0,0 +1,14 @@
+ports:
+  - port: 8080
+    onOpen: open-preview
+    visibility: public
+
+tasks:
+  - before: nvm install 16
+    init: npm install
+    command: npm run start
+
+
+vscode:
+  extensions:
+    - esbenp.prettier-vscode

.htaccess

@@ -0,0 +1,11 @@
+<IfModule mod_rewrite.c>
+
+  RewriteEngine On
+  RewriteBase /
+  RewriteRule ^index\.html$ - [L]
+  RewriteCond %{REQUEST_FILENAME} !-f
+  RewriteCond %{REQUEST_FILENAME} !-d
+  RewriteCond %{REQUEST_FILENAME} !-l
+  RewriteRule . /index.html [L]
+
+</IfModule>

.vscode/settings.json

@@ -0,0 +1,7 @@
+{
+    "editor.formatOnSave": true,
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "workbench.editorAssociations": {   
+        "*.md": "vscode.markdown.preview.editor"
+    }
+}

CHANGELOG.md

@@ -0,0 +1,22 @@
+# Changelog
+
+December 6, 2021
+
+- Upgraded all packages to latest version: Webpack v5, React 17, etc.
+- Disabled esLint.
+- The hot reload is not broken, we need to review how to implemented with the new webpack dev server because the `public` property is not allowed anymore as a paratmeter for the deServer, we tried the following iwthout any luck:
+
+```js
+  devServer: {
+    port,
+    hot: true,
+    allowedHosts: "all",
+    historyApiFallback: true,
+    static: {
+      directory: path.resolve(__dirname, "dist"),
+    },
+    client: {
+      webSocketURL: publicUrl
+    },
+  },
+```

README.md

@@ -0,0 +1,42 @@
+# Hello World with React boilerplate
+
+Start coding a react application
+
+> If you are working locally instead of using codespaces or gitpod, please follow [local installation steps](#local-installation-skip-if-you-are-working-on-codespaces-or-gitpod) and come back to this part of the readme.
+
+## How to start coding?
+
+- Install the packages with `$ npm install`.
+- Run the webpack server with `$ npm run start`
+
+You can update the `styles/index.css` or `js/index.js` depending on your needs.
+Add more files into your, `./src/js/components` or styles folder as you need them.
+
+## Local Installation (skip if you are working on codespaces or gitpod)
+
+Download the boilerplate using git
+
+```
+$ git clone https://github.com/4GeeksAcademy/react-hello.git
+$ cd react-hello
+```
+
+## Publish your website!
+
+This boilerplate is 100% compatible with the free [github pages](https://pages.github.com/) and [vercel](https://vercel.com/) hosting.
+
+It takes just 2 minutes to deploy, [click here to start the process](https://github.com/4GeeksAcademy/react-hello/blob/master/docs/DEPLOY.md).
+
+## Other features
+
+- Automatic Code Formatting: Use of [Prettier](https://prettier.io/) for automatic code indentation and formatting.
+- Error reporting: Use of [eslint](https://eslint.org/) for better error reporting.
+- Hot Deploy: Use of [Webpack Development Server](https://webpack.js.org/configuration/dev-server/) for hot deploy and live reload.
+- One-command publish of the code to github pages with `npm run deploy:github`.
+- Babel 7 (really fast).
+
+### Contributors
+
+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), and [Data Science Bootcamp](https://4geeksacademy.com/us/coding-bootcamps/datascience-machine-learning).
+
+You can find other templates and resources like this at the [school github page](https://github.com/4geeksacademy/).

deploy-to-github.js

@@ -0,0 +1,50 @@
+var ghpages = require('gh-pages');
+var Console = require('bc-console');
+var webpack = require('webpack');
+var path = require('path');
+var fs = require('fs');
+
+var remoteOriginUrl = require('remote-origin-url');
+var gh = require('parse-github-url');
+
+if (!fs.existsSync(path.resolve(__dirname,'.git'))){
+    Console.error("No repository found on this project");
+    Console.help("Follow this steps to create a new repository for your project: http://kbroman.org/github_tutorial/pages/init.html");
+    return;
+}
+
+const origin = remoteOriginUrl.sync();
+if(!origin || origin==''){
+    Console.error("No remote origin has been found on this repository");
+    Console.help(`Check your remote by doing:
+$ git remote get-url origin
+
+Add your remote by doing:
+$ git remote add origin <github_repository_url>
+`);
+return;
+}
+Console.info("The remote was found successfully, starting the deploy from here: "+origin);
+
+const repository = gh(origin);
+const compiler = webpack(require(path.resolve(__dirname, 'webpack.config.js')));
+compiler.run((err, stats) => {
+    if (err || stats.hasErrors()) {
+      console.log(stats.toString({
+        colors: true
+      }));
+      Console.error("There was an error compiling, review above");
+      return;
+    }
+    Console.info("Your code compiled successfully, proceding to deploy...");
+    ghpages.publish('public', function(err) {
+        if(err){
+            console.error(err);
+            Console.error("There was an error publishing your website");
+            return;
+        }
+        //https://<github_user>.github.io/<repository-name>
+        Console.success(`Your website has been deployed successfully here: https://${repository["owner"]}.github.io/${repository["name"]}/`);
+        Console.info(`Changes on your deployed website take 10 min aprox to show, please be patient. Happy coding!`);
+    });
+});

dist/index.html

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Hello React World</title>
+    </head>
+    <body>
+        <div id="app"></div>
+        <script type="text/javascript" src="./bundle.js"></script>
+    </body>
+</html>

docs/DEPLOY.md

@@ -0,0 +1,18 @@
+# How to deploy your website using this boilerplate
+
+First make sure to choose your platform:
+
+## Deploying to Github pages:
+
+It's great for small projects that don't require your own domain or real use with users and growth, for example: Personal portfolio websites.
+
+```sh
+$ npm run deploy:github
+```
+
+## Deploying to `Vercel` (recomended)
+
+This hosting is ideal for production ready website and requires only two steps.
+
+- Create an account on vercel.com and come back to this tutorial.
+- After creating the account type on the command line: `$ vercel` and follow the steps.