Added frontend assets

ElisDN · Sep 20, 2018 · 2b84e5c · 2b84e5c
1 parent d5f9156
commit 2b84e5c
Show file tree

Hide file tree

Showing 7 changed files with 7,589 additions and 11 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,4 @@
+/node_modules
 /vendor
 /phpunit.xml
+/public/build
diff --git a/package.json b/package.json
@@ -0,0 +1,22 @@
+{
+    "private": true,
+    "scripts": {
+        "dev": "npm run development",
+        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
+        "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
+        "watch-poll": "npm run watch -- --watch-poll",
+        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
+        "prod": "npm run production",
+        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
+    },
+    "devDependencies": {
+        "axios": "^0.18",
+        "bootstrap": "^4.0.0",
+        "cross-env": "^5.1",
+        "font-awesome": "^4.7.0",
+        "jquery": "^3.2",
+        "laravel-mix": "^2.0",
+        "lodash": "^4.17.4",
+        "popper.js": "^1.12"
+    }
+}
diff --git a/resources/assets/js/app.js b/resources/assets/js/app.js
@@ -0,0 +1,2 @@
+window.$ = window.jQuery = require('jquery');
+require('bootstrap');
diff --git a/resources/assets/sass/app.scss b/resources/assets/sass/app.scss
@@ -0,0 +1,24 @@
+@import "~font-awesome/scss/font-awesome";
+@import '~bootstrap/scss/bootstrap';
+
+body {
+    padding-top: 70px;
+}
+
+h1 {
+    margin-top: 0
+}
+
+.app {
+    display: flex;
+    min-height: 100vh;
+    flex-direction: column;
+}
+
+.app-content {
+    flex: 1;
+}
+
+.app-footer {
+    padding-bottom: 1em;
+}
diff --git a/templates/layout/default.html.twig b/templates/layout/default.html.twig
@@ -6,15 +6,7 @@
     <title>{% block title %}{% endblock %} - App</title>
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     {% block meta %}{% endblock %}
-    <link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet" />
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
-    <style>
-        body { padding-top: 70px; }
-        h1 { margin-top: 0 }
-        .app { display: flex; min-height: 100vh; flex-direction: column; }
-        .app-content { flex: 1; }
-        .app-footer { padding-bottom: 1em; }
-    </style>
+    <link rel="stylesheet" href="/build/css/app.css" />
 </head>
 <body class="app">
 <header class="app-header">
@@ -54,7 +46,6 @@
     </div>
 </footer>
 
-<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
-<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
+<script src="/build/js/app.js"></script>
 </body>
 </html>
diff --git a/webpack.mix.js b/webpack.mix.js
@@ -0,0 +1,7 @@
+let mix = require('laravel-mix');
+
+mix
+    .setPublicPath('public/build')
+    .setResourceRoot('/build/')
+    .js('resources/assets/js/app.js', 'js')
+    .sass('resources/assets/sass/app.scss', 'css');