From 878bab91ac2237f76d16cead8f938b49c0a79f3d Mon Sep 17 00:00:00 2001 From: Dominic Masters Date: Fri, 23 Feb 2018 20:31:42 +1100 Subject: [PATCH] Initial react commit --- .babelrc | 11 +++++++ .gitignore | 2 ++ package.json | 46 ++++++++++++++++++++++++++++ public/App.jsx | 17 +++++++++++ public/index.html | 11 +++++++ public/index.jsx | 13 ++++++++ public/styles/index.scss | 1 + webpack.config.js | 65 ++++++++++++++++++++++++++++++++++++++++ 8 files changed, 166 insertions(+) create mode 100644 .babelrc create mode 100644 package.json create mode 100644 public/App.jsx create mode 100644 public/index.html create mode 100644 public/index.jsx create mode 100644 public/styles/index.scss create mode 100644 webpack.config.js diff --git a/.babelrc b/.babelrc new file mode 100644 index 0000000..0cd7d9f --- /dev/null +++ b/.babelrc @@ -0,0 +1,11 @@ +{ + "presets": [ + ["env", { + "targets": { + "node": "current" + } + }], + "react", + "babel-polyfill" + ] +} diff --git a/.gitignore b/.gitignore index 00cbbdf..a4e750f 100644 --- a/.gitignore +++ b/.gitignore @@ -57,3 +57,5 @@ typings/ # dotenv environment variables file .env +dist/ +/package-lock.json diff --git a/package.json b/package.json new file mode 100644 index 0000000..00b5aa7 --- /dev/null +++ b/package.json @@ -0,0 +1,46 @@ +{ + "name": "domsplace", + "version": "5.0.0", + "description": "Personal website for Dominic \"YouWish\" Masters.", + "main": "private/index.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/YourWishes/domsPlaceNew.git" + }, + "keywords": [ + "domsplace", + "personal", + "portfolio", + "website" + ], + "author": "Dominic Masters", + "license": "MIT", + "bugs": { + "url": "https://github.com/YourWishes/domsPlaceNew/issues" + }, + "homepage": "https://github.com/YourWishes/domsPlaceNew#readme", + "dependencies": { + "express": "^4.16.2", + "mysql-promise": "^4.1.0", + "react": "^16.2.0", + "react-dom": "^16.2.0" + }, + "devDependencies": { + "babel-cli": "^6.26.0", + "babel-loader": "^7.1.2", + "babel-polyfill": "^6.26.0", + "babel-preset-env": "^1.6.1", + "babel-preset-react": "^6.24.1", + "css-loader": "^0.28.10", + "html-webpack-plugin": "^2.30.1", + "jest": "^22.4.0", + "node-sass": "^4.7.2", + "sass-loader": "^6.0.6", + "style-loader": "^0.20.2", + "webpack": "^3.11.0", + "webpack-dev-server": "^2.11.1" + } +} diff --git a/public/App.jsx b/public/App.jsx new file mode 100644 index 0000000..d96d440 --- /dev/null +++ b/public/App.jsx @@ -0,0 +1,17 @@ +import React from 'react'; + +class App extends React.Component { + constructor(props) { + super(props); + } + + render() { + return ( +
+ App +
+ ) + } +} + +export default App; diff --git a/public/index.html b/public/index.html new file mode 100644 index 0000000..9c0f21a --- /dev/null +++ b/public/index.html @@ -0,0 +1,11 @@ + + + + + domsPlace + + + +
+ + diff --git a/public/index.jsx b/public/index.jsx new file mode 100644 index 0000000..3188537 --- /dev/null +++ b/public/index.jsx @@ -0,0 +1,13 @@ +'use strict'; + +import 'babel-polyfill'; + +import React from 'react'; +import ReactDOM, { render } from 'react-dom'; + +import App from './App.jsx'; +import Styles from './styles/index.scss'; + +render(( + +), document.getElementById("app")); diff --git a/public/styles/index.scss b/public/styles/index.scss new file mode 100644 index 0000000..9f44090 --- /dev/null +++ b/public/styles/index.scss @@ -0,0 +1 @@ +@charset "UTF-8"; diff --git a/webpack.config.js b/webpack.config.js new file mode 100644 index 0000000..2464187 --- /dev/null +++ b/webpack.config.js @@ -0,0 +1,65 @@ +const + webpack = require('webpack'), + HtmlWebpackPlugin = require('html-webpack-plugin') +; + +const HTMLWebpackPluginConfig = new HtmlWebpackPlugin({ + template: __dirname + '/public/index.html', + filename: 'index.html', + inject: 'body' +}); + +// export webpack config +module.exports = { + devtool: 'cheap-module-eval-source-map', + entry: [ + './public/index.jsx' + ], + + output: { + path: __dirname + '/dist', + filename: "app.js" + }, + + resolve: { + modules: ['node_modules', './public'], + extensions: ['.js', '.jsx', '.css', '.scss' ] + }, + + // declare loaders to be used in webpack + module: { + rules: [ + { + test: /\.jsx?$/, + exclude: /node_modules/, + loaders: ['babel-loader'] + }, + + { + test: /\.scss$|\.css$/i, + loaders: ["style-loader", "css-loader", "sass-loader"] + }, + + { + test: /\.jpe?g$|\.gif$|\.png$|\.svg$/i, + loader: "file-loader?name=[path][name].[ext]" + }, + + { + test: /\.(eot|ttf|woff(2)?)(\?v=\d+\.\d+\.\d+)?/, + loader: 'url-loader' + } + ] + }, + + // initialize the added webpack plugins + plugins: [ + new webpack.DefinePlugin({ + 'process.env': { + NODE_ENV: JSON.stringify('development') + } + }), + HTMLWebpackPluginConfig, + new webpack.HotModuleReplacementPlugin() + ] +};