Добрый день, коллеги!
Сегодня начинаю учебный (в том смысле, что сам учусь) проект на next.js и приглашаю заинтересованных присоединяться - https://github.com/linklib/pivo-moscow
В результате должно получиться: сайт-каталог с пивными заведениями Москвы с ассортиментом, данными о пиве. Все это добро должно фильтроваться и до кучи отображаться на карте.
Как будет процес обучения выглядеть?
Олег, приветствую!
Пока видится так:
- здесь обсуждаем текущую задачу по проекту, которую решаем;
- ищем оптимальное решение;
- внедряем в проект;
- смотрим, что вышло и переходим к следующей задаче.
Есть идеи как усилить процес - пиши)
Дима, успехов в начинаниях! :)
В свою очередь добавлю, что этот проект для обучения современным технологиям очень годится, потому что так же используется GraphQL API https://pivkarta.ru/api/
и здесь уместно все то же самое, что я и записывал в одном из первых видео https://freecode.academy/topics/obzornoe-video-po-@prisma-cms/nextjs
Так что тоже всем советую поиграться. Задачи по объему совсем небольшие, а знания будут получены очень полезные.
Николай, спасибо большое!
Не за что! :)
Дима, ты вылил в гитхаб проект с локала как есть, и потерялась всякая связь с исходным проектом https://github.com/prisma-cms/nextjs
Сделай следующее:
1. Удали этот проект (в настройках в самом низу страницы есть).
3. Переименуй свой форк (так же в настройках есть).
4. Вылий с локала в него (коммиты должны залететь без проблем).
Есть, сделал! Ссыль та же.
Вот.
Теперь можно посмотреть что было добавлено, чтобы заготовка заработала с новым API-сервером и появилась страница списка пива https://github.com/linklib/pivo-moscow/commit/e2787bf1b338e1342f4ac22a7279f3131456b7cd
И можно в целом сравнить два репозитория https://github.com/prisma-cms/nextjs/compare/master...linklib:master
А можно посмотреть что нового в текущий момент есть в заготовке по отношению к твоему проекту https://github.com/linklib/pivo-moscow/compare/master...prisma-cms:master
И все-таки накосячил где-то... Закомитить локальную версию не получилось и я склонировал новый репозиторий, закинул туда из архива pages/ и src/ и потом уже комит сделал.
Проект запустился и показывет ровно, что и должен, но изменеия не воспринимается и вообще ругается GraphQL на незнакомые type Beer, Place и так далее.
Видимо где-то осталась старая схема базовая. Не подскажешь, как перегенерировать?
Дима, тема интересная)
Только обсуждать нужно не здесь. Можно создать проект и делать отдельными задачами, так будет более правильно и удобно.
В любой момент можно будет посмотреть на каком этапе проект и обсуждать вопросы по каждой задаче в отдельной ветке.
Только не знаю работает этот функционал или нет, смотрю проекты захожу туда, но не вижу там задач.
Олег, должно на днях устаканиться) И похоже именно в проекты тема переедет!
Доброго времени суток Дмитрий! С удовольствием в ближайшее время присоединюсь к вам, в работе по созданию проекта!
<< Закомитить локальную версию не получилось
Вот тут надо было сразу задавать вопросы что не так.
Вероятнее всего, у тебя при пуше ошибка возникла вот такая:
git push -u origin master
To github.com:Pivkarta/nextjs.git
! [rejected] master -> master (fetch first)
error: failed to push some refs to 'github.com:Pivkarta/nextjs.git'
hint: Updates were rejected because the remote contains work that you do
hint: not have locally. This is usually caused by another repository pushing
hint: to the same ref. You may want to first integrate the remote changes
hint: (e.g., 'git pull ...') before pushing again.
hint: See the 'Note about fast-forwards' in 'git push --help' for details.
Это все потому что в исходный бранч уже прилетели новые коммиты, и твоя локальная версия просто отстает от нее.
Фиксится просто: надо скачать обновления на локал и все.
git pull origin master
А после опять выливаем.
git push origin master
И все ОК.
Вылил сюда: https://github.com/Pivkarta/nextjs
Можешь от него по той же схеме ответвиться. Или в этой сделать себе собственную ветку и сливать потом в мастер. Так будет даже правильней.
<< Проект запустился и показывет ровно, что и должен, но изменеия не воспринимается и вообще ругается GraphQL на незнакомые type Beer, Place и так далее.
Видимо где-то осталась старая схема базовая. Не подскажешь, как перегенерировать?
Если показывает, что надо, значит так и есть.
GraphQL не знакомые типы - это, я так понимаю, в VSCode? Расширение? Практически всем GraphQL-расширениям надо указывать путь к схеме. Иначе откуда они узнают о типах?
Смотри доку своего расширения и укажи путь до схемы src/modules/gql/generated/schema.json
Или пока забей, пока я не выберу какое-то боле менее популярное расширение и не напишу доку.
А в целом по поводу схемы и базы: выполнить надо 3 шага:
1. Убедиться, что есть файл .env и в нем прописан корректный адрес API-шлюза
В твоем случае это
API_ENDPOINT=https://pivkarta.ru/api/
2. Выполни генерацию типов
yarn generate:types
Должно быть так:
NODE_PATH=. ts-node -P tsconfig.server.json src/modules/gql/cli/generateTypes/run
✔ Parse configuration
✔ Generate outputs
✔ Parse configuration
✔ Generate outputs
✔ Parse configuration
✔ Generate outputs
(Если проект пустой и еще нет в проекте пользовательских graphql-запросов, то будет только 4 строчки)
3. Проверь TS-типы
yarn types
Тут просто не должно быть ошибок, результат типа такого:
yarn types
yarn run v1.22.5
$ tsc --pretty --noEmit
Done in 7.59s.
Если все эти шаги ОК, значит все ОК.
<< Дима, тема интересная)
Только обсуждать нужно не здесь. Можно создать проект и делать отдельными задачами, так будет более правильно и удобно.
В любой момент можно будет посмотреть на каком этапе проект и обсуждать вопросы по каждой задаче в отдельной ветке.
Только не знаю работает этот функционал или нет, смотрю проекты захожу туда, но не вижу там задач.
Олег, ты прям как в воду смотришь :) Только вчера Диме говорил, что буду дописывать функционал обсуждений в задачах :)
Постараюсь сегодня сделать.
Николай, приветствую! Спасибо!!
Сергей: рад!!
Не за что!
Николай, форкнул и... где-то пропускаю важное
1. git clone https://github.com/linklib/pivo-moscow.git
2. yarn install
3. Поставил в конфиг https://pivkarta.ru/api/
4. yarn generate:types
Отдал yarn types:
yarn run v1.10.1
$ tsc --pretty --noEmit
Done in 4.79s.
5. yarn build
6.yarn start
В терхминале без ошибок, а в консоли хрома - куча
VM308 _app-a0194a063b3b1d8078bb.js:1 WebSocket connection to 'ws://localhost:3000/api/' failed: Error during WebSocket handshake: Unexpected response code: 308
Что это может быть?
Да все ОК у тебя. Просто websocket не умеет в ws://, умеет только в wss:// Это по соображениям безопасности. Не обращай внимания.
Позже рассмотрим этот момент, сейчас он для нас не критичен.
На боевом сайте, если работает на https://, автоматом включается wss:// и все ОК.
Тогда какая-то друшгая проблема. Вношу изменения в код: Например <div>Main Page 111111</div> в MainPage/index.tsx - изменения появляются только после
yarn build
yarn start
Алёша :)
Логично. Потому что ты запускаешь боевую версию, которую, в свою очередь, надо сначала билдить.
А чтобы работало налету (hat reload), надо запускать yarn dev. И я тебе это тоже не раз говорил. А ты не записал.
Ъ.... Поздравляю Шарик, ты - балбес...
Задача 1. Вывести на страничке пива: название пива, описание, регион, производителя и логотип. Так же нужно сформировать URL ЧПУ и ссылку на источник.
На текущий момент в контенте выводится id, url формируется по id.
pages/beers/[id].tsx
Дима, задачи в комментах пока не создавай. Я готовлю под это функционал.
Николай, привет! В каком виде выкладывать полезную информацию, как думаешь? Например, как сделать простую страничку About (в коммиты кинул, но почему-то залетело на Pivkarta/nextjs и на linklib/pivo-moscow).
А вот с получением данных для страницы пива пока разобраться не получается)
Дима, привет!
Сегодня точно выкачу топики с привязкой к задачам, вот туда и сможешь вылить. Логично в проектах ставить задачи типа "Сделать страничку О нас" и в нем написать топик и указать коммит.
<< в коммиты кинул, но почему-то залетело на Pivkarta/nextjs и на linklib/pivo-moscow
Один пуш не должен прилетать и туда и туда. Я вижу коммит в linklib/pivo-moscow, но не вижу в Pivkarta/nextjs, как, в принципе, и должно быть.
Все понял, спасибо!