wegue-oss#130 first stab at app restructure with app-starter dir

README.md

@@ -39,7 +39,7 @@ Prerequisites: Node.js and npm need to be available on your system.
 npm install
 ```
 
-  - Run the init script, which creates a base application for your project in `app/WguApp.vue` and a CSS file `app/css/app.css` to place custom styling for your project.
+  - Run the init-app script, which creates a base application (a copy of the `app-starter` dir) under `app/` to extend with custom components and resources (e.g. CSS styling) for your project.
 
 ``` bash
 # initializes the Wegue app

app/.gitignore → app-starter/.gitignore

@@ -1,4 +1,5 @@
 # Ignore everything in this directory
-*
+#*
 # Except this file
-!.gitignore
+#!.gitignore
+

app-starter/WguApp.vue

@@ -0,0 +1,17 @@
+<!-- Created by init-app.js at Tue Mar 10 2020 16:02:41 GMT+0100 (GMT+01:00) -->
+<template>
+  <wgu-app-tpl>
+    <!-- insert your app slots here  -->
+  </wgu-app-tpl>
+</template>
+
+<script>
+  import WguAppTemplate from './WguAppTemplate.vue';
+  export default {
+    name: 'my-wgu-app',
+    components: {
+      'wgu-app-tpl': WguAppTemplate
+    }
+    // add Vue methods and hooks here
+  }
+</script>

src/WguAppTemplate.vue → app-starter/WguAppTemplate.vue

@@ -54,15 +54,15 @@
 
 <script>
   import Vue from 'vue'
-  import { WguEventBus } from './WguEventBus'
-  import OlMap from './components/ol/Map'
+  import { WguEventBus } from '../src/WguEventBus'
+  import OlMap from '../src/components/ol/Map'
   import AppHeader from './components/AppHeader'
   import AppFooter from './components/AppFooter'
-  import AppLogo from './components/AppLogo'
-  import MeasureWin from './components/measuretool/MeasureWin'
-  import LayerListWin from './components/layerlist/LayerListWin'
-  import InfoClickWin from './components/infoclick/InfoClickWin'
-  import MapLoadingStatus from './components/progress/MapLoadingStatus'
+  import AppLogo from '../src/components/AppLogo'
+  import MeasureWin from '../src/components/measuretool/MeasureWin'
+  import LayerListWin from '../src/components/layerlist/LayerListWin'
+  import InfoClickWin from '../src/components/infoclick/InfoClickWin'
+  import MapLoadingStatus from '../src/components/progress/MapLoadingStatus'
 
   export default {
     name: 'wgu-app-tpl',

src/components/AppHeader.vue → app-starter/components/AppHeader.vue

@@ -54,12 +54,12 @@
 <script>
 
 import Vue from 'vue'
-import LayerListToggleButton from './layerlist/ToggleButton'
-import HelpWinToggleButton from './helpwin/ToggleButton'
-import MeasureToolToggleButton from './measuretool/ToggleButton'
-import InfoClickButton from './infoclick/ToggleButton'
-import ZoomToMaxExtentButton from './maxextentbutton/ZoomToMaxExtentButton'
-import Geocoder from './geocoder/Geocoder'
+import LayerListToggleButton from '../../src/components/layerlist/ToggleButton'
+import HelpWinToggleButton from '../../src/components/helpwin/ToggleButton'
+import MeasureToolToggleButton from '../../src/components/measuretool/ToggleButton'
+import InfoClickButton from '../../src/components/infoclick/ToggleButton'
+import ZoomToMaxExtentButton from '../../src/components/maxextentbutton/ZoomToMaxExtentButton'
+import Geocoder from '../../src/components/geocoder/Geocoder'
 
 export default {
   name: 'wgu-app-header',

app-starter/static/css/app.css

@@ -0,0 +1 @@
+/* Created by init-app.js at Thu Aug 08 2019 15:59:47 GMT+0200 (GMT+02:00) */

app/README.md

@@ -0,0 +1,8 @@
+# Wegue App Dir
+This directory will contain your Wegue Application.
+By using the command `npm run init:app` this dir is populated with
+the contents from the `starter-app` dir.
+
+You can then place custom components under `components` here.
+Static content like data, icons and css can be placed under static.
+The default config file is `app-conf.json`.

build/dev-server.js

@@ -65,6 +65,12 @@ app.use(hotMiddleware)
 var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)
 app.use(staticPath, express.static('./static'))
 
+console.log(config.dev.assetsPublicPath);
+// assetsSubDirectory: 'static',
+// assetsPublicPath: './',
+var staticPath2 = path.posix.join(config.dev.assetsPublicPath, 'app/static')
+app.use(staticPath2, express.static('./app/static'))
+
 var uri = 'http://localhost:' + port
 
 var _resolve

build/utils.js

@@ -16,6 +16,7 @@ exports.cssLoaders = function (options) {
     loader: 'css-loader',
     options: {
       minimize: process.env.NODE_ENV === 'production',
+      url: process.env.NODE_ENV !== 'production',
       sourceMap: options.sourceMap
     }
   }

build/webpack.base.conf.js

@@ -20,10 +20,11 @@ module.exports = {
       : config.dev.assetsPublicPath
   },
   resolve: {
-    extensions: ['.js', '.vue', '.json'],
+    extensions: ['*', '.js', '.vue', '.json'],
     alias: {
       'vue$': 'vue/dist/vue.esm.js',
       '@': resolve('src'),
+      'APP': resolve('app'),
     },
     symlinks: false
   },
@@ -33,7 +34,7 @@ module.exports = {
         test: /\.(js|vue)$/,
         loader: 'eslint-loader',
         enforce: 'pre',
-        include: [resolve('src'), resolve('test')],
+        include: [resolve('app'), resolve('src'), resolve('test')],
         options: {
           formatter: require('eslint-friendly-formatter')
         }
@@ -46,7 +47,7 @@ module.exports = {
       {
         test: /\.js$/,
         loader: 'babel-loader',
-        include: [resolve('src'), resolve('test'), resolve('node_modules/ol')],
+        include: [resolve('app'), resolve('src'), resolve('test'), resolve('node_modules/ol')],
       },
       {
         test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,

build/webpack.prod.conf.js

@@ -115,11 +115,12 @@ var webpackConfig = merge(baseWebpackConfig, {
         to: config.build.assetsSubDirectory,
         ignore: ['.*']
       },
-      // copy project- / app-specific static assets
+      // copy project- / app-specific static assets, overwrite
       {
-        context: path.resolve(__dirname, '../app/static'),
-        from: "*",
-        to: config.build.assetsSubDirectory
+        from: path.resolve(__dirname, '../app/static'),
+        to: config.build.assetsSubDirectory,
+        force: true,
+        ignore: ['.*']
       }
     ])
   ]