new config & readme update

tstabla · Apr 24, 2017 · 235ccb1 · 235ccb1
1 parent d011a1b
commit 235ccb1
Show file tree

Hide file tree

Showing 5 changed files with 134 additions and 85 deletions.
diff --git a/README.md b/README.md
@@ -2,33 +2,46 @@
 
 > Minimalist starter for Vue 2 with Vue-router and Babel, which uses static templates by http request.
 
-
 [SEE DEMO](https://tstabla.github.io/Vue.js-starter/)
 
-## How to use
+Sometimes maybe you need use some PHP scripts, then just use files with .php extension and also change file extensions in */app/main.js* on line *13 & 16*.
 
+Switch to branch *`php`* for example.
+
+## How to use
 
 Install
-```
+```bash
 npm install
 ```
 
-Build assets and run preview
-```
-npm run view
-```
 
 Run dev server
-```
-npm run dev
+```bash 
+npm run dev:html # html files
+# or
+npm run dev:php # php files
+``` 
+You can also set your own HOST and PORT to run dev server.
+```bash 
+npm run dev:html --host=127.0.0.1 --port=8080
 ```
 
-Build prod assets
+Build static assets and run preview
+```bash 
+npm run view:html # html files
+# or
+npm run view:php # php files
 ```
+
+Build static prod assets
+```bash 
 npm run prod
 ```
 
-You can also set your own HOST and PORT to run dev server.
-```
-npm run dev --host=127.0.0.1 --port=8080
+Remove static assets
+```bash 
+npm run clean
 ```
+
+**Tested on macOS*
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "Vue.js-starter",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "author": {
     "name": "Tomasz Stabla",
     "email": "t.stabla@hotmail.com",
@@ -11,8 +11,12 @@
     "clean": "find 'web/assets/js' 'web/assets/css' -type f -not -name '.gitkeep' | xargs rm -rf && rm -rf web/assets/cached_uglify",
     "build": "npm run clean && webpack --config webpack.config.js",
     "prod": "export NODE_ENV=production && npm run build",
-    "dev": "export NODE_ENV=development && nodemon --watch web --ext html server.dev.js",
-    "view": "npm run build && nodemon --watch web --ext html server.prod.js"
+    "dev:html": "export NODE_ENV=development npm_config_host npm_config_port && set ${npm_config_host=localhost} ${npm_config_port=8007} && nodemon --watch web --ext html server.dev.js",
+    "dev:php": "concurrently -p \"[{name}]\" -n \"HTTP,ASSETS\" -c \"bgBlue.bold,bgMagenta.bold,bgGreen.bold\" --kill-others \"npm run dev:php:server\" \"npm run dev:php:assets\"",
+    "dev:php:server": "export NODE_ENV=development npm_config_php=true npm_config_host npm_config_port && set ${npm_config_host=localhost} ${npm_config_port=8007} && php -S $npm_config_host:$npm_config_port -t web",
+    "dev:php:assets": "export NODE_ENV=development npm_config_php=true npm_config_host npm_config_port && set ${npm_config_host=localhost} ${npm_config_port=8007} && nodemon --watch web --ext php server.dev.js",
+    "view:html": "export NODE_ENV=production npm_config_php=false npm_config_host npm_config_port && set ${npm_config_host=localhost} ${npm_config_port=8007} && npm run build && node server.dev.js",
+    "view:php": "export NODE_ENV=production npm_config_php=true npm_config_host npm_config_port && set ${npm_config_host=localhost} ${npm_config_port=8007} && npm run build && php -S $npm_config_host:$npm_config_port -t web"
   },
   "devDependencies": {
     "babel-cli": "^6.24.0",
@@ -21,6 +25,7 @@
     "babel-preset-es2015": "^6.24.0",
     "body-parser": "^1.17.0",
     "bundle-loader": "^0.5.4",
+    "cors": "^2.8.3",
     "css-loader": "^0.26.1",
     "express": "^4.15.0",
     "extract-text-webpack-plugin": "^2.0.0-rc.2",
@@ -37,9 +42,11 @@
     "postcss-loader": "^1.2.2",
     "sass-loader": "^4.1.1",
     "style-loader": "^0.13.1",
+    "url-loader": "^0.5.8",
     "webpack": "^2.2.1",
     "webpack-dev-middleware": "^1.10.1",
     "webpack-hot-middleware": "^2.17.1",
-    "webpack-uglify-js-plugin": "^1.1.9"
+    "webpack-uglify-js-plugin": "^1.1.9",
+    "concurrently": "^3.4.0"
   }
 }
diff --git a/server.dev.js b/server.dev.js
@@ -1,5 +1,10 @@
 /* eslint no-console: 0 */
 
+const HOST = process.env.npm_config_host;
+const PORT = process.env.npm_config_port;
+const PHP_SERVER = process.env.npm_config_php == 'true' ? true : false;
+const NODE_ENV = process.env.NODE_ENV;
+
 const path = require( 'path' );
 const express = require( 'express' );
 const bodyParser = require( 'body-parser' );
@@ -9,48 +14,75 @@ const webpackHotMiddleware = require( 'webpack-hot-middleware' );
 
 const devBuildConfig = require( './webpack.config' );
 
-const HOST = process.env.npm_config_host ? process.env.npm_config_host : 'localhost';
-const PORT = process.env.npm_config_port ? process.env.npm_config_port : 8005;
-
 const server = express();
 const compiler = webpack( devBuildConfig );
 
-server.use( webpackDevMiddleware( compiler, {
-  publicPath: devBuildConfig.output.publicPath,
-  hot: true,
-  historyApiFallback: true,
-  stats: {
-    colors: true,
-    hash: false,
-    version: false,
-    chunks: false,
-    children: false,
-  },
-} ) );
-
-server.use( webpackHotMiddleware( compiler, {
-  path: '/__webpack_hmr',
-  timeout: 20000,
-  reload: true
-} ) );
+let assetsPORT = PORT;
+let publicPath = devBuildConfig.output.publicPath;
+
+if ( PHP_SERVER ) {
+  assetsPORT = +PORT + 1;
+
+  publicPath = `http://${HOST}:${assetsPORT}/assets/`;
+
+  const cors = require( 'cors' );
+
+  server.use( cors() );
+}
+
+if ( NODE_ENV === 'development' ) {
+  server.use( webpackDevMiddleware( compiler, {
+    publicPath,
+    contentBase: path.join( __dirname, 'web' ),
+    hot: true,
+    historyApiFallback: true,
+    stats: {
+      colors: true,
+      hash: false,
+      version: false,
+      chunks: false,
+      children: false,
+    },
+  } ) );
+
+  server.use( webpackHotMiddleware( compiler, {
+    path: '/__webpack_hmr',
+    timeout: 20000,
+    reload: true,
+  } ) );
+}
 
 server.use( bodyParser.json() );
+
 server.use( bodyParser.urlencoded( { extended: true } ) );
 
 server.use( express.static( path.join( __dirname, 'web' ) ) );
 
-server.use( '/', ( req, res ) => (
-  res.sendFile( path.join( __dirname, 'web', 'index.html' ) )
-) );
+if ( !PHP_SERVER ) {
+  server.use( '/', ( req, res ) => {
+    res.sendFile( path.join( __dirname, 'web', 'index.html' ) );
+  } );
+}
 
-server.listen( PORT, HOST, ( err ) => {
+server.listen( PHP_SERVER ? assetsPORT : PORT, HOST, ( err ) => {
   if ( err ) {
     console.log( `ERROR ${err}` );
+
+    return;
   }
 
-  console.log(
-    `****************\n
-    Dev server is running on \x1b[32m http://${HOST}:${PORT}
-    \n\x1b[0m****************`
-  );
+  if ( PHP_SERVER ) {
+    console.log(
+      `****************\n
+      Dev server is running on \x1b[32m http://${HOST}:${PORT} \n\x1b[0m
+      Assets server is running on \x1b[32m http://${HOST}:${assetsPORT}
+        \n\x1b[0m****************`
+        );
+  } else {
+    console.log(
+      `****************\n
+      Dev server is running on \x1b[32m http://${HOST}:${PORT}
+        \n\x1b[0m****************`
+        );
+  }
 } );
diff --git a/server.prod.js b/server.prod.js
diff --git a/webpack.config.js b/webpack.config.js
@@ -1,3 +1,8 @@
+const HOST = process.env.npm_config_host;
+const PORT = process.env.npm_config_port;
+const PHP_SERVER = process.env.npm_config_php == 'true' ? true : false;
+const NODE_ENV = process.env.NODE_ENV;
+
 const webpack = require( 'webpack' );
 const path = require( 'path' );
 const ExtractTextPlugin = require( 'extract-text-webpack-plugin' );
@@ -11,7 +16,7 @@ config.devtool = 'cheap-source-map';
 
 config.context = __dirname;
 
-if ( process.env.NODE_ENV === 'development' ) {
+if ( NODE_ENV === 'development' ) {
   config.entry = {
     app: [ 'babel-polyfill', './app/main.js', 'webpack-hot-middleware/client' ],
     style: [ './app/styles/main.less', 'webpack-hot-middleware/client' ]
@@ -23,15 +28,27 @@ if ( process.env.NODE_ENV === 'development' ) {
   };
 }
 
+let assetsPORT = PORT;
+let publicPath = '/assets/';
+
+if ( NODE_ENV === 'development' && PHP_SERVER ) {
+  assetsPORT = +PORT + 1;
+
+  publicPath = `http://${HOST}:${assetsPORT}/assets/`;
+}
+
 config.output = {
   path: path.resolve( __dirname, 'web/assets/' ),
-  publicPath: '/assets/',
+  publicPath,
   filename: 'js/[name].js',
   chunkFilename: 'js/[id].chunk.js'
 };
 
 config.resolve = {
-  modules: [ 'libraries', 'node_modules' ],
+  modules: [
+    path.resolve( __dirname, 'app', 'libraries' ),
+    path.resolve( __dirname, 'node_modules' )
+  ],
   extensions: [ '.js' ],
   alias: {
     'jquery': './app/libraries/jquery.min.js'
@@ -47,7 +64,7 @@ config.plugins = [
   } )
 ];
 
-if ( process.env.NODE_ENV === 'development' ) {
+if ( NODE_ENV === 'development' ) {
   const plugins = [
     new webpack.HotModuleReplacementPlugin(),
     new webpack.NoEmitOnErrorsPlugin(),
@@ -61,7 +78,7 @@ if ( process.env.NODE_ENV === 'development' ) {
   ];
 
   config.plugins = plugins.concat( config.plugins );
-} else if ( process.env.NODE_ENV === 'production' ) {
+} else if ( NODE_ENV === 'production' ) {
   config.plugins.push(
     new WebpackUglifyJsPlugin( {
       cacheFolder: path.resolve( __dirname, 'web/assets/cached_uglify/' ),
@@ -80,6 +97,10 @@ if ( process.env.NODE_ENV === 'development' ) {
 
 config.module = {
   rules: [
+    {
+      test: /\.json$/,
+      loader: 'json-loader'
+    },
     {
       test: /\.js?$/,
       exclude: [ /node_modules/, /libraries/ ],
@@ -110,8 +131,15 @@ config.module = {
         fallback: 'style-loader',
         use: 'css-loader!postcss-loader!sass-loader',
       } )
-    }
-  ],
+    },
+  ]
+};
+
+config.node = {
+  console: true,
+  fs: 'empty',
+  net: 'empty',
+  tls: 'empty'
 };
 
 module.exports = config;