Все социальные сети в одном месте! Аналог Taplink и Linktree на React JS и Chakra UI!

Я думаю многие из вас видели у блогеров ссылку размещенную в описании профиля, перейдя по которой можно было бы увидеть все социальные сети данного человека!

Мой YouTube и Telegram каналы.

Есть очень много сервисов, которые помогут Вам сделать такую ссылку, но мы не можем достаточно кастомизировать такие страницы, выбирать домен, а также везде будет упоминание сервиса, через который мы такую ссылку делали.

Поэтому мне пришла идея сделать такой сервис для себя и разместить конечный результат на сервере, а в этой статье я хочу поделиться своим проектом и рассказать Вам как его настроить и использовать!

Вот как это сейчас выглядит у меня)

Переходим по ссылке и попадаем на мою страничку со всеми социальными сетями разом!

Мой проект размещен в профиле на GitHub.

В данном проекте я использовал React JS и библиотеку компонентов Chakra UI.

Выбор пал на Chakra UI просто потому что я очень давно хотел попробовать данную библиотеку.

1) Форкаем данные репозиторий, после чего клонируем его себе на компьютер:

git clone https://github.com/FilimonovAlexey/link-bio-page.git

2) Заходим в директорию проекта и устанавливаем зависимости:

npm install

3) Запуск проекта

npm run start

После того как мы убедились, что локально у нас все работает можно переходим к настройке проекта под себя!

В самом проекте я оставил множество комментариев, поэтому не думаю, что будут сложности с разбором и адаптацией проекта под себя. Однако на пару вещей я все таки хотел обратить внимание.

Все социальные сети в одном месте! Проект на React JS

Для добавления иконок я использовал библиотеку React Icons. Для того, что бы подобрать свои иконки перейдите на сайт, выберите необходимую иконку и импортируйте ее в проект.

Для создания анимаций использована библиотека Framer Motion, ссылка на документацию.

Также хотел обратить внимание, что у chakra UI есть библиотека готовых компонентов, которыми вы можете воспользоваться при адаптации проекта под себя и его доработки. Ознакомиться с компонентами можно по ссылке.

В этой части статьи я расскажу Вам как загрузить свое React приложение на сервер, пропишем автозапуск приложения с утилитой pm2, настроим конфиг nginx, установим ssl сертификат, пропишем переадресацию с http н https!

В первую очередь необходимо арендовать сервер на Ubuntu 22.04 (все приведенные в статье команды полностью совместимы с ней), сам я уже давно использую сервера timeweb, на них у меня установлено уже достаточно много проектов от VPN до собственного сайта, эти ребята меня не подводили!

“tehnomaniak” получи 1 месяц в подарок при оплате сервера на 1 год;

“super” получи 3 месяца в подарок при оплате сервера на 2 года;

1) Подключаемся к нашему серверу через ssh, для этого в терминале прописываем следующую команду:

ssh root@xx.xx.xx.xxx (root и xx.xx.xx.xxx логин и ip адрес соответственно, их мы получим на почту при аренде сервера).

2) Устанавливаем node js:

curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash - //setup_18.x вместо 18 ставим ту версию которая стоит у вас локально, проверить версию можно командой node -v, указываем только первое число

sudo apt install -y nodejs // непосредственная установка NodeJS

3) Устанавливаем git:

sudo apt update //обновляем информацию о новых версиях пакетов, на всякий sudo apt install git -y //устанавливаем git

4) Клонируем репозиторий нашего React приложения командой: git clone

5) Устанавливаем зависимости

npm install

6) Устанавливаем pm2 и запускаем наше приложение при старте сервера

sudo npm install pm2 -g // ставим Pm2

pm2 start npm -- start // из папки нашего приложения

pm2 startup

pm2 save

7) Настраиваем Файрвол и nginx

sudo apt update //а вдруг кто новый пакет зарелизил

sudo apt install nginx -y // ставим nginx

sudo ufw allow 'Nginx Full' //открываем 80 и 443 порт в ufw

sudo ufw allow OpenSSH // открываем 22 порт

sudo ufw app list // проверить что все все правила корректно добавились, вы увидите это, главное чтобы OpenSSH был в списке, иначе вы закроете доступ к серверу по ssh и другого способа попасть на сервер не будет //Available applications: // Nginx Full // Nginx HTTP // Nginx HTTPS // OpenSSH

sudo ufw enable // запускаем файрвол

sudo systemctl enable --now nginx // добавляем в автозапуска и запускаем nginx sudo ufw status verbose //смотрим что открыто

8) Настройка конфига nginx

sudo nano /etc/nginx/sites-available/default //открываем конфиг и удаляем все, что там есть по умолчанию

Ваш конфиг должен выглядить примерно так, можете скопировать:

server { listen 443 ssl; server_name ваш_ip_адрес; root путь_до_папки_build; try_files $uri .html; ssl_certificate /etc/ssl/domain.ru.crt; ssl_certificate_key /etc/ssl/domain.ru.key; location / { proxy_pass http://localhost:3000; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection 'upgrade'; proxy_set_header Host $host; proxy_cache_bypass $http_upgrade; } }

9) Установка ssl сертификата

Если вы приобрели сертификат, то у вас должны быть на руках файл CRT и ключ, содержимое этих файлов необходимо записать в файлы: /etc/ssl/domain.ru.crt и /etc/ssl/domain.ru.key соответственно;

С подробной инструкцией можете ознакомится тут.

На этом все, деплой React приложения на сервер завершен успешно!

В статье есть реклама ООО «ТАЙМВЭБ.КЛАУД», ИНН 7810945525, 2VtzqxL7pa2

#reactjs #программирование #социальныесети

9 комментариев

Длиннофамильный Иван

30.10.2023

Блядь х2. Арендовать сервер для статической странички. Господа, мы проебали ойти, пора отбирать смузи и вводить в практику плети и дыбы.

Ответить

Ты ебаный шиз, если для ссаной странички с парой ссылок поднял ноду. Вот такие "разрабы" идут в геймдев и потом мы получаем 10 ФПС на 4090.

А нужно было всего-то на голом хтмле и ксссе сделать пару дивов и ссылок. Я в ахуе от современной разработки нодоебланов.

Без негатива, если что. :3

Egres

То есть это "проект", который генерит страничку с десятком статических ссылок?

Иван Голунов

Это и есть современный фронтенд.

Alexey Kunitsky

Это прям беда. Взял бы что-то вроде https://astro.build/ или https://www.11ty.dev/, если не хочешь на чистом html + css.

Да хорош ныть.
Если делать по простому, то я бы просто сделал на голом js, а ссылки просто из файлика брать. Но если ты делаешь на фреймворке, так хоть используй разделение файлов, а то у тебя простыня текста в App.

Тодд Говард

Все социальные сети в одном месте! Аналог Taplink и Linktree на React JS и Chakra UI!

Запуск проекта:

Настройка проекта

Как разместить сайт на сервере?

Промокоды на скидку от меня:

После того как сервер уже арендован необходимо выполнить следующее: