changes in project configs

.config/env.js

@@ -0,0 +1,14 @@
+'use strict'
+
+const NODE_ENV = process.env.NODE_ENV
+
+if (!NODE_ENV) {
+  throw new Error("Enviroment variable NODE_ENV was not provided!");
+}
+
+const dotenv = require('dotenv');
+dotenv.config({ debug: process.env.NODE_ENV === 'development' });
+
+if (!process.env.PORT) {
+  throw new Error("Enviroment variable PORT was not provided!");
+}

.config/paths.js

@@ -33,4 +33,5 @@ module.exports = {
   appPublic: resolveApp('public'),
   appPackageJson: resolveApp('package.json'),
   appPath: resolveApp('.'),
+  appStatic: resolveApp('static')
 }

.config/utils.js

@@ -0,0 +1,3 @@
+const info = (msg) => `\u001b[1m\u001b[34m${msg}\u001b[39m\u001b[22m`
+
+module.exports = { info }

.config/webpack.config.js

@@ -1,20 +1,10 @@
 'use strict'
 
+require('./env');
+
 const path = require('path');
 const webpack = require('webpack');
 
-require('dotenv').config();
-
-const NODE_ENV = process.env.NODE_ENV;
-
-if (!NODE_ENV) {
-  throw new Error(
-    'The NODE_ENV environment variable is required but was not specified.'
-  );
-}
-
-process.env.BABEL_ENV = 'development';
-
 const paths = require('./paths');
 const createDevServer = require('./webpackDevServer.config');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
@@ -38,12 +28,12 @@ module.exports = function(webpackEnv) {
         filename: 'styles.[contenthash].css',
       }),
       new HtmlWebpackPlugin({
-        title: 'My App',
+        title: process.env.APP_TITLE,
         template: paths.appHtml,
       }),
       new CopyWebpackPlugin({
         patterns: [
-          { from: path.resolve(__dirname, '../static') }
+          { from: paths.appStatic }
         ]
       }),
     ],
@@ -61,12 +51,6 @@ module.exports = function(webpackEnv) {
           test: /\.(js|jsx)$/,
           include: [path.resolve(__dirname, 'src')],
           loader: 'babel-loader',
-        },
-
-        // Typescript
-        {
-          test: /\.ts?$/,
-          use: 'ts-loader',
           exclude: /node_modules/,
         },
 
@@ -103,7 +87,7 @@ module.exports = function(webpackEnv) {
     },
 
     resolve: {
-      extensions: ['.tsx', '.ts', '.js'],
+      extensions: ['.tsx', '.ts', '.js', '.css'],
     },
 
     devServer: devServer,

.config/webpackDevServer.config.js

@@ -1,8 +1,7 @@
 const paths = require('./paths');
 const ip = require('internal-ip');
 const portFinderSync = require('portfinder-sync');
-
-const info = (msg) => `\u001b[1m\u001b[34m${msg}\u001b[39m\u001b[22m`
+const info = require('./utils').info
 
 const PORT = parseInt(process.env.PORT, 10) || 3000;
 
@@ -26,7 +25,7 @@ module.exports = () => {
 			const domain1 = `${protocol}://${localIp}:${port}`
 			const domain2 = `${protocol}://localhost:${port}`
 
-			console.log(`Project running at:\n  - ${info(domain1)}\n  - ${info(domain2)}`)
+			console.log(`\nProject running at:\n  - ${info(domain1)}\n  - ${info(domain2)}\n`)
 		}
 	};
 }

.gitignore

@@ -1,4 +1,6 @@
 /node_modules
+/build
 
-.env
-launch.json
+.env*
+launch.json
+.yo-rc.json

package.json

@@ -1,7 +1,7 @@
 {
-  "name": "my-webpack-project",
+  "name": "solsys",
   "version": "1.0.0",
-  "main": "index.ts",
+  "main": "index.js",
   "license": "MIT",
   "dependencies": {
     "dat.gui": "^0.7.7",
@@ -21,26 +21,23 @@
     "babel-loader": "^8.2.2",
     "babel-plugin-syntax-dynamic-import": "^6.18.0",
     "copy-webpack-plugin": "^8.1.1",
-    "css-loader": "^5.1.3",
+    "css-loader": "^5.2.6",
     "dotenv": "^8.2.0",
     "eslint": "^7.2.0",
     "eslint-config-airbnb-base": "^14.2.1",
     "eslint-plugin-import": "^2.22.1",
     "html-webpack-plugin": "^5.3.1",
     "internal-ip": "^6.2.0",
     "mini-css-extract-plugin": "^1.3.9",
-    "new": "^0.1.1",
     "portfinder-sync": "^0.0.2",
-    "style-loader": "^2.0.0",
-    "ts-loader": "^8.0.18",
-    "typescript": "^4.2.3",
+    "serve": "^12.0.0",
     "webpack": "^5.26.3",
     "webpack-cli": "^4.5.0",
     "webpack-dev-server": "^3.11.2"
   },
-  "description": "My webpack project",
+  "description": "Solsys",
   "scripts": {
-    "build": "webpack",
-    "start": "webpack serve --config ./.config/webpack.config.js --open"
+    "build": "webpack --node-env production --mode production --config ./.config/webpack.config.js&&serve build -l tcp://localhost:5989/index.html",
+    "start": "webpack serve --node-env development --mode development --config ./.config/webpack.config.js --open"
   }
 }