Login
Frontend

Гайд по переносу проекту з Parcel на SD (Styles, JS)

21 Sep 2023

Як стандарт будемо використовувати наш проєкт CMS-Admin, гілку start.

Поступово робимо такі етапи:

1. В першу чергу обов'язково треба видалити з файлу .htaccess цю частину:

Image

Image

Це для того, щоб працював js. Якщо там такого немає, то йдемо далі.

2. Front-end розробнику треба створити свій env файл. В корені проєкту SD треба створити файл .env та вписати в ньому: LINK_STYLES_DIR = '.output/'

3. Перед переносом треба збілдити проєкт FD і зберегти собі папку dist, звідти будемо переносити всі файли.

4. Переносимо правильно стилі, js, шрифти, lottie та статичні файли:

  1. Для перенесення стилів та js треба взяти, в уже збілдженому проєкті, який знаходиться на FileZilla, в папці assets такі папки - links, scripts, styles та перенести іх в папку проєкта SD в app/src з заміною файлів.
  2. Беремо у проєкті SD в app/src папку scripts та перейменовуємо її в js.
  3. Для переносу шрифтів, lottie, статичних файлів треба так само взяти з папки assets папку fonts, lottie, static але перенести її тепер в папку проєкту SD в app/assets з заміною файлів.

папка assets на збілдженому проєкті FD<br>

папка assets на збілдженому проєкті FD

Те як має виглядати на SD<br>

Те як має виглядати на SD

4. Підключення js:

  1. Заходимо в app/src/links в файл scripts.html та знаходимо підключення файлу main.js. Для нього треба змінити шлях з src="./js/main.js" на src="../js/main.js".
  2. Перевіряємо, щоб підключення в layout.php було в такому вигляді -
Зміна шляху для main.js

Зміна шляху для main.js

5. Підключення стилів:


  1. Заходимо в app/src/links в файл scripts.html та знаходимо підключення файлу tailwind.pcss. Для нього треба змінити шлях з src="./styles/tailwind.pcss" на src="../styles/tailwind.pcss".
  2. Другим кроком треба ВИДАЛИТИ .
Зміна шляху для tailwind.pcss та видалення підключення стилів основних з FD

Зміна шляху для tailwind.pcss та видалення підключення стилів основних з FD

6. Перенесення зображень:


  1. Для перенесення зображень треба взяти, в уже збілдженому проєкті, який знаходиться на FileZilla, в папці img всі файли та перенести їх в папку проєкту SD в app/public/images.

7. Для запуску збірки треба з FD проєкту в файлі package.json перенести всі devDependencies та dependencies в файл з SD проєкту.

Image

Image

8. Перевірити щоб в файлі tailwind.config.cjs були розкоментовані шляхи для SD, та закоментовані з FD.

Image

Image

0