Рубрики
Без рубрики

Как установить CSS Taillid в Джанго на Heroku

Как вы можете настроить Tailwind CSS для вашего приложения Django на Heroku? В этой статье мы посмотрим, как я это сделал … с меткой Python, Django, Tailwindcss, Heroku.

Как можно настроить Tailwind CSS Для вашего приложения Django на Heroku? В этой статье мы посмотрим, как я сделал именно это недавно.

У меня есть побочный проект, который использует Tailwind CSS. Чтобы начать быстро, я использовал версию из сети доставки контента (CDN), как описывает Tailwind в документация . Первоначально это работало нормально, когда я начал свой проект, но версия CDN огромна (около 3 МБ).

Я также развернут свое приложение в Heroku, поэтому я не стал тратить время на создание индивидуальной сборки Tailwind. Если вы следуете более вовлеченным инструкциям Tailwind, вы можете значительно сократить размер вашего файла CSS. Я установил все это, и мой файл CSS перешел от огромного размера CDN до 29 КБ.

Вот шаги высокого уровня, чтобы настроить попутный ветер для приложения Django на Heroku:

  • Настройка Node.js Анкет
  • Установите Tailwind.
  • Создайте файл конфигурации Tailwind и ваш файл CSS.
  • Установите команду сборки.
  • Создайте файл локально для разработки.
  • Подключите файл CSS в свои шаблоны.
  • Установите пакет для Heroku.

Настройка node.js

Я использую Mac и Homebrew Таким образом, установка последней версии Node.js выглядела как:

$ brew install node

Если вы находитесь на другой платформе, способ установить node.js будет другим. Проверьте документы Node.js для инструкций по установке.

Установите Tailwind

Из моего репо, я бежал:

$ npm install tailwindcss

Это создало Package.json и Package-lock.json Файл в корне моего репозитория, в котором будут перечислены Tailwind и его зависимости node.js.

Установка Tailwind также создаст node_modules каталог. Вы определенно хотите добавить этот каталог в свой .gitignore файл.

Создайте конфигурацию Tailwind

Tailwind использует файл конфигурации для любых настроек, которые вы хотите сделать. Я создал пустой с:

$ npx tailwindcss init

Я перенес недавно созданное tailwind.config.js к фронт Справочник, чтобы помочь мне держать вещи в аккуратном.

Прежде чем я смог получить какую -либо пользу от выполнения этой работы, я должен был убедиться, что Tailwind знал, где находятся мои шаблоны. Это очень важно, потому что Tailwind будет использовать Purgecss для устранения любых дополнительных классов CSS, которые он не может найти в моих шаблонах. Если вы пренебрегаете этим шагом, окончательная версия, которую Tailwind будет построить, также будет огромной.

Чтобы установить правильную очистку, я добавил этот блок в свой файл конфигурации Tailwind:

  purge: [
    './templates/**/*.html',
  ],

В своем проекте я держу все свои шаблоны Django в Шаблоны каталог в корне моего репозитория.

Я также использовал Tailwind с PostCSS, поэтому мне нужен был postcss.config.js Файл в корне моего репо. Вот содержание файла:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

Наконец, мне нужен был мой фактический файл CSS. Я добавил Frontend/site.css с:

@tailwind base;

@tailwind components;

@tailwind utilities;

Установите команду сборки

Чтобы собрать все это вместе, нам нужна команда сборки. Вот что я включил в Package.json (с добавленным форматированием здесь для целей отображения).

{
  "scripts": {
    "build": "tailwindcss build frontend/site.css
                -c frontend/tailwind.config.js -o static/site.css"
  },
  ...
}

Команда сборки инструктает по ветру:

  • Расположение входного файла
  • Какой файл конфигурации использовать
  • Куда поместить выходной файл

Создайте локальный файл CSS

Теперь я могу запустить NPM Run Build и сгенерированный файл с именем site.css хранится в моем статический каталог. Это еще один файл, который вы хотели бы добавить в свой .gitignore Потому что вы не хотите совершать это под управление источником.

Чтобы проверить, что все было правильно, я запустил свою команду, используя производственную конфигурацию и проверил ее локально. Tailwind показал на выходе сборки значительно уменьшенный размер файла.

$ NODE_ENV=production npm run build

Если вы сделаете это, не забудьте запустить его снова позже без Производство Ценность или вы будете действительно запутаны, когда ваши стили не появляются, когда вы разрабатываете новые функции на своей местной машине!

Зацепить файл CSS в шаблоны

Благодаря Tailwind Toolchain на месте я был готов поменять свою версию CDN. Я пошел к своему базовому шаблону и заменил линию CDN:

{% load static %}
  ...

Выводя файл CSS в Статический Справочник, у Django нет проблем с загрузкой его стандартным механизмом статических файлов.

В качестве дополнительного бонуса, во время развертывания, Django создаст версию файла отпечатков пальцев, которая включает в себя имени файла хэширования. Это означает, что мой файл Tailwind CSS получит те же преимущества кэширования, что и я из версии CDN, но при массовом размере!

Установите новый Heroku BuildPack

Я должен был сказать Heroku, что теперь я хочу запустить Node.js в рамках развертывания моего приложения. Мы можем сделать это, добавив новый Heroku BuildPack. Важно, чтобы это было до Python BuildPack, так что Django CollectStatic Процесс найдет сгенерированный файл. Мы можем установить заказ с Индекс вариант:

$ heroku buildpacks:add --index 1 heroku/nodejs

Чтобы сказать Heroku, какую версию Node.js использовать, я добавил двигатели раздел к Package.json :

{
  "engines": {
    "node": "15.x"
  },
  ...
}

Теперь, когда я развертываю свое приложение в Heroku, Tailwind создаст производственную версию CSS -файл, чтобы служить моим пользователям. Это происходит потому, что Heroku по умолчанию по умолчанию Node_env к Производство Анкет

И вот как я это сделал! Страницы в моем приложении намного более хладнокровно после того, как я внес это изменение. Для браузера больше CSS, чтобы обрабатывать загрузку на странице на многие порядки.

Благодаря толчке от Уилл Винсент Чтобы заставить меня сойти с ленивой задней части и, наконец, настроить мой инструмент JavaScript.

Если у вас есть вопросы или понравились этой статье, пожалуйста, не стесняйтесь написать мне в Twitter в @mblayman Или поделитесь, если вы думаете, что другие тоже могут быть заинтересованы.

Оригинал: “https://dev.to/mblayman/how-to-set-up-tailwind-css-in-django-on-heroku-319p”

Читайте ещё по теме: