2024年6月6日 星期四

Troubleshooting ngrok Connection Issues with Local Subdomains

Problem Description

I encountered difficulties getting ngrok version 3.10.0 to connect to my local subdomain despite trying various methods found online. The issue persisted until I came across this GitHub issue: “ngrok(ver.3) doesn’t work to tunnel localhost has subdomain.”

Environment Configuration

  • ngrok version: 3.10.0
  • Ruby on Rails version: 6.0.6.1
  • Local development URL: http://data.localhost.com:3000/

The Problem

The problem seems to be specific to Rails, which explains why commands that worked for others didn’t work in my case.

Solution

To resolve the issue, I used the following command:

ngrok http --host-header=rewrite http://data.localhost.com:3000/ --request-header-add=x_forwarded_host:data.localhost.com:3000

This command successfully established the ngrok tunnel for my local subdomain. If you’re experiencing similar issues with ngrok and Rails, give this solution a try.

張貼者： 於 沒有留言:

ngrok 3 連到 local subdomain(rails)

 ngrok version 3.10.0

試了網路數各種方法都沒辦法讓 ngrok 連到我的 local subdomain 上面

一直到我看到了這個 issue ngrok(ver.3) doesn’t work to tunnel localhost has subdomain

看來是 rails 引起的，難怪其他人可以正確動作的指令對我都沒用
最後要用下面這樣：

ngrok http --host-header=rewrite http://data.localhost.com:3000/ --request-header-add=x_forwarded_host:data.localhost.com:3000
張貼者： 於 沒有留言:

2024年6月4日 星期二

Integrating Partytown without using npm

1. Download Partytown Library Files

First, you need to download the Partytown library files into your project. Use the following command to copy the library files to your desired location:


npx @builder.io/partytown copylib --no-debug /path/to/your/project/public/partytown}

Replace /path/to/your/project/public/partytown with the actual path where you want to store the Partytown library files.

2. Generate the Partytown Snippet

Next, generate the Partytown snippet using the Node.js command:


node -e "import('@builder.io/partytown/integration').then(({ partytownSnippet }) => console.log(partytownSnippet({forward:['dataLayer.push'],lib:'/partytown/'})))"

Replace /partytown/ with the correct path relative to your website’s root where the Partytown files are hosted.

3. Integrate the Snippet into Your HTML

Copy the generated snippet and paste it into the <head> section of your HTML file. Here’s an example:


<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Using Partytown</title>

<script>

// Paste the generated Partytown snippet here

</script>

</head>

<body>

<script type="text/partytown" src="https://example.com/analytics.js"></script>

</body>

</html>

Summary

  1. Download Partytown library files using npx @builder.io/partytown copylib.

  2. Generate the Partytown snippet with the appropriate path using the Node.js command.

  3. Integrate the generated snippet into your HTML <head> section.

張貼者： 於 沒有留言:
標籤： ,

我終於可以用partytown了

 https://partytown.builder.io/html

最近想要在 GTM 上面用 partytown，但是 yarn add 馬上就卡關
因為需要 node > 18 但我專案只有 14
本來想說能不能用 CDN，在他們 github 上看到兩個答案互相矛盾的 issue
Where is partydown.js file ? 和 How can I load partytown from a pure HTML/JS website?
第一個的回答是直接說沒有 CDN link，第二個的回答是說可以用 unpkg
不過其他網站看到的也是說不能用 CDN

Note that Partytown scripts must be self-hosted on the same server as the HTML documents. Since Partytown is using a service worker, these files must be served from the same origin as your site, and cannot be hosted from a CDN.

可是看他們在 html 的說明又寫

At the lowest level, Partytown is not tied to one specific framework or build tool. Because of this, Partytown can be used in any webpage as long as the HTML is updated, and the library scripts are hosted from the origin.

看起來只要檔案在我自己這邊就算啥 tool 都沒有應該也是可以用
可是我看不懂他的說明

<head>
  <script>
    /* Inlined Partytown Snippet */
  </script>
  <script type="text/partytown" src="https://example.com/analytics.js"></script>
</head>

我就是不知道 Inlined Partytown Snippet 要寫什麼啊（抱頭)
所以我可以理解為什麼會有這個 issue # How to implement partytown in vanilla js or HTML project ? Why partytown has most confusing documentation ?

還好最後我找到了這一篇有完整寫出到底該怎麼靠自己導入 partytown
因為其他很多教學雖然說自己是純靜態網站，但一開始也是用 npm 或 yarn 在裝 partytown
https://tanstaafl.0pt.jp/posts/2023/05/08/e6725aadb317/
他裡面也有寫到

導入については簡単で HTML ヘッダにスニペットとサードパーティスクリプトの呼び出しを書いておくだけである。
しかし公式での説明がちょっと不足していると感じたので簡単に手順を共有する。

對嘛對嘛不是只有一個人覺得官網說明不夠

其實步驟很簡單，只要知道該怎麼用的話 orz…

  1. 下載 @builder.io/partytown/lib 到專案裡

npx @builder.io/partytown copylib --no-debug {看你想把partytown放在哪}

  1. 生成 snippet
node -e "import('@builder.io/partytown/integration').then(({ partytownSnippet }) => console.log(partytownSnippet({forward:['dataLayer.push'],lib:'剛剛你選擇的路徑'})))"

比方我是像下面這樣

node -e "import('@builder.io/partytown/integration').then(({ partytownSnippet }) => console.log(partytownSnippet({forward:['dataLayer.push'],lib:'/public/partytown/'})))"

然後把生出來的東西貼到官網上顯示
Inlined Partytown Snippet 的地方就大功告成了

張貼者： 於 沒有留言:
標籤： ,
訂閱： 文章 (Atom)