Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

Assets JS: Express

Сайт — это не только динамически генерируемые страницы, но так же и различные статические файлы (ресурсы), такие как картинки, файлы стилей, шрифты. Раздача статики — это работа, которую на себя берут фреймворки и веб-сервера.

В Express это работает следующим образом. Определяется специальный маршрут, который связывается с обработчиком Express.static(pathway). Обработчик в свою очередь принимает на вход путь, по которому он будет просматривать файлы на диске.

import path from 'path';
import Express from 'express';
const app = new Express();

const pathway = path.join(__dirname, 'public');
app.use('/assets', Express.static(pathway));

// http://localhost:3000/assets/images/kitten.jpg
// http://localhost:3000/assets/css/style.css
// http://localhost:3000/assets/js/app.js
// http://localhost:3000/assets/images/bg.png
// http://localhost:3000/assets/hello.html

Важно отметить, что указанный маршрут /assets не участвует в поиске файла на диске, другими словами, он используется только для http адресов.

Bootstrap

Представьте себе ситуацию: вы решили сделать сайт любителей игры "Мафия". И сразу же стало понятно, что вы не представляете себе, как он будет выглядеть. Дизайнер из вас так себе, да и нет времени и возможности делать дизайн самостоятельно, а следовательно, потом его нарезать, верстать и интегрировать в сайт. Современная вёрстка тоже не самое простое занятие, как может показаться на первый взгляд. Не говоря уже про то, что сверстать сайт так, чтобы он везде выглядел хорошо, ещё та история, особенно если под "везде" мы понимаем не только разные браузеры, но и разные устройства, в том числе мобильные. Что делать?

  1. Заплатить дизайнеру/верстальщику;
  2. Попробовать найти готовый свёрстанный макет. В целом, это возможно, но чаще всего такие макеты готовят под конкретные cms, что накладывает на них определённый отпечаток. Так же эти макеты практически не расширяемы. Они не позволяют делать больше того, что заложено в них.

Даже если макет будет найден, встаёт вопрос о том, как оформлять административный интерфейс. И на этом этапе должна появиться мысль о том, что неплохо было бы автоматизировать этот процесс. Каждый сайт содержит административный интерфейс, причём все они более-менее одинаковые.

В какой-то момент появилось направление так называемых css фреймворков. Наборы стилей и, возможно, js файлов, которые предоставляют базовые классы для формирования макетов, а так же готовые компоненты для наиболее часто встречающихся задач.

Самым популярным фреймворком является Bootstrap. Более того, Bootstrap является одним из самых популярных проектов на всём гитхабе! Он позволяет очень быстро накидать внешний вид сайта и даёт множество механизмов для его кастомизации. Например hexlet.io полностью построен на Bootstrap. Такой подход позволяет нам очень быстро внедрять фичи и не тратить время на цикл дизайна/вёрстки. И мы почти не пишем своих стилей.

Во всех уроках этого курса в шаблонах используется Bootstrap. С одной стороны, мы хотим показать преимущества его использования на стадии прототипирования. С другой, надеемся на то что вы немного поизучаете его возможности и начнёте использовать.


Аватары экспертов Хекслета

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты.

Для полного доступа к курсу нужен базовый план

Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.

Получить доступ
1000
упражнений
2000+
часов теории
3200
тестов

Открыть доступ

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

  • 130 курсов, 2000+ часов теории
  • 1000 практических заданий в браузере
  • 360 000 студентов
Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и соглашаетесь с «Условиями использования»

Наши выпускники работают в компаниях:

Логотип компании Альфа Банк
Логотип компании Aviasales
Логотип компании Yandex
Логотип компании Tinkoff
Рекомендуемые программы

С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.

Иконка программы Node.js-разработчик
Профессия
с нуля
Разработка бэкенд-компонентов для веб-приложений
1 декабря 10 месяцев
Иконка программы Fullstack-разработчик
Профессия
с нуля
Разработка фронтенд- и бэкенд-компонентов для веб-приложений
1 декабря 16 месяцев

Используйте Хекслет по-максимуму!

  • Задавайте вопросы по уроку
  • Проверяйте знания в квизах
  • Проходите практику прямо в браузере
  • Отслеживайте свой прогресс

Зарегистрируйтесь или войдите в свой аккаунт

Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и соглашаетесь с «Условиями использования»