Установка Visual Studio Code — текстовый редактор в котором мы кодим
Установка приложений для разработки на React.js Next.js Node.js
Программируем с Дмитрием
с 21.07.2024
Front-end разработчик. Телеграмм для предложений: @pletnevdn Сайт: https://boosty.to/pletnevd
8 подписчиков
0 подписок
Синхронизируем наш VDS с GitHub репозиторием
Выберем способ заливки файлов приложения непосредственно с github.com Для использования данного метода нам нужно установить ssh аутентификацию нашего VDS Ubuntu в нашем git репозитории на github.com
Установка Nginx для Node.js
До начала установки нам необходимо выбрать директорию, в которой у нас будут находиться сайты. У меня это:
Переводим на TypeScript наш Node.js/EXPRESS
В предыдущих статьях я рассказал как написать простенький сервер.
Middleware в Node.js/EXPRESS
Middleware используется для того, чтобы разделить различные этапы обработки запросов (авторизация, валидация, парсинг входных данных в удобный формат, основная логика) на промежуточные обработчики.
Маршрутизация запросов к серверу и структура каталогов Node.js/EXPRESS
Пока что мы написали одностраничный сервер с единственным запросом. Но сама суть сервера подразумевает, что он должен обрабатывать целый спектр запросом и отправлять различные ответы. Для этого нужна маршрутизация, чтобы мы разные запросы отправляли по своим отдельным URL.
Файл переменных сервера и ключей .env Node.js/EXPRESS
Файлы .env предназначены для хранения переменных окружения. Для использования этой технологии достаточно создать в проекте файл с именем .env и внести в него переменные окружения, начиная каждую с новой строки:
Настраиваем запрос к серверу Node.js/EXPRESS
Для начала остановим сервер. И приступим к редактированию файла server.js
Создаем новый проект Next.js
Зачем нам Next.js, если есть React.js? Не совсем корректно сравнивать Next.js и Create-React-App, потому что NextJS — нечто большее. В то время как CRA — инструмент для cкаффолдинга React-приложений, NextJS — это фреймворк для их создания. Прямо из коробки NextJS предоставляет рендеринг на стороне сервера, создание статических сайтов, serverless-фу…
Использование папки public в React.js
Как известно, исходные файлы проекта для приложения у нас обычно лежат в папке src, а в папке public изначально находится сам файл html, в который мы потом рендерим весь проект в div id="root" и находится Favicon.
React Router DOM первое знакомство
Хочу сделать админку к калькулятору. На ней мы будем включать в меню или выключать какие-то калькуляторы. Всего у нас 5 видов калькуляторов, которые находятся на одно странице: