This is a Next.js project bootstrapped with create-next-app
.
Copy .env.example
file to .env.local
and make necessary changes. Run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
Open http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying app/page.tsx
. The page auto-updates as you edit the file.
This project uses next/font
to automatically optimize and load Inter, a custom Google Font.
We are using husky to fix potential problems using eslint when running git commit
. We are also making files pretty using prettier on commit. Please, configure your ide to use provided eslint and prettier config files.
component
- general use components like buttons, text inputs, etcfeatures
- grouped features like login form, navbar. We should group providers, services, hooks, helpers for each feature in its feature folder if it is not used across any other component outside current featurehooks
- hooks used across entire project, like scroll observer, etclib
- non hook helpers used across projectproviders
- providers used globallyservices
- non hook code which communicates with 3rd party services and is used globally or across many features / components
Firstly, you need to create ngrok account to point newly create webapp to development machine. Go to ngrok.com and create account. You will have to create static domain which is free.
Secondly, you will have to create telegram bot which is like a host to your web app. Go to https://t.me/botfather and click start. Follow the steps:
/newbot
This bot is created for developing purposes, so it will be good to reflect this in its name. If you have problems when choosing the bot name type /newbot
again, which will restart the process. Remember bot's name.
/newapp
You will need the bot's name, photo and gif. You can skip the gif part. After the gif part you will be asked for web app url. For developing purposes you should use the one you created using ngrok service. You will be asked for bot short name - we will use it as the short_name
value when using Bot API.
Go to Settings -> Advanced -> Experimental settings -> Enable webview inspecting
If the app was installed using flatpack or snap install it again using binary file from telegram website.
Go to bot father, chose your bot and show bot token.
$: docker compose --env-file .env.local up -d
After you have changed or created schema file you can directly run:
$: npm run db:push
If you finished your changes, and you are sure you want to create migration files:
$: npm run db:generate
$: npm run db:migrate
If you want to migrate your changes to the prod you need to paste in the url, which is a get request to the api and add secret string as a query string. Example:
https://<url>/api/v1/scripts/migrate?scripts_api_key=<SCRIPTS_API_KEY>
If you want to seed database you can do it two ways. You can enter address in the url bar:
https://<url>/api/v1/scripts/seed?scripts_api_key=<SCRIPTS_API_KEY>
or you can run the script:
$: npm run db:seed
You check your manifest configuration, https://docs.ton.org/develop/dapps/ton-connect/manifest. If you are using ngrok to host your manifest you should make sure it is not blocked by ngrok's consent info or place it somewhere online.