I have a simple static web page which should be hosted on S3. Its only purpose is to call a certain API (https://myapi.com), to receive the response ({redirectUrl: string}), and then to redirect the user to the redirectUrl from the response after 5 seconds or to let them manually jump there using a button.
I have already been provided by a site structure, and the objects structure in my bucket looks like this:
| - mysubdomain/
| | - assets/
| | | - translations/
| | | | - translations.json
| | |
| | | - images/
| | | - comingSoon.png
| |
| | - css/
| | | - styles.css
| |
| | - src/
| | | - index.js
| |
| | - index.html
| | - index.test.js
| -README.md
index.html
<!DOCTYPE html>
<html lang="en">
<head>
...
<link rel="stylesheet" type="text/css" href="./css/styles.css" />
<script src="./src/index.js"></script>
<script>
window.onload = function () {
translatePage();
fetchRedirectUrl();
};
</script>
</head>
<body>
...
<img src="./assets/images/comingSoon.png" />
<p data-translation-key="description">Placeholder text</p>
<button id="myButton" data-translation-key="myButton" disabled>
Go
</button>
...
</body>
</html>
src/index.js
const API_URL = "https://myapi.com";
async function fetchTranslations() {
console.log('Fetch translations');
try {
const response = await fetch("../assets/translations/translations.json");
if (!response.ok) {
throw new Error("Network response was not ok " + response.statusText);
}
return await response.json();
} catch (error) {
console.error("There has been a problem with your fetch operation:", error);
}
}
async function translatePage() {
console.log('Translate page');
const translations = await fetchTranslations();
if (!translations) return;
const urlParams = new URLSearchParams(window.location.search);
const language = urlParams.get("lng") || "de";
document.querySelectorAll("[data-translation-key]").forEach((element) => {
const translationKey = element.dataset.translationKey;
element.textContent = translations[language][translationKey];
});
}
async function fetchRedirectUrl() {
console.log('Fetch redirect url');
const response = await fetch(API_URL, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
});
response.json().then((data) => {
if (data.redirectUrl) {
const myButton = document.getElementById("myButton");
myButton.disabled = false;
myButton.addEventListener("click", () => {
window.location.href = data.redirectUrl;
});
setTimeout(() => {
window.location.href = data.redirectUrl;
}, 5000);
}
});
}
When I open the page in my browser, I can see just the ugly page, the placeholder text and the disabled button. I don’t see any console.log (meaning that my script isn’t loaded properly), and there are no other errors. I don’t see the images in the page, nor the translations (even though I provided the lng parameter in the URL).
In the network tab, it looks like everything has been loaded properly…
What can be the problem?