boilerplate and webpack config

Frollic-Iteration · Jan 29, 2022 · 35e5129 · 35e5129
1 parent 98ee75f
commit 35e5129
Show file tree

Hide file tree

Showing 16 changed files with 204 additions and 6 deletions.
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,5 @@
+{
+    "presets": ["@babel/preset-env", "@babel/preset-react"],
+    "plugins": ["@babel/plugin-proposal-class-properties"]
+  }
+
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+node_modules/
diff --git a/client/App.jsx b/client/App.jsx
@@ -1 +1,9 @@
+import React from 'react';
 
+const App = () => (
+  <div>
+
+  </div>
+);
+
+export default App;
diff --git a/client/actions/actions.js b/client/actions/actions.js
@@ -1 +1,6 @@
+import * as types from '../constants/actionTypes';
 
+export const mockAction = () => {
+//  type: types.ACTION,
+//  payload:,
+}
diff --git a/client/components/Sidebar.jsx b/client/components/Sidebar.jsx
@@ -1 +1,21 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import * as actions from '../actions/actions';
 
+const mapStateToProps = (state) => {
+
+};
+
+const mapDispatchToProps = (dispatch) => {
+//  mockAction: () => {
+//    dispatch(actions.mockAction());
+//  }
+};
+
+const Sidebar = (props) => (
+  <div>
+
+  </div>
+);
+
+export default connect(mapStateToProps, mapDispatchToProps)(Sidebar);
diff --git a/client/constants/actionTypes.js b/client/constants/actionTypes.js
@@ -1 +1 @@
-
+// export const ACTION = 'ACTION';
diff --git a/client/index.html b/client/index.html
@@ -3,9 +3,10 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>React App</title>
+    <title>Moles</title>
   </head>
   <body>
+    <h1>I am a functional app</h1>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
   </body>

diff --git a/client/index.js b/client/index.js
@@ -1,8 +1,13 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { render } from 'react-dom';
+import { Provider } from 'react-redux';
 import App from './App.jsx';
+import store from './store';
+import style from './style.scss';
 
-ReactDOM.render(
-    <App />,
+render(
+  <Provider store={store}>
+    <App />
+  </Provider>,
   document.getElementById('root')
 );
diff --git a/client/reducers/index.js b/client/reducers/index.js
@@ -1 +1,9 @@
+import { combineReducers } from 'redux';
 
+import mainReducer from './mainReducer';
+
+const reducers = combineReducers({
+  search: mainReducer,
+});
+
+export default reducers;
diff --git a/client/reducers/mainReducer.js b/client/reducers/mainReducer.js
@@ -1 +1,18 @@
+import * as types from '../constants/actionTypes';
 
+const initialState = {
+
+};
+
+const mainReducer = (state = initialState, action) => {
+  switch (action.types) {
+    // case ACTION:
+    // return {
+    //  ...state,
+    //}
+    default:
+      return state;
+  }
+};
+
+export default mainReducer;
diff --git a/client/store.js b/client/store.js
@@ -1 +1,10 @@
+import { applyMiddleware, createStore } from 'redux';
+import thunk from 'redux-thunk';
+import reducers from './reducers/index';
 
+const store = createStore(
+  reducers,
+  applyMiddleware(thunk)
+);
+
+export default store;
diff --git a/package.json b/package.json
@@ -1 +1,56 @@
-
+{
+  "name": "access",
+  "version": "1.0.0",
+  "description": "An app to help plan accessible events",
+  "main": "index.js",
+  "scripts": {
+    "start": "cross-env NODE_ENV=production node server/server.js",
+    "build": "cross-env NODE_ENV=production webpack",
+    "dev": "concurrently \"cross-env NODE_ENV=development nodemon server/server.js\" \"cross-env NODE_ENV=development webpack serve --open\"",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Star-Nosed/Moles.git"
+  },
+  "keywords": [
+    "accessibility",
+    "social",
+    "entertainment"
+  ],
+  "author": "Aram Paparian, Katrina Henderson, Wirapa May Boonyasurat, Megan Nadkarni",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/Star-Nosed/Moles/issues"
+  },
+  "homepage": "https://github.com/Star-Nosed/Moles#readme",
+  "dependencies": {
+    "axios": "^0.25.0",
+    "css-loader": "^6.5.1",
+    "express": "^4.17.2",
+    "html-webpack-plugin": "^5.5.0",
+    "nodemon": "^2.0.15",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-redux": "^7.2.6",
+    "react-router-dom": "^6.2.1",
+    "redux": "^4.1.2",
+    "redux-devtools-extension": "^2.13.9",
+    "redux-thunk": "^2.4.1",
+    "scss-loader": "^0.0.1",
+    "style-loader": "^3.3.1"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.16.12",
+    "@babel/preset-env": "^7.16.11",
+    "@babel/preset-react": "^7.16.7",
+    "babel-loader": "^8.2.3",
+    "concurrently": "^7.0.0",
+    "cross-env": "^7.0.3",
+    "sass": "^1.49.0",
+    "sass-loader": "^12.4.0",
+    "webpack": "^5.67.0",
+    "webpack-cli": "^4.9.2",
+    "webpack-dev-server": "^4.7.3"
+  }
+}
diff --git a/server/controller.js b/server/controller.js
@@ -1 +1,2 @@
 
+module.exports = controller;
diff --git a/server/router.js b/server/router.js
@@ -1 +1,8 @@
+const express = require('express');
+const controller = require('server/controller.js');
+const router = express.Router();
 
+
+//code here
+
+module.exports = router;
diff --git a/server/server.js b/server/server.js
@@ -1 +1,11 @@
+const path = require('path');
+const express = require('express');
 
+const app = express();
+const port = precess.env.PORT || 3000;
+
+
+
+//code here
+
+module.exports = app.listen(port, () => console.log(`Listening on port ${port}`));
diff --git a/webpack.config.js b/webpack.config.js
@@ -1 +1,47 @@
+const path = require('path');
+const webpack = require('webpack');
+const HtmlWebpackPlugin = require('html-webpack-plugin')
 
+module.exports = {
+  entry:[path.join(__dirname, 'client', 'index.js'), path.join(__dirname, 'client', 'style.scss')],
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+    publicPath: '/',
+    filename: 'bundle.js',
+  },
+  mode: process.env.NODE_ENV,
+  module: {
+    rules: [
+      {
+        test: /\.jsx?/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: ['@babel/preset-env', '@babel/preset-react'],
+          },
+        }
+      },
+      {
+        test: /.(css|scss)$/,
+        use: ['style-loader', 'css-loader', 'sass-loader']
+      },
+      {
+        test: /\.(png|jp(e*)g|svg|gif)$/,
+        use: ['file-loader'],
+      }
+    ]
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      title: 'Development',
+      template: path.join(__dirname, 'client', 'index.html'),
+    })
+  ],
+  devServer: {
+    static: {
+      publicPath: '/',
+      directory: path.resolve(__dirname, 'dist'),
+    },
+  }
+}