From 6327b4fb6ef0a712daa769437b62fd1880daa561 Mon Sep 17 00:00:00 2001 From: "Begerad, Stefan" Date: Thu, 9 Sep 2021 15:05:19 -0400 Subject: [PATCH] config-tut: copied config-tutorial to pages --- pages/.babelrc | 6 +++++ pages/.eslintrc | 13 ++++++++++ pages/.prettierrc | 5 ++++ pages/README.md | 1 + pages/index.html | 10 ++++++++ pages/package.json | 39 +++++++++++++++++++++++++++++ pages/src/index.js | 15 ++++++++++++ pages/src/style/header.less | 3 +++ pages/src/style/main.less | 5 ++++ pages/webpack.config.js | 49 +++++++++++++++++++++++++++++++++++++ 10 files changed, 146 insertions(+) create mode 100644 pages/.babelrc create mode 100644 pages/.eslintrc create mode 100644 pages/.prettierrc create mode 100644 pages/README.md create mode 100644 pages/index.html create mode 100644 pages/package.json create mode 100644 pages/src/index.js create mode 100644 pages/src/style/header.less create mode 100644 pages/src/style/main.less create mode 100644 pages/webpack.config.js diff --git a/pages/.babelrc b/pages/.babelrc new file mode 100644 index 0000000..0960c01 --- /dev/null +++ b/pages/.babelrc @@ -0,0 +1,6 @@ +{ + "presets": [ + "@babel/preset-env", + "@babel/preset-react" + ] +} \ No newline at end of file diff --git a/pages/.eslintrc b/pages/.eslintrc new file mode 100644 index 0000000..60df05f --- /dev/null +++ b/pages/.eslintrc @@ -0,0 +1,13 @@ +{ + "parser": "babel-eslint", + "extends": "react", + "env": { + "browser": true, + "node": true + }, + "settings": { + "react": { + "version": "detect" + } + } +} \ No newline at end of file diff --git a/pages/.prettierrc b/pages/.prettierrc new file mode 100644 index 0000000..3a4d1e8 --- /dev/null +++ b/pages/.prettierrc @@ -0,0 +1,5 @@ +{ + "semi": true, + "singleQuote": true, + "trailingComma": "es5" +} \ No newline at end of file diff --git a/pages/README.md b/pages/README.md new file mode 100644 index 0000000..211ffe9 --- /dev/null +++ b/pages/README.md @@ -0,0 +1 @@ +[source](https://www.freecodecamp.org/news/how-to-set-up-deploy-your-react-app-from-scratch-using-webpack-and-babel-a669891033d4/) \ No newline at end of file diff --git a/pages/index.html b/pages/index.html new file mode 100644 index 0000000..8de457a --- /dev/null +++ b/pages/index.html @@ -0,0 +1,10 @@ + + + + + react-config-tutorial + + +
+ + diff --git a/pages/package.json b/pages/package.json new file mode 100644 index 0000000..aeef8c8 --- /dev/null +++ b/pages/package.json @@ -0,0 +1,39 @@ +{ + "name": "react-config-tutorial", + "version": "1.0.0", + "description": "react config tutorial", + "main": "index.js", + "scripts": { + "start": "webpack-dev-server --mode development", + "test": "echo \"Error: no test specified\" && exit 1", + "format": "prettier --write \"src/**/*.js\"", + "eslint-fix": "eslint --fix \"src/**/*.js\"", + "build": "webpack --mode production" + }, + "author": "Stefan Begerad", + "license": "GPL-3.0-or-later", + "dependencies": { + "react": "^17.0.2", + "react-dom": "^17.0.2" + }, + "devDependencies": { + "@babel/core": "^7.15.5", + "@babel/preset-env": "^7.15.4", + "@babel/preset-react": "^7.14.5", + "babel-eslint": "^10.1.0", + "babel-loader": "^8.2.2", + "css-loader": "^6.2.0", + "eslint": "^7.32.0", + "eslint-config-react": "^1.1.7", + "eslint-loader": "^4.0.2", + "eslint-plugin-react": "^7.25.1", + "html-webpack-plugin": "^5.3.2", + "less": "^4.1.1", + "less-loader": "^10.0.1", + "prettier": "2.4.0", + "style-loader": "^3.2.1", + "webpack": "^5.52.0", + "webpack-cli": "^4.8.0", + "webpack-dev-server": "^4.1.1" + } +} diff --git a/pages/src/index.js b/pages/src/index.js new file mode 100644 index 0000000..76b0c2f --- /dev/null +++ b/pages/src/index.js @@ -0,0 +1,15 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import './style/main.less'; + +/* + *component Welcome + *using class syntax from ES6 + *Webpack needs Babel to process ES6 into ES5 syntaxes in order for this class to work + */ +class Welcome extends React.Component { + render () { + return

react-config-tutorial

; + } +} +ReactDOM.render(, document.getElementById('root')); diff --git a/pages/src/style/header.less b/pages/src/style/header.less new file mode 100644 index 0000000..0f63e05 --- /dev/null +++ b/pages/src/style/header.less @@ -0,0 +1,3 @@ +.header { + background-color: #3d3d; +} diff --git a/pages/src/style/main.less b/pages/src/style/main.less new file mode 100644 index 0000000..af82fe0 --- /dev/null +++ b/pages/src/style/main.less @@ -0,0 +1,5 @@ +@import "header.less"; +@color: #f5adad; +body { + background-color: @color; +} diff --git a/pages/webpack.config.js b/pages/webpack.config.js new file mode 100644 index 0000000..25c2dd9 --- /dev/null +++ b/pages/webpack.config.js @@ -0,0 +1,49 @@ +const path = require('path'); +const HtmlWebpackPlugin = require('html-webpack-plugin'); + +module.exports = { + //tell Webpack to generate src maps + devtool: 'inline-source-map', + //entry point of app + entry: './src/index.js', + //put the output of the bundling process at this place + output: { + path: path.resolve(__dirname, 'build'), + publicPath: '/', + filename: 'bundle.js' + }, + + devServer: { + static: { + //tell server to serve from this place + directory: path.join(__dirname, '/build'), + }, + }, + module: { + rules: [ + { + test: /\.(js|jsx)$/, + exclude: /node_modules/, + use: [ + //use babel-loader to transpile these file types + 'babel-loader', + //use esling-loader to hook JavaScript linter ESLint into Webpack + 'eslint-loader' + ] + }, + { + test: /\.less$/, + use: [ + 'style-loader', + 'css-loader', + 'less-loader', + ], + }, + ] + }, + plugins: [ + new HtmlWebpackPlugin({ + template: path.resolve('./index.html'), + }), + ] +};