diff --git a/package.json b/package.json index 51cf205..d0eccc3 100644 --- a/package.json +++ b/package.json @@ -5,8 +5,8 @@ "author": "Kevin Midboe", "private": true, "scripts": { - "dev": "cross-env NODE_ENV=development webpack-dev-server --hot", - "build": "cross-env NODE_ENV=production webpack --progress --hide-modules", + "dev": "cross-env NODE_ENV=development webpack server", + "build": "cross-env NODE_ENV=production webpack-cli build --progress -c webpack.config.js", "start": "node server.js", "docs": "documentation build src/api.js -f html -o docs/api && documentation build src/api.js -f md -o docs/api.md" }, diff --git a/src/assets/arrival.jpg b/public/assets/arrival.jpg similarity index 100% rename from src/assets/arrival.jpg rename to public/assets/arrival.jpg diff --git a/src/assets/disaster-artist.jpg b/public/assets/disaster-artist.jpg similarity index 100% rename from src/assets/disaster-artist.jpg rename to public/assets/disaster-artist.jpg diff --git a/public/assets/dune.jpg b/public/assets/dune.jpg new file mode 100644 index 0000000..6e1db8f Binary files /dev/null and b/public/assets/dune.jpg differ diff --git a/public/assets/mandalorian.jpg b/public/assets/mandalorian.jpg new file mode 100644 index 0000000..b889771 Binary files /dev/null and b/public/assets/mandalorian.jpg differ diff --git a/public/assets/no-image.svg b/public/assets/no-image.svg new file mode 100644 index 0000000..5d29819 --- /dev/null +++ b/public/assets/no-image.svg @@ -0,0 +1,13 @@ + + + + diff --git a/public/assets/no-image_small.svg b/public/assets/no-image_small.svg new file mode 100644 index 0000000..4e4ac42 --- /dev/null +++ b/public/assets/no-image_small.svg @@ -0,0 +1,13 @@ + + + + diff --git a/src/assets/placeholder.png b/public/assets/placeholder.png similarity index 100% rename from src/assets/placeholder.png rename to public/assets/placeholder.png diff --git a/src/assets/pulp-fiction.jpg b/public/assets/pulp-fiction.jpg similarity index 100% rename from src/assets/pulp-fiction.jpg rename to public/assets/pulp-fiction.jpg diff --git a/src/assets/star-wars.jpg b/public/assets/star-wars.jpg similarity index 100% rename from src/assets/star-wars.jpg rename to public/assets/star-wars.jpg diff --git a/favicons/android-chrome-192x192.png b/public/favicons/android-chrome-192x192.png similarity index 100% rename from favicons/android-chrome-192x192.png rename to public/favicons/android-chrome-192x192.png diff --git a/favicons/android-chrome-256x256.png b/public/favicons/android-chrome-256x256.png similarity index 100% rename from favicons/android-chrome-256x256.png rename to public/favicons/android-chrome-256x256.png diff --git a/favicons/apple-touch-icon.png b/public/favicons/apple-touch-icon.png similarity index 100% rename from favicons/apple-touch-icon.png rename to public/favicons/apple-touch-icon.png diff --git a/favicons/browserconfig.xml b/public/favicons/browserconfig.xml similarity index 100% rename from favicons/browserconfig.xml rename to public/favicons/browserconfig.xml diff --git a/favicons/favicon-16x16.png b/public/favicons/favicon-16x16.png similarity index 100% rename from favicons/favicon-16x16.png rename to public/favicons/favicon-16x16.png diff --git a/favicons/favicon-32x32.png b/public/favicons/favicon-32x32.png similarity index 100% rename from favicons/favicon-32x32.png rename to public/favicons/favicon-32x32.png diff --git a/favicons/favicon.ico b/public/favicons/favicon.ico similarity index 100% rename from favicons/favicon.ico rename to public/favicons/favicon.ico diff --git a/favicons/manifest.json b/public/favicons/manifest.json similarity index 100% rename from favicons/manifest.json rename to public/favicons/manifest.json diff --git a/favicons/mstile-150x150.png b/public/favicons/mstile-150x150.png similarity index 100% rename from favicons/mstile-150x150.png rename to public/favicons/mstile-150x150.png diff --git a/favicons/safari-pinned-tab.svg b/public/favicons/safari-pinned-tab.svg similarity index 100% rename from favicons/safari-pinned-tab.svg rename to public/favicons/safari-pinned-tab.svg diff --git a/public/index.html b/public/index.html new file mode 100644 index 0000000..badfbfa --- /dev/null +++ b/public/index.html @@ -0,0 +1,35 @@ + + + + + + + + request.movie + + + + + + + +
+ + + + + diff --git a/server.js b/server.js index 4a39b1b..531d971 100644 --- a/server.js +++ b/server.js @@ -1,23 +1,18 @@ -var express = require('express'); -var path = require('path'); -const compression = require('compression') -var history = require('connect-history-api-fallback'); +const express = require("express"); +const path = require("path"); +const history = require("connect-history-api-fallback"); + +const publicPath = path.join(__dirname, "public"); app = express(); +app.use("/", express.static(publicPath)); +app.use(history({ index: "/" })); -app.use(compression()) -app.use('/dist', express.static(path.join(__dirname + "/dist"))); -app.use('/dist', express.static(path.join(__dirname + "/dist/"))); -app.use('/favicons', express.static(path.join(__dirname + "/favicons"))); -app.use(history({ - index: '/' -})); - -var port = process.env.PORT || 5000; - -app.get('/', function(req, res) { - res.sendFile(path.join(__dirname + '/index.html')); +app.get("/", function (req, res) { + res.sendFile(`${publicPath}/index.html`); }); +const port = process.env.PORT || 5001; +console.log("Server runnning at port:", port); app.listen(port); diff --git a/src/assets/no-image.png b/src/assets/no-image.png deleted file mode 100644 index 0194ca8..0000000 Binary files a/src/assets/no-image.png and /dev/null differ diff --git a/webpack.config.js b/webpack.config.js index 5c40e8c..9c96963 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,88 +1,97 @@ -var path = require('path') -var webpack = require('webpack') +const path = require("path"); +const webpack = require("webpack"); +const sass = require("sass"); + +const { VueLoaderPlugin } = require("vue-loader"); +// const MiniCssExtractPlugin = require("mini-css-extract-plugin"); +const TerserPlugin = require("terser-webpack-plugin"); + +const publicPath = path.resolve(__dirname, "public"); +const isProd = process.env.NODE_ENV === "production"; module.exports = { - entry: './src/main.js', + context: path.resolve(__dirname, "src"), + entry: "/main.js", output: { - path: path.resolve(__dirname, './dist'), - publicPath: '/dist/', - filename: 'build.js' + path: `${publicPath}/dist/`, + publicPath: "/dist/", + filename: "build.js", + clean: true }, module: { rules: [ - { - test: /\.vue$/, - use: [ - { - loader: 'vue-loader', - options: { - loaders: { - 'scss': 'vue-style-loader!css-loader!sass-loader', - 'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax' - } - } - }, - { - loader: 'vue-svg-inline-loader' - } - ] - }, { test: /\.js$/, - loader: 'babel-loader', + loader: "babel-loader", options: { - presets: ['@babel/preset-env'] + presets: ["@babel/preset-env"] }, exclude: /node_modules/ }, + { + test: /\.vue$/, + use: ["vue-loader"] + }, + { + test: /\.scss$/, + use: [ + "vue-style-loader", + // isProd ? MiniCssExtractPlugin.loader : "vue-style-loader", + "css-loader", + "sass-loader" + ] + }, { test: /\.(png|jpg|gif|svg)$/, - loader: 'file-loader', + loader: "file-loader", options: { - name: '[name].[ext]' - // name: '[name].[ext]?[hash]' + name: "[name].[ext]?[hash]" } } ] }, + plugins: [new VueLoaderPlugin()], resolve: { - extensions: ['.js', '.vue', '.json', 'scss'], + extensions: [".js", ".vue", ".json", ".scss"], alias: { - 'vue$': 'vue/dist/vue.common.js', - '@': path.resolve(__dirname, './src'), - 'src': path.resolve(__dirname, './src'), - 'assets': path.resolve(__dirname, './src/assets'), - 'components': path.resolve(__dirname, './src/components') + vue$: "vue/dist/vue.common.js", + "@": path.resolve(__dirname, "src"), + src: path.resolve(__dirname, "src"), + assets: `${publicPath}/assets`, + components: path.resolve(__dirname, "src/components") } }, devServer: { - historyApiFallback: true, - inline: true, - noInfo: true + static: publicPath, + historyApiFallback: { + index: "index.html" + }, + compress: true, + port: 8080 }, performance: { hints: false }, - devtool: 'inline-source-map' -} + optimization: { + minimizer: [ + new TerserPlugin({ + parallel: true, + terserOptions: { + // https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions + } + }) + ] + }, + devtool: "inline-source-map" +}; -if (process.env.NODE_ENV === 'production') { - module.exports.devtool = '#source-map' - // http://vue-loader.vuejs.org/en/workflow/production.html - module.exports.plugins = (module.exports.plugins || []).concat([ - new webpack.DefinePlugin({ - 'process.env': { - NODE_ENV: '"production"' - } - }), - new webpack.optimize.UglifyJsPlugin({ - sourceMap: true, - compress: { - warnings: false - } - }), - new webpack.LoaderOptionsPlugin({ - minimize: true - }) - ]) +if (isProd) { + module.exports.mode = "production"; + module.exports.devtool = false; + // module.exports.plugins.push( + // new MiniCssExtractPlugin({ + // filename: "[name].css", + // chunkFilename: "[id].css" + // }) + // ); }