Chrynn · Chrynn · May 21, 2023 · May 21, 2023 · May 21, 2023 · May 21, 2023
diff --git a/.docker/docker-compose.yml b/.docker/docker-compose.yml
@@ -42,3 +42,16 @@ services:
     ports:
     # change database:port here (edit left-one)
       - "10000:80"
+
+  node:
+    container_name: Node
+    build:
+      context: ./..
+      dockerfile: ./.docker/node/Dockerfile
+    working_dir: /srv
+    volumes:
+      - ./../:/srv:delegated
+    ports:
+      - "8080:8080"
+      - "8888:8888"
+    command: [ "tail", "-f", "/dev/null" ]
diff --git a/.docker/node/Dockerfile b/.docker/node/Dockerfile
@@ -0,0 +1,15 @@
+FROM node:18.0.0-alpine3.14
+
+USER root
+
+# Setup user docker
+# RUN adduser -S docker
+
+WORKDIR /srv/
+
+# RUN rm -rf /srv/node_modules
+# RUN mkdir /srv/node_modules
+# RUN chown -R docker /srv/node_modules
+# RUN chown docker /srv/package.json
+
+# USER docker
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,6 @@
 .idea
 config/local.neon
 vendor
+package-lock.json
+node_modules
+www/dist/*
diff --git a/Makefile b/Makefile
@@ -59,4 +59,13 @@ start:
 
 fix:
     # phpstan -l (level 0-9, max - newest)
-	docker-compose -f .docker/docker-compose.yml exec php vendor/bin/phpstan analyse app -l max
+	docker-compose -f .docker/docker-compose.yml exec php vendor/bin/phpstan analyse app -l max
+
+# Exec sh on Node container
+exec\:node:
+	docker-compose -f .docker/docker-compose.yml exec node sh;
+
+setup:
+	docker-compose -f .docker/docker-compose.yml exec php composer install;
+	docker-compose -f .docker/docker-compose.yml exec node npm install;
+	make init
diff --git a/app/Module/Front/Homepage/templates/defaultSlider.latte b/app/Module/Front/Homepage/templates/defaultSlider.latte
@@ -83,3 +83,5 @@
         </div>
     </div>
 </div>
+
+<test />
diff --git a/app/Module/templates/@layout.latte b/app/Module/templates/@layout.latte
@@ -17,8 +17,14 @@
         {include meta}
 
         <title>{ifset title}{include title|stripHtml} - {/ifset}Filmátor</title>
+
+            {* JS files *}
+        <script type="application/javascript" src="{webpack dist/runtime.js}"></script>
+        <script type="application/javascript" src="{webpack dist/main.js}"></script>
     </head>
     <body>
+        <div id="vue-mount">
+
         <div class="page-wrap page-wrap--light">
             {include flashMessage}
 
@@ -39,6 +45,8 @@
             {/if}
         </div>
 
+        </div>
+
         <!-- scripts -->
         <div class="script">
             <script src="https://nette.github.io/resources/js/3/netteForms.min.js"></script>

diff --git a/app/components/test.vue b/app/components/test.vue
@@ -0,0 +1,5 @@
+<template>
+    <div>
+        <h1>hello</h1>
+    </div>
+</template>
diff --git a/composer.json b/composer.json
@@ -27,7 +27,8 @@
 		"nettrine/fixtures": "^0.6.2",
 		"nettrine/cache": "^0.3.0",
 		"nextras/mail-panel": "^2.6",
-		"phpstan/phpstan": "^1.9"
+		"phpstan/phpstan": "^1.9",
+		"contributte/webpack": "^2.2"
 	},
 	"require-dev": {
 		"nette/tester": "^2.3",

diff --git a/composer.lock b/composer.lock
diff --git a/config/common.neon b/config/common.neon
@@ -1,63 +1,26 @@
+# Main configuration file, has to include every other file
+
 parameters:
 	doctrine:
 		host: mariadb
 		user: root
 		password: root
 		dbname: filmator
 
-
 application:
 	errorPresenter: Ghost:Error
 	mapping:
 		*: [App\Module, * ,*\*Presenter]
 
-
 session:
 	expiration: 14 days
 
-
 di:
 	export:
 		parameters: no
 		tags: no
 
-
-extensions:
-	console: Contributte\Console\DI\ConsoleExtension(%consoleMode%)
-	doctrine.annotations: Nettrine\Annotations\DI\AnnotationsExtension
-	doctrine.dbal: Nettrine\DBAL\DI\DbalExtension
-	doctrine.dbal.console: Nettrine\DBAL\DI\DbalConsoleExtension
-	doctrine.orm: Nettrine\ORM\DI\OrmExtension
-	doctrine.orm.annotations: Nettrine\ORM\DI\OrmAnnotationsExtension
-	nettrine.orm.attributes: Nettrine\ORM\DI\OrmAttributesExtension
-	doctrine.orm.console: Nettrine\ORM\DI\OrmConsoleExtension
-	doctrine.cache: Nettrine\Cache\DI\CacheExtension
-	doctrine.migrations: Nettrine\Migrations\DI\MigrationsExtension
-	doctrine.fixtures: Nettrine\Fixtures\DI\FixturesExtension
-
-
-doctrine.dbal:
-	debug:
-		panel: false
-	connection:
-		driver: pdo_mysql
-		host: %doctrine.host%
-		user: %doctrine.user%
-		password: %doctrine.password%
-		dbname: %doctrine.dbname%
-
-doctrine.orm.annotations:
-	mapping:
-		App\Model: %appDir%/Model
-
-
-nettrine.orm.attributes:
-	mapping:
-		App\Model: %appDir%/Model
-
-doctrine.migrations:
-	directory: migrations/
-
-doctrine.fixtures:
-	paths:
-		- %appDir%/Model/Database/Fixture
+includes:
+	- extensions.neon
+	- doctrine.neon
+	- webpack.neon
diff --git a/config/doctrine.neon b/config/doctrine.neon
@@ -0,0 +1,26 @@
+doctrine.dbal:
+	debug:
+		panel: false
+	connection:
+		driver: pdo_mysql
+		host: %doctrine.host%
+		user: %doctrine.user%
+		password: %doctrine.password%
+		dbname: %doctrine.dbname%
+
+# enable annotations
+doctrine.orm.annotations:
+	mapping:
+		App\Model: %appDir%/Model
+
+# enable attributes
+nettrine.orm.attributes:
+	mapping:
+		App\Model: %appDir%/Model
+
+doctrine.migrations:
+	directory: migrations/
+
+doctrine.fixtures:
+	paths:
+		- %appDir%/Model/Database/Fixture
diff --git a/config/extensions.neon b/config/extensions.neon
@@ -0,0 +1,15 @@
+extensions:
+	console: Contributte\Console\DI\ConsoleExtension(%consoleMode%)
+	# doctrine
+	doctrine.annotations: Nettrine\Annotations\DI\AnnotationsExtension
+	doctrine.dbal: Nettrine\DBAL\DI\DbalExtension
+	doctrine.dbal.console: Nettrine\DBAL\DI\DbalConsoleExtension
+	doctrine.orm: Nettrine\ORM\DI\OrmExtension
+	doctrine.orm.annotations: Nettrine\ORM\DI\OrmAnnotationsExtension
+	nettrine.orm.attributes: Nettrine\ORM\DI\OrmAttributesExtension
+	doctrine.orm.console: Nettrine\ORM\DI\OrmConsoleExtension
+	doctrine.cache: Nettrine\Cache\DI\CacheExtension
+	doctrine.migrations: Nettrine\Migrations\DI\MigrationsExtension
+	doctrine.fixtures: Nettrine\Fixtures\DI\FixturesExtension
+	# webpack
+	webpack: Contributte\Webpack\DI\WebpackExtension(%debugMode%, %consoleMode%)
diff --git a/config/webpack.neon b/config/webpack.neon
@@ -0,0 +1,9 @@
+webpack:
+    build:
+        directory: %wwwDir%/dist
+        publicPath: /dist
+    devServer:
+        enabled: %debugMode%
+        url: http://localhost:90/dist
+    manifest:
+        name: manifest.json
diff --git a/package.json b/package.json
@@ -0,0 +1,29 @@
+{
+  "name": "filmator",
+  "version": "1.0.0",
+  "description": "movie & serial database",
+  "main": "index.js",
+  "scripts": {
+    "dev-server": "encore dev-server --host localhost --port 90",
+    "dev": "encore dev",
+    "watch": "encore dev --watch",
+    "build": "encore production --progress"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Chrynn/Filmator.git"
+  },
+  "author": "filip machala",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/Chrynn/Filmator/issues"
+  },
+  "homepage": "https://github.com/Chrynn/Filmator#readme",
+  "dependencies": {
+    "@symfony/webpack-encore": "^4.3.0",
+    "vue": "^3.3.4",
+    "vue-loader": "^17.1.1",
+    "webpack-cli": "^5.1.1",
+    "webpack-notifier": "^1.15.0"
+  }
+}
diff --git a/webpack.config.js b/webpack.config.js
@@ -0,0 +1,30 @@
+const Encore = require('@symfony/webpack-encore');
+
+if (!Encore.isRuntimeEnvironmentConfigured()) {
+    Encore.configureRuntimeEnvironment(process.env.NODE_ENV || "dev");
+}
+
+Encore
+    // where webpack files are generated
+    .setOutputPath('./www/dist')
+    // where webpack generated files are placed to use by webpack
+    .setPublicPath('/dist')
+    // where Vue config file is
+    .addEntry('main', './www/js/main.js')
+    .enableSingleRuntimeChunk()
+    .cleanupOutputBeforeBuild()
+    .enableBuildNotifications()
+    .enableSourceMaps(!Encore.isProduction())
+    .enableVersioning(Encore.isProduction())
+    .enableVueLoader(() => {}, { runtimeCompilerBuild: true })
+    // setting manifest files 1 folder back
+    .configureManifestPlugin(options => {
+        options.publicPath = '';
+    })
+    .configureDevServerOptions(options => {
+        options.port = 90;
+        options.allowedHosts = 'all';
+    })
+;
+
+module.exports = Encore.getWebpackConfig();
diff --git a/www/js/main.js b/www/js/main.js
@@ -0,0 +1,10 @@
+import {createApp} from 'vue/dist/vue.esm-bundler';
+import Test from '../../app/components/test.vue';
+
+document.addEventListener('VueMount', (e) => {
+    const app = createApp({});
+
+    app.component('test', Test);
+
+    app.mount('#app');
+});
-Original file line number
+Diff line change
@@ Expand Up / @@ -83,3 +83,5 @@ @@
             </div>
         </div>
     </div>
+    <test />