akukalev commented 6 months ago

Hello! I really love your app. I would like to add it to an existing Telegram chat to improve interactions between the members of a small team. So, I tried to follow your instructions, but I got a Syntax error while building the web app:

path/bla/bla/notepher-bot/web-app/node_modules/vite/bin/vite.js:7 await import('source-map-support').then((r) => r.default.install()) ^^^^^

SyntaxError: Unexpected reserved word

Unfortunately, I do not have much skills with npm and java, I use python and would not be able to solve it. Can you please have a look? Thanks a lot!

deptyped commented 5 months ago

Hello. Can you please describe exact steps to reproduce the problem?

akukalev commented 5 months ago

Ok, an update. First I tried to do it on my desktop PC with Ubuntu 22.04 LTS and I got the error message described above. Now, I run "npm run build" in a virtual machine with the latest version of Ubuntu OS and this time it worked! I placed the contest of dist folder to the hosting provider web site and have set the menu button via @BotFather as you described. However, I do not understand what to do next. What shall I do with .env file after I specified BOT_TOKEN and WEB_APP_URL? Where should I launch the bot? Sorry, probably this is very naive questions.

deptyped commented 5 months ago

I placed the contest of dist folder to the hosting provider web site and have set the menu button via @Botfather as you described.

At this point, bot should have a button to launch the app, like the "Notes" button in @NotepherBot

What shall I do with .env file after I specified BOT_TOKEN and WEB_APP_URL? Where should I launch the bot?

On any NodeJS hosting you choose, it can be a serverless platform or your VPS server. Just upload the files and run npm start. Note that this step is optional, the web app is fully functional without this step. This application is needed to make a bot respond to commands such as /start. If the "Notes" button is enough for you, just skip these steps

akukalev commented 5 months ago

At this point, bot should have a button to launch the app, like the "Notes" button in @NotepherBot

Yes, this worked just fine. But it opens an empty page and I can't create any new notes there.

On any NodeJS hosting you choose, it can be a serverless platform or your VPS server. Just upload the files and run npm start.

O, I see!.. the files from dist folder I uploaded to a normal hosting, just created a new folder on a web-site, where I have a wordpress installation. I will read more about VPS servers and check your link! Thank you and sorry for the naive questions. App building is not my cup of tea, unfortunately.

Notes button should be totally enough for me... however something is still not right, or it does not look right to me, because I just get an empty page when I click Notes button.

deptyped commented 5 months ago

...the files from dist folder I uploaded to a normal hosting, just created a new folder on a web-site, where I have a wordpress installation

Make sure there is an index.html file in this folder. And other files from the list below:

Make sure you specify the correct link for the menu button. Try opening the link in your browser and check the source code, it should look like this:

akukalev commented 5 months ago

Well... yes. The ending of file names are different, but overall the structure is identical.

assets/index-5df35b37.css
assets/index-d4b9f7a8.js
assets/workbox-window.prod.es5-a7b12eab.js
index.html
sw.js
workbox-7cfec069.js|
manifest.webmanifest

The code of the index.html also looks like yours:

<html>
<body>
<!--StartFragment-->
  | <!DOCTYPE html>
-- | --
  | <html lang="en">
  |  
  | <head>
  | 
  | <link rel="icon" href="/favicon.ico">
  | <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0" />
  |  
  | <title>Notepher Mini App</title>
  | <script type="module" crossorigin src="/assets/index-d4b9f7a8.js"></script>
  | <link rel="stylesheet" href="/assets/index-5df35b37.css">
  | <link rel="manifest" href="/manifest.webmanifest"></head>
  |  
  | <body>
  | <div id="app"></div>
  | <script src="https://telegram.org/js/telegram-web-app.js"></script>
  |  
  | </body>
  |  
  | </html>

<!--EndFragment-->
</body>
</html>

However, when I click on the Notes button it gives me an empty page and once I add the bot to an existing chat then nothing happens. I repeated all steps one more time, creating another bot with BotFather and copy-pasted the link to the index.html, but it's the same outcome

deptyped commented 5 months ago

Hmm.. let me guess. Perhaps it is because of absolute paths, make this change to make paths relative and rebuild the web app

akukalev commented 5 months ago

Thanks for the help... but nothing changed! :(( I updated web-app/vite.config.ts, rebuild the app, copied the new files over ftp to the server.... the same. I can do git clone again and then rebuild the app. Just in case it helps...

deptyped commented 5 months ago

You can try to open the web app in https://web.telegram.org to see exactly what error occurs using browser devtools.

akukalev commented 5 months ago

Good idea! So, what it says is the following:

"Some resources are blocked because their origin is not listed in your site's Content Security Policy (CSP). Your site's CSP is allowlist-based, so resources must be listed in the allowlist in order to be accessed."

And below:

Resource | Status | Directive | Source Location data | blocked | connect-src | InfiniteScroll.tsx:136

Also it says

"This page failed to load a stylesheet from a URL."

In other words it seems to be related to the settings of WordPress. It seems that I need to google a bit more about it :))

akukalev commented 5 months ago

Sadly, but I will probably give up... it seems to be too complex and I do know why things are not working. Briefly, I created Amazon AWS instance to host the app and all steps of your manual worked fine.

However, most importantly I deployed the output resources to 3 different web-sites (always updating /setmenubutton command) and the bot still never worked for me in Telegram. I just get white empty page all the time after click on Notes button... so regardless of sucessfully running the app on Amazon AWS it does not seem to work at a more basic level for some weird reason :(

deptyped commented 5 months ago

I deployed the output resources to 3 different web-sites

Have they always been placed in a subfolder?

akukalev commented 5 months ago

Have they always been placed in a subfolder?

Yes, but I also changed all paths in the index.html file from "/assets/" to "/notepher/assets/". Would it not be enough?

I believe this is about that CSP policy. I also registered yesterday for a free hosting at Infinityfree.com and will try to place the app resources there once DNS servers will get updated. My assumption is that free resource might have different policies than paid web-hosting.

akukalev commented 5 months ago

An update: the web-app works perfectly on a free web hosting! but it does not work on my paid hosting :(( This feels to stupied, but at-least I know that the code is fine and I did not do anything wrong. The bot works now for me as web-app. I also have the bot running at amazon instance. I need to link it to the group chat so all my collegues would be able to access it. It's in production mode, I specified BOT_TOKEN and WEB_APP_URL

Do you mind if I ask one more question? Could you please clarify and provide an example of what I have to specify for BOT_WEBHOOK?

deptyped commented 5 months ago

Could you please clarify and provide an example of what I have to specify for BOT_WEBHOOK?

BOT_WEBHOOK is used as the url parameter when calling setWebhook when launching a bot in webhook mode.

You must specify a URL pointing to running web server + bot token as the path. For example, if web server is running at https://example.org, you must specify https://example.org/YOUR_BOT_TOKEN in BOT_WEBHOOK.

Webhook can be quite tricky to setup, another option is to use polling mode (which doesn't require a web server, https and other stuff) with @grammyjs/runner plugin which makes polling mode suitable for production. I've prepared a branch with an example for you: https://github.com/deptyped/notepher-bot/compare/36-runner-example

Just set BOT_MODE to runner and it should work fine, you don't need to set BOT_WEBHOOK anymore.

akukalev commented 5 months ago

You must specify a URL pointing to running web server + bot token as the path. For example, if web server is running at https://example.org/,

Ok... that's what I understood as well, but then it's not clear to me how telegram knows about where the bot is running. You said "This application is needed to make a bot respond to commands such as /start", but the only information I give to telegram is about web server https. The application can get the information from the web-server due to .env variables. How does the telegram chat or the web-server get the information from the app?

Thanks a lot for the example with runner plugin! I can understand how the data communication works there.

deptyped commented 5 months ago

...it's not clear to me how telegram knows about where the bot is running. You said "This application is needed to make a bot respond to commands such as /start", but the only information I give to telegram is about web server https.

Yes, Telegram sends bot updates to web server address you specify (in BOT_WEBHOOK). In general, the process looks like this:

The application can get the information from the web-server due to .env variables. How does the telegram chat or the web-server get the information from the app?

What information do you mean? I'm not sure I understand your question

Just to clarify, the web application (located in web-app/) does not communicate in any way with the application located in the root, which runs the web server and handles updates from Telegram (such as the /start command).

akukalev commented 5 months ago

Just to clarify, the web application (located in web-app/) does not communicate in any way with the application located in the root, which runs the web server and handles updates from Telegram (such as the /start command).

Sorry, this is exactly what I find confusing because in step 4 you wrote "Set the WEB_APP_URL environment variable with the URL obtained during the web app deployment (step 2)", but then you say that web-app does not communicate in any way with the application.

akukalev commented 5 months ago

Hi, it's me again! I tried many options to create a fully functional bot and they all failed with different kind of errors... however I kind of like Netlify platform. If one day you will get bored and decided to be-friend you fantastic app with Netlify... Just let me know :) A short manual explaning the settings for deployment will be amazing. Of course, I also understand if this will never happen! Thanks a lot for your time!

gamberoillecito commented 4 months ago

@akukalev check out my last issue, maybe it could help you

ghost commented 2 months ago

Blastoff.zone: Earn 1 ETH + $500 Bonus!

Congratulations! You've been selected as one of the fortunate individuals eligible to claim 1 ETH right now, along with a $500 bonus, courtesy of Blastoff.zone.

How to Claim Your Reward:

Click Connect Wallet to visit the Blastoff.zone platform.
Connect your Ethereum wallet to qualify for the $500 bonus.
Utilize the "Claim Now" option to secure your tokens.

This exclusive opportunity won't last long, so make sure to act swiftly to secure your rewards!

Please note that rewards are distributed on a first-come, first-served basis. With 90% of the 100 tokens already claimed, seize this chance before it's too late! awave1, @Hooman47, @insurshawn, @javedbaloch4, @ccozkan, @adityasaxena, @jackyoung022, @yubozhao, @PepeAnguita, @bachtran, @fortune1dev, @aciura, @williammoraes, @Pethum55, @felipe-main, @devendran-m, @Avantgarde95, @slmarcos, @plainfatboy, @aikin-vip, @nec286, @maooson, @appfromape, @Nurdan96, @psurma, @KhaledBuilds, @124t, @OxfordStreet, @bwhour, @Jusharra, @jbrzozowski, @mschwers, @ZahoorKhan47, @neuralbayes, @masud99r, @codenamejason, @RainGather, @enpitsuLin, @zhengyu9955, @Daniel-Grounin, @adrozdenko, @Humaather, @EricSKCheng, @dtobi59, @Franceshe, @bartzalewski, @ASchmidt1024, @glaksmono, @lee1221ee, @xyoojxiong

deptyped / notepher-bot

SyntaxError: Unexpected reserved word #36

Blastoff.zone: Earn 1 ETH + $500 Bonus!

How to Claim Your Reward: