Setup production build and server

ArifaMujawar · Jan 5, 2020 · bb80717 · bb80717
1 parent f4f41b6
commit bb80717
Show file tree

Hide file tree

Showing 8 changed files with 268 additions and 477 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1 +1,5 @@
-node_modules
+node_modules/
+public/bundle.js
+public/bundle.js.map
+public/styles.css
+public/styles.css.map
diff --git a/package.json b/package.json
@@ -5,9 +5,12 @@
   "license": "MIT",
   "scripts": {
     "serve": "live-server public/",
-    "build": "webpack",
+    "build:dev": "webpack",
+    "build:prod": "webpack -p --env production",
     "dev-server": "webpack-dev-server",
-    "test": "jest --config=jest.config.json"
+    "test": "jest --config=jest.config.json",
+    "start" : "node server/server.js",
+    "heroku-postbuild":"yarn run build:prod"
   },
   "dependencies": {
     "babel-cli": "6.24.1",
@@ -19,6 +22,8 @@
     "css-loader": "0.28.4",
     "enzyme-adapter-react-16": "1.0.0",
     "enzyme-to-json": "3.0.1",
+    "express": "4.15.4",
+    "extract-text-webpack-plugin": "3.0.0",
     "jest": "20.0.4",
     "live-server": "^1.2.1",
     "moment": "2.18.1",

diff --git a/public/bundle.js b/public/bundle.js
diff --git a/public/index.html b/public/index.html
@@ -5,7 +5,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <title>Expensify App</title>
        <link rel= "icon" type="image/png" href="/images/favicon.png" />
-
+        <link rel ="stylesheet" type="text/css" href ="/styles.css" />
     </head>
     <body>
             <div id="app"></div>

diff --git a/server/server.js b/server/server.js
@@ -0,0 +1,15 @@
+const path = require('path');
+const express = require('express');
+const app = express();
+const publicPath = path.join(__dirname, '..', 'public');
+const port = process.env.PORT || 3000;
+
+app.use(express.static(publicPath));
+
+app.get('*',(req, res) => {
+    res.sendFile(path.join(publicPath, 'index.html'));
+});
+
+app.listen(port, ()=>{
+    console.log('Server is up!');
+});
diff --git a/src/app.js b/src/app.js
@@ -19,7 +19,7 @@ store.dispatch(addExpense({description:'milk', amount :9000, createdAt:300}));
 
 const state = store.getState();
 const visibleExpenses = getVisibleExpenses(state.expenses, state.filters); 
-console.log(visibleExpenses);
+console.log('visibleExpenses tetsing');
 
 const jsx = (
     <Provider store = {store}>

diff --git a/webpack.config.js b/webpack.config.js
@@ -1,29 +1,49 @@
 const path = require('path');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
 
-module.exports = {
-    entry: './src/app.js',
-    output: {
-        path:path.join(__dirname,'public'),
-        filename:'bundle.js' 
-    },
-    module:{
-        rules:[{
-            loader: 'babel-loader',
-            test: /\.js$/,
-            exclude:/node_modules/
-        },{
-            test: /\.s?css$/,
-            use: [
-                'style-loader',
-                'css-loader',
-                'sass-loader'
-            ]
+module.exports = (env) => {
+    const isProduction = env === 'production';
+    const CSSExtract = new ExtractTextPlugin('styles.css');
+    console.log('env:',env);
+    return {
+        entry: './src/app.js',
+        output: {
+            path:path.join(__dirname,'public'),
+            filename:'bundle.js' 
+        },
+        module:{
+            rules:[{
+                loader: 'babel-loader',
+                test: /\.js$/,
+                exclude:/node_modules/
+            },{
+                test: /\.s?css$/,
+                use: CSSExtract.extract({
+                    use: [
+                        {
+                           loader: 'css-loader',
+                           options: {
+                               sourceMap: true
+                           } 
+                        },
+                        {
+                            loader: 'sass-loader',
+                            options: {
+                                sourceMap: true
+                            }
+                        }
+                     ]
+                })
+            }
+        ]
+        },
+        plugins: [
+            CSSExtract
+        ],
+        devtool: isProduction?'source-map':'inline-source-map',
+        devServer: {
+            contentBase: path.join(__dirname,'public'),
+            historyApiFallback:true
         }
-    ]
-    },
-    devtool: 'cheap-module-eval-source-map',
-    devServer: {
-        contentBase: path.join(__dirname,'public'),
-        historyApiFallback:true
-    }
-};
+    };
+};