Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/brandymint/iq300-front
https://github.com/brandymint/iq300-front
Last synced: about 5 hours ago
JSON representation
- Host: GitHub
- URL: https://github.com/brandymint/iq300-front
- Owner: BrandyMint
- Created: 2019-12-18T09:15:20.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-19T06:42:45.000Z (almost 2 years ago)
- Last Synced: 2023-05-09T21:25:34.734Z (over 1 year ago)
- Language: HTML
- Size: 25.4 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 21
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# IQ300 Frontend
------
## Старт
Должны быть установлены git, ruby, bundler, bower, nodejs.
Работает с nodejs v8.8.1.
Удобно пользоваться [nvm](https://github.com/creationix/nvm)
`nvm use` устанавливает версию node, прописанную в `.nvmrc`
1. `bundle install`
2. `yarn` и `bower install` — устанавливаем зависимости
3. Запуск сервера
`yarn start`
4. Билд статичного сайта
`./frontend_build` делает билд статичного сайта в `build/` и билд
компонента в `dist/`
5. Пути к файлам
Gulp-задача собирает в `app/tmp/assets` все ассеты, при билде — в
`dist/assets`. Поэтому во вьюхах фронтэнд-проекта картинки с путями
`/assets/pic.png`, а в стилях `background-image: url("#{$images-path}/logo-blue.png")`
## Деплой статичного проекта
`./frontend_build` — делаем билд
вписываем AWS key/secret в `config/keys.coffee` (пользователь iq300_frontend в IAM)
`yarn deploy:staging`
`yarn deploy:staging2`
можно создавать s3 bucket-ы по примеру iq300-frontend-stage, добавлять в config/keys.coffee и деплоить `NODE_ENV= gulp s3`
## Использование в основном проекте
Должен быть настроен Bower (в т.ч. Sprockets для него)
1. Устанавливаем компонент
```bower install --save [email protected]:IQ300Ltd/NewInterfaces.git#master```
2. Подключаем стили в проект
```stylesheet_link_tag "iq300_frontend/app/stylesheets/app"```
```stylesheet_link_tag "iq300_frontend/app/stylesheets/dev-app"```
Не забываем добавлять в `config/application.rb`
```config.assets.precompile += %w(app.css dev-app.css)```
То же для остальных прекомпилируемых стилей.
3. Обновление компонента в рельсовом проекте
```bower update iq300-frontend```
## Примечания
`active_admin.scss` не включён (оставлен в главном проекте)
Всё, что компилируется, находится в `app`.
Билд компонента находится в `dist`.
Билд статичного сайда находится в `build`
Вьюхи можно использовать HAML или ERB (первый предпочтительнее).
По возможности использовать `= partial` (аналог рельсовых `= render`).
Можно копировать разметку страницы из инспектора браузера и
конвертировать в Haml, заменяя повторяющиеся части кода на partial'ы.
Быстрый билд и push в репо `./update_component`
## Troubleshooting
Удаляем кэш node-модулей
```rm -rf node_modules && npm cache clean && npm install```
Пробуем альтернативный репо node-модулей (помогает при fetch-ошибках)
```npm config set registry "https://registry.nodejitsu.com"```
или дефолтный репо
```npm config set registry http://registry.npmjs.org/```
## TODO
- Убрать зависимости из проекта в Bower `grep -r TODO app`
- Обновить libsass