Собираем JAR с Vue.js внутри. Spring Boot Rest

[@allteran]

Мегаогромнейшее спасибо за ролик, Дрю! Для тех, кто также как и я решил сначала собрать проект на Maven'e, а потом перекочевал на Gradle и получил ошибки типа: yarn_install failed или npm not found (error=2): 1. Node-плагин для gradle у автора в видео на момент 2022 уже устарел и вышла его другая версия, импортируем с помощью: plugin { ... id "com.github.node-gradle.node" version "3.1.1" ... } 2. Чтобы Gradle скачивал последнюю ноду, а не искал ее локально, ибо он может и не находить - лучше добавить секцию с конфигурацией этого плагина: node { download = true } 3. Если вы едете на 17-й Java - то в настройках gradle лучше указать совместимость с версией младше, к примеру sourceCompatibility = '11' 4. Если вдруг сталкиваетесь с ошибкой установки зависимостей yarn (exit code 128, недостаточно прав) - удалите из корня проекта файл yarn.lock Чистого кода всем!

[@ВадимШох-п5щ]

Дрю, сто тысяч лайков!! Начав 1 урок, я не думал, что дойду до сюда. Но все оказалось предельно понятно и просто. Конечно, предстоит еще подробно разобраться в тех десятках технологий, что тут заиспользованы (перенял словечко)), но кто сказал, что будет легко) Огромное человеческое спасибо!

[@YuretsUA]

Автору однозначно спасибо, весь цикл уроков завершил только ради финальной зборки, хотя на пути к цели набрел на очень много чего интересного и полезного. Немного покопавшись удалось соорудить костыль для maven, сразу оговорюсь - работает но есть нюансы. Есть такой плагин frontend-maven-plugin но при его работе происходит установка npm и yarn по указанному пути, что не является оптимальным вариантом, (хотя может я просто не нашел как его настраивать), ну и плюс нету очистки контента, yarn_cache_clean. но при всем при этом jar-ник удалось собрать. кому интересно можете попробовать: com.github.eirslett frontend-maven-plugin 1.6 target 0 install node and yarn install-node-and-yarn v8.9.3 v1.3.2 yarn install yarn yarn build yarn build Добавляем все это дело в перед плагином spring-boot-maven-plugin. Подробнее про плагин можно почитать здесь github.com/eirslett/frontend-maven-plugin

[@andreiscurtu5908]

Балдею от качества своего контента !

[@andreiscurtu5908]

*твоего )

[@arturzolotov3430]

На 8:11 (перед тем как выполнить yarn start) проверьте следующие файлики: 1) main.js должно быть: import 'api/resource' import router from 'router/router' import App from 'pages/App.vue' import store from 'store/store' 2)store.js должно быть: import messagesApi from 'api/messages' import commentApi from 'api/comment' 3)router.js должно быть: import MessagesList from 'pages/MessageList.vue' import Auth from 'pages/Auth.vue' import Profile from 'pages/Profile.vue' 4)App.vue должно быть: import { addHandler } from 'util/ws' 5)Profile.vue должно быть: import profileApi from 'api/profile' 6)MessageList.vue должно быть: import MessageRow from 'components/messages/MessageRow.vue' import MessageForm from 'components/messages/MessageForm.vue' import LazyLoader from 'components/LazyLoader.vue' 7)CommentItem.vue должно быть: import UserLink from 'components/UserLink.vue' 8)MessageRow.vue должно быть: import Media from 'components/media/Media.vue' import CommentList from '../comment/CommentList.vue' import UserLink from 'components/UserLink.vue'

[@AnnaSmirnova1]

А почему так работает?

[@ms_shifu7047]

Наконец-то новый видос.

[@dmitrysomsin2117]

Спасибо за урок!

[@vp9878]

Спасибо за уроки. Каждый из них как марафон, информации вагон)

[@soul8927]

А-ааа, ты жив. Спасибо за видос)

[@letsCodeDru]

Жив. В погрузе, но жив :) постараюсь так не пропадать больше)

[@alexeysharandin7364]

Как всегда, спасибо! Единственное, что можно добавить к видео, это кусочек для перфекционистов: Чтобы в jar-ник не попадали исходники фронтэнда, добавить в build.gradle что-то типа: sourceSets { main { resources { exclude 'js' } } }

[@borismatashin5891]

топ, нечего больше добавить)

[@tomozi1]

Отличное видео!

[@aleksplats]

Спасибо, ты очень помогаешь!

[@TheWallMr]

как тоже самое с maven сделать?

[@daboggg]

спасибо, как всегда отлично, продолжай пожалуйста

[@andreyguzik2675]

Моя девушка посмотрела видео, собрала jar с vue внутри и ушла от меня... спасибо

[@letsCodeDru]

Догоняй, балбес! Нашёл время комменты строчить! 😂

[@80cahek]

может она на собеседку ушла, вернется айтишницей.

[@Name-mm2kx]

Спасибо)

[@СашаБатькович-р9ы]

Как это в maven провернуть ?

[@antonkuznetsov4978]

Жаль что так долго ждать новых видосов, ведь они суперские.

[@muhtoryusufjanov3946]

Thanks :)

[@ИльяСиротин-ф3ф]

Лукас

[@asdasd-fu4ow]

спасибо!

[@Ivan-oy9ub]

thanks!

[@andreyandryunin8737]

не компилировался файл main.js была ошибка TypeError: CleanWebpackPlugin is not a constructor. исправил в файле webpack.prod.js строчку const CleanWebpackPlugin = require('clean-webpack-plugin'); на const { CleanWebpackPlugin } = require('clean-webpack-plugin');

[@ВадимШох-п5щ]

Спасибо, добрый человек!

[@ВладиславМелехин-е5р]

Дай бог здоровья!

[@papchenko]

Кто собирает проект в 2021 1. Обновляемся до gradle 7.0.2 2. В поле plugins добавляем id "com.github.node-gradle.node" version "3.1.0" вместо того что добавлял автор. 3. после поля plugins apply plugin: 'com.github.node-gradle.node' 4. на Windows в Terminal .\gradlew build

[@АлександрМоскаленков-з6й]

Пишу проблемы с которыми столкнулся при ./gradlew build Возможно кому то это поможет в будущем. 1)У меня под Windows нужно было прописывать .\gradlew build а не ./gradlew build как показано в видео 2)В dependencies необходимо было удалить зависимости implementation 'com.sun.xml.bind:jaxb-core' implementation 'com.sun.xml.bind:jaxb-impl' Не знаю и не помню как они там появились. 3)В переменных среды Windows нужно было добавить JAVA_HOME c указанием на папку с jdk 4)В dependencies нужно было добавить compileOnly 'org.projectlombok:lombok:1.18.12' annotationProcessor 'org.projectlombok:lombok:1.18.12' Без них не работали гетеры и сеторы при сборке. Автору спасибо за виде. Пишу только для того чтобы помочь тем кто в будущем может столкнуться с такими же проблемами как и я, а не для того чтобы сказать что видео плохое.

[@Nikita-hu9bk]

А как вы дошли до этого урока с этими ошибками?) Я их уроков 6 назад пофиксил.

[@sergoorlov3899]

Спасибо за то что ты делаешь. Буду очень благодарен если покажешь как деплоить на Heroku

[@Sergey111111]

Очень круто, ждем накручивания CI/CD. Только действительно, это, конечно, жесть 1 Мб js файл, он же при каждом реквете будет посылаться

[@letsCodeDru]

Нет. Он кэшируется на клиенте. Пересылать я будет только после изменений

[@alexandrguravskiy9985]

Cool!!! Только у меня проблема нахождения пути в import - ах пришлось везде вместо 'js' прописывать ' ..' и c lombok need add compileOnly 'org.projectlombok:lombok:1.18.8' annotationProcessor 'org.projectlombok:lombok:1.18.8' lombok - Это зло

[@АлександрМоскаленков-з6й]

Не только у Вас. Этот комментарий сэкономил мне часа 2 времени. Плюс не пришлось расставлять гетеры-сеторы руками. Спасибо

[@YuretsUA]

+1 к карме тебе добрый человек, есть такое дело, проблема в относительных путях. пришлось пройтись по всем ошибкам и изменить пути на ../somefile или ../../somefile, почему-то если у меня файл в пути js/components/comment/CommentItem.vue то если прописать путь к ../components/UserLink.vue" оно его будет искать по пути js/components/comment, хотя путь задан относительно корня проекта. Благо в ошибках все написано, можно разобраться.

[@gamerecords_site]

Этот проект можно скомпилировать в Maven?

[@andreid5588]

Спасибо за видео, особенно понравилось как автоматизировали в Grade, такие ньюансы очень бодрят. И ещё, после смены директории пришлось изменить пути import, т.к. Idea не атрефакторила. Одно не приятно, когда всё находилось в static то Idea норм подсвечивала пути, а после переноса пришлось писать относительные пути ../../ хотя webpack норм собирает если пути указаны от паки js, но Idea ругается на это, что нет такой директори.

[@andreid5588]

что бы Idea "подтягивала" пути из webpack нужно Settings->Languages & ... -> JavaScript -> Webpack указать настроичный файл. Ещё удобно в этот файл добавить: resolve: { alias: { '@': path.resolve(__dirname, 'src', 'main', 'resources', 'js') }} и можно тогда пути импорта не относительные писать, а стильно: import CommentList from '@/components/comment/CommentList.vue'

[@ivsergey5150]

а покажите как заменить localhost во всем проекте на нужный ip, просто он везде: и во vue, webpack,spring. так бы что бы в одном месте прописал и все!

[@obuhovmi]

Попробовал собрать jar файл, вроде собрался и запустился по localhost работает, но когда ввожу IP адрес своей машины то получаю "отсутствует заголовок CORS" Как с этим бороться? Я делал не все из уроков, у меня нет Security...

[@denistrofimenko6602]

Поскорее бы docker

[@Сухастой]

Как с тобой связаться нужна твоя помощь?

[@letsCodeDru]

А точно моя помощь? Приходи в чат, у нас там народ смышленый и помогает хорошо.

[@andreyandryunin8737]

не билдился проект. 32 ошибки. пришлось ручками создавать геттеры сеттеры и конструкторы в классах.

[@Shel_Chanel]

Та же проблема была. Добавьте в зависимости грэдла annotationProcessor('org.projectlombok:lombok')

[@alexandrguravskiy9985]

@@Shel_Chanel I will try now, thanks )

[@Psyjewnaut]

Не кошерно это клиент и сервер в один файл пихать

[@borymskyi]

Кто ловит ошибку CleanWebpackPlugin , в webpack.prod.js , замените 4 строку на эту: const { CleanWebpackPlugin } = require('clean-webpack-plugin'); + после испрвьте все необходимые импорты, которые консоль будет писать.