feat(landing page sample): landing page sample

ed45fd1f · Reza Sahebgharan · 4187e0fb · ed45fd1f · ed45fd1f · ed45fd1f
Commit ed45fd1f authored Feb 26, 2020 by Reza Sahebgharan
20 changed files
--- a/.gitignore
+++ b/.gitignore
@@ -3,4 +3,7 @@ node_modules/
 coverage/
 cypress/screenshots
 cypress/videos
-
+public/images
+public/build.js
+public/favicon.ico
+public/landing.html
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -48,6 +48,11 @@ build_in_staging:
  script:
    - echo "starting build in staging"
    - npm install
+    - cd landingpage
+    - npm install
+    - npm run build
+    - npm run rename
+    - cd ..
    # - npm run test-jest
    - meteor build C:\output --directory --server-only
    - Copy-Item -Path .\docker-compose.yml -Destination C:\output\bundle

--- a/.meteor/packages
+++ b/.meteor/packages
@@ -19,3 +19,4 @@ ardatan:webpack-dev-middleware
 tmeasday:publish-counts
 ostrio:meteor-root
 ostrio:files
+ostrio:logger
--- a/.meteor/versions
+++ b/.meteor/versions
@@ -52,6 +52,7 @@ npm-mongo@3.3.0-rc190.1
 ordered-dict@1.1.0
 ostrio:cookies@2.5.0
 ostrio:files@1.13.0
+ostrio:logger@2.0.8
 ostrio:meteor-root@1.0.8
 promise@0.11.2
 random@1.1.0

--- a/landingpage/.babelrc
+++ b/landingpage/.babelrc
+{
+  "presets": ["@babel/preset-env"]
+}
\ No newline at end of file
--- a/landingpage/.gitignore
+++ b/landingpage/.gitignore
+node_modules/
+dist/
--- a/landingpage/README.md
+++ b/landingpage/README.md
+# Vue.js 2.0 + vue-router Prerender SPA Example
+
+Demonstrates usage of Vuejs 2.0 with Vue Router and Webpack 3. Build will generate 3 static routes at the following paths:
+
+- `/`
+- `/about`
+- `/contact`
+
+## Build
+
+```bash
+npm install
+npm run build
+```
+
+Now check the new `dist` directory for your prerendered static files!
+
+To view the rendered files, install [http-server](https://www.npmjs.com/package/http-server) (`npm install -g http-server`) if you haven't already and run it in the dist directory.
+
+Now visit the following routes in your browser (note the trailing slash):
+
+- [http://localhost:8000/](http://localhost:8000/)
+- [http://localhost:8000/about/](http://localhost:8000/about/)
+- [http://localhost:8000/contact/](http://localhost:8000/contact/)
+
+## Development
+
+To edit the `prerender-spa-plugin` configuration, look for `new PrerenderSPAPlugin` in the plugins section of `webpack.config.js`.
+
+If you're using a router or have more than one page to prerender, edit the `routes` array under that config object.
+
+```bash
+npm install
+npm run dev
+```
--- a/landingpage/favicon.ico
+++ b/landingpage/favicon.ico
--- a/landingpage/index.html
+++ b/landingpage/index.html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <title>PRODUCTION prerender-spa-plugin</title>
+</head>
+
+<body>
+    <div id="app"></div>
+</body>
+
+</html>
\ No newline at end of file
--- a/landingpage/package-lock.json
+++ b/landingpage/package-lock.json
--- a/landingpage/package.json
+++ b/landingpage/package.json
+{
+    "name": "prerender-spa-plugin-example-vue2-webpack-router",
+    "version": "1.0.0",
+    "private": true,
+    "author": "Drew Lustro <drewlustro@gmail.com>",
+    "scripts": {
+        "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
+        "build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
+        "rename": "rename \"../public/index.html\" landing.html",
+        "serve": "http-server dist"
+    },
+    "dependencies": {
+        "vue": "^2.6.11",
+        "vue-router": "^3.1.5",
+        "vuetify": "^2.2.15"
+    },
+    "devDependencies": {
+        "@babel/core": "^7.8.4",
+        "@babel/preset-env": "^7.8.4",
+        "babel-loader": "^8.0.6",
+        "cross-env": "^5.2.1",
+        "css-loader": "^2.1.1",
+        "fibers": "^4.0.2",
+        "file-loader": "^3.0.1",
+        "html-webpack-plugin": "^3.2.0",
+        "http-server": "^0.12.1",
+        "prerender-spa-plugin": "^3.4.0",
+        "vue-loader": "^15.9.0",
+        "vue-template-compiler": "^2.6.11",
+        "webpack": "^4.41.6",
+        "webpack-cli": "^3.3.11",
+        "webpack-dev-server": "^3.10.3"
+    }
+}
\ No newline at end of file
--- a/landingpage/src/App.vue
+++ b/landingpage/src/App.vue
+<template>
+  <div id="app">
+    <img src="./assets/logo.png">
+    <h1>{{ msg }}</h1>
+    <p>
+      <router-link to="/">Home</router-link>
+      <router-link to="/signin">signin</router-link>
+      <router-link to="/contact">Contact</router-link>
+    </p>
+    <router-view></router-view>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'app',
+  data () {
+    return {
+      msg: 'Welcome to your prerender-spa-plugin Vuejs 2.0 demo app!'
+    }
+  }
+}
+</script>
+
+<style>
+#app {
+  font-family: 'Avenir', Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  margin-top: 60px;
+}
+
+h1, h2 {
+  font-weight: normal;
+}
+
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+
+a {
+  color: #42b983;
+}
+</style>
--- a/landingpage/src/assets/logo.png
+++ b/landingpage/src/assets/logo.png
--- a/landingpage/src/main.js
+++ b/landingpage/src/main.js
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+import App from './App.vue'
+import vuetify from './plugins/vuetify';
+
+Vue.use(VueRouter)
+
+const Home = { template: '<div><h2>Home Page</h2></div>' }
+    // const About = { template: '<div><h2>About Page</h2></div>' }
+const Contact = { template: '<div><h2>Contact Page</h2></div>' }
+
+const routes = [
+    { path: '/', component: Home },
+    {
+        path: '/signin',
+        beforeEnter: (to, from, next) => {
+            window.location.replace('/signin');
+        }
+    },
+    { path: '/contact', component: Contact }
+]
+
+const router = new VueRouter({
+    routes,
+    mode: 'history'
+})
+
+new Vue({
+    el: '#app',
+    vuetify,
+    router,
+    render: h => h(App),
+    mounted() {
+        // You'll need this for renderAfterDocumentEvent.
+        document.dispatchEvent(new Event('render-event'))
+    }
+})
\ No newline at end of file
--- a/landingpage/src/plugins/vuetify.js
+++ b/landingpage/src/plugins/vuetify.js
+// import '@mdi/font/css/materialdesignicons.css';
+import 'vuetify/dist/vuetify.min.css';
+import '@mdi/font/css/materialdesignicons.css';
+import 'material-design-icons-iconfont/dist/material-design-icons.css';
+import Vue from 'vue';
+import Vuetify from 'vuetify';
+import '../../../public/fonts/font.css';
+Vue.use(Vuetify);
+
+import fa from 'vuetify/es5/locale/fa';
+import en from 'vuetify/es5/locale/en';
+
+
+export default new Vuetify({
+    lang: {
+        locales: { fa, en },
+        current: 'en'
+    },
+    icons: {
+        iconfont: 'mdi', // default - only for display purposes
+    },
+    rtl: false,
+});
\ No newline at end of file
--- a/landingpage/webpack.config.js
+++ b/landingpage/webpack.config.js
+var path = require('path')
+var webpack = require('webpack')
+var HtmlWebpackPlugin = require('html-webpack-plugin')
+const PrerenderSPAPlugin = require('prerender-spa-plugin')
+const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
+const VueLoaderPlugin = require('vue-loader/lib/plugin')
+
+module.exports = {
+    mode: process.env.NODE_ENV,
+    entry: './src/main.js',
+    output: {
+        path: path.resolve(__dirname, '../public'),
+        publicPath: '/',
+        filename: 'build.js',
+    },
+    // optimization: {
+    //     runtimeChunk: 'single',
+    //     // minimizer: [new UglifyJsPlugin()],
+    //     // minimize: false,
+    //     splitChunks: {
+    //         chunks: 'all',
+    //         maxInitialRequests: Infinity,
+    //         minSize: 0,
+    //         cacheGroups: {
+    //             vendor: {
+    //                 test: /[\\/]node_modules[\\/]/,
+    //                 name(module) {
+    //                     // get the name. E.g. node_modules/packageName/not/this/part.js
+    //                     // or node_modules/packageName
+    //                     const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
+
+    //                     // npm package names are URL-safe, but some servers don't like @ symbols
+    //                     return `npm.${packageName.replace('@', '')}`;
+    //                 },
+    //             },
+    //         },
+    //     },
+    // },
+    module: {
+        rules: [{
+                test: /\.js$/,
+                loader: 'babel-loader',
+                exclude: /node_modules/,
+                options: {
+                    plugins: [
+                        "@babel/plugin-syntax-dynamic-import"
+                    ]
+                }
+            },
+            {
+                test: /\.vue$/,
+                loader: 'vue-loader',
+                options: {
+                    compilerOptions: {
+                        modules: [{
+                            preTransformNode(astEl) {
+                                if (process.env.NODE_ENV === "production") {
+                                    const { attrsMap, attrsList } = astEl;
+                                    if (attrsMap["data-cy"]) {
+                                        delete attrsMap["data-cy"];
+                                        const index = attrsList.findIndex(x => x.name === 'data-cy')
+                                        attrsList.splice(index, 1);
+                                    }
+                                }
+                                return astEl;
+                            }
+                        }]
+                    }
+                    // other vue-loader options go here
+                }
+            },
+            {
+                test: /\.s(c|a)ss$/,
+                use: [
+                    'vue-style-loader',
+                    'css-loader',
+                    {
+                        loader: 'sass-loader',
+                        options: {
+                            implementation: require('sass'),
+                            fiber: require('fibers'),
+                            indentedSyntax: true // optional
+                        }
+                    }
+                ]
+            },
+            {
+                test: /\.less$/,
+                use: [
+                    'vue-style-loader',
+                    'css-loader',
+                    'less-loader'
+                ]
+            },
+            {
+                test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
+                use: [{
+                    loader: 'file-loader',
+                    options: {
+                        name: '[name].[ext]',
+                        outputPath: 'fonts/'
+                    }
+                }]
+            },
+            {
+                test: /\.css$/,
+                use: [
+                    'vue-style-loader',
+                    'css-loader'
+                ],
+            },
+            {
+                test: /\.(png|jpg|gif|svg)$/,
+                loader: 'file-loader',
+                options: {
+                    name: 'images/[name].[ext]?[hash:8]'
+                }
+            },
+            {
+                test: /\.html$/,
+                use: [
+                    // {
+                    //     loader: "file-loader",
+                    //     options: {
+                    //         name: "[name].html"
+                    //     }
+                    // },
+                    // {
+                    //     loader: "extract-loader"// tells webpack to not include html file into mainbundle js
+                    // },
+                    {
+                        loader: "html-loader",
+                        options: {
+                            attrs: ["img:src"] // the src attribute in img element of html is the target
+                        }
+                    }
+                ]
+            },
+
+        ]
+    },
+    resolve: {
+        alias: {
+            'vue$': 'vue/dist/vue.esm.js'
+        },
+        extensions: ['*', '.js', '.vue', '.json']
+    },
+    devServer: {
+        historyApiFallback: true,
+        noInfo: true,
+        overlay: true,
+        hot: true,
+        open: true
+    },
+    performance: {
+        hints: false
+    },
+    devtool: '#eval-source-map',
+    plugins: [
+        new webpack.HotModuleReplacementPlugin(),
+        new VueLoaderPlugin(),
+    ]
+}
+if (process.env.NODE_ENV === 'production') {
+    module.exports.devtool = ''
+    module.exports.plugins = (module.exports.plugins || []).concat([
+        new webpack.DefinePlugin({
+            'process.env': {
+                NODE_ENV: '"production"'
+            }
+        }),
+        new HtmlWebpackPlugin({
+
+            template: 'index.html',
+            filename: path.resolve(__dirname, '../public/index.html'),
+            // filename: "index.html",
+            favicon: 'favicon.ico'
+        }),
+        new PrerenderSPAPlugin({
+            staticDir: path.join(__dirname, '../public'),
+            routes: ['/'],
+            indexPath: path.join(__dirname, '../public', 'index.html'),
+            minify: {
+                collapseBooleanAttributes: true,
+                collapseWhitespace: true,
+                decodeEntities: true,
+                keepClosingSlash: true,
+                sortAttributes: true
+            },
+            renderer: new Renderer({
+                inject: {
+                    foo: 'bar'
+                },
+                headless: true,
+                renderAfterDocumentEvent: 'render-event'
+            })
+        })
+    ])
+} else {
+    // NODE_ENV === 'development'
+    module.exports.plugins = (module.exports.plugins || []).concat([
+        new webpack.DefinePlugin({
+            'process.env': {
+                NODE_ENV: '"development"'
+            }
+        }),
+        new HtmlWebpackPlugin({
+
+            template: 'index.html',
+            filename: path.resolve(__dirname, '../public/index.html'),
+            favicon: 'favicon.ico'
+        }),
+    ])
+}
\ No newline at end of file
--- a/package-lock.json
+++ b/package-lock.json
@@ -3387,13 +3387,12 @@
      }
    },
    "cross-env": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-5.2.0.tgz",
-      "integrity": "sha512-jtdNFfFW1hB7sMhr/H6rW1Z45LFqyI431m3qU6bFXcQ3Eh7LtBuG3h74o7ohHZ3crrRkkqHlo4jYHFPcjroANg==",
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-5.2.1.tgz",
+      "integrity": "sha512-1yHhtcfAd1r4nwQgknowuUNfIT9E8dOMMspC36g45dN+iD1blloi7xp8X/xAIDnjHWyt1uQ8PHk2fkNaym7soQ==",
      "dev": true,
      "requires": {
-        "cross-spawn": "^6.0.5",
-        "is-windows": "^1.0.0"
+        "cross-spawn": "^6.0.5"
      }
    },
    "cross-spawn": {
@@ -11988,6 +11987,14 @@
      "integrity": "sha512-TTlYpa+OL+vMMNG24xSlQGEJ3B/RzEfUlLct7b5G/ytav+wPrplCpVMFuwzXbkecJrb6IYo1iFb0S9v37754mg==",
      "dev": true
    },
+    "rimraf": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
+      "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
+      "requires": {
+        "glob": "^7.1.3"
+      }
+    },
    "ripemd160": {
      "version": "2.0.2",
      "resolved": "https://registry.npmjs.org/ripemd160/-/ripemd160-2.0.2.tgz",
@@ -12539,16 +12546,6 @@
            "rimraf": "^2.6.1",
            "semver": "^5.3.0",
            "tar": "^4"
-          },
-          "dependencies": {
-            "rimraf": {
-              "version": "2.7.1",
-              "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
-              "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
-              "requires": {
-                "glob": "^7.1.3"
-              }
-            }
          }
        }
      }

--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
        "git-describe": "^4.0.4",
        "meteor-node-stubs": "^1.0.0",
        "simpl-schema": "^1.5.5",
+        "sqlite3": "^4.1.1",
        "uuid": "^3.3.3",
        "valid-url": "^1.0.9",
        "vue": "^2.6.10",
@@ -33,8 +34,7 @@
        "vue-router": "^3.1.2",
        "vue-template-compiler": "^2.6.10",
        "vuetify": "^2.2.12",
-        "vuex": "^3.1.1",
-        "sqlite3": "^4.1.1"
+        "vuex": "^3.1.1"
    },
    "devDependencies": {
        "@babel/core": "^7.6.2",
@@ -52,7 +52,7 @@
        "babel-jest": "^24.9.0",
        "babel-loader": "^8.0.6",
        "babel-plugin-transform-remove-console": "^6.9.4",
-        "cross-env": "^5.2.0",
+        "cross-env": "^5.2.1",
        "css-loader": "^3.2.0",
        "cypress": "^3.8.1",
        "deepmerge": "^4.0.0",

--- a/server/main.js
+++ b/server/main.js
 import { Meteor } from 'meteor/meteor';
+import { WebApp } from 'meteor/webapp';
+import ConnectRoute from 'connect-route';

 import '../imports/api/methods/worklist.js';
 import '../imports/api/methods/changePassword.js';
@@ -49,4 +51,19 @@ Meteor.startup(() => {
        });

    Meteor.users.deny({ update: () => true });
-});
\ No newline at end of file
+
+});
+
+function onRoute(req, res, next) {
+    res.writeHead(307, { 'Location': "/landing.html" });
+    res.end();
+}
+
+
+const middleWare = ConnectRoute(function(router) {
+    router.get('/', onRoute);
+
+});
+
+WebApp.connectHandlers
+    .use(middleWare);
\ No newline at end of file
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -175,7 +175,6 @@ const clientConfig = {
        new webpack.HotModuleReplacementPlugin(),
        new HtmlWebpackPlugin({
            template: './client/main.html',
-
        }),
        new VueLoaderPlugin(),
        new webpack.DefinePlugin({