i've been using this project locally and it was perfect, when i uploaded the puppeteer function on firebase functions and the frontend part to firebase hosting the chromium headless browser isn't popping up like it meant to.
here's the index.html file inside puplic folder :
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>select</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="mark_fill_div" id="insert">
<form action="">
<div class="two_label_and_inputs">
<label for="userName">Nom d'utilisateur</label>
<input type="text" name="inputedUserName" id="userName" />
<label for="userName">Mots de passe</label>
<input type="password" name="inputedPassword" id="password" />
</div>
<div class="choix_releve">
<label for="numReleve">releve de note</label>
<select id="numReleve">
<option value="2" selected>Bulletin 1</option>
<option value="3">Bulletin 2</option>
<option value="4">Bulletin 3</option>
</select>
</div>
<div class="select_file">
<label for="inputFile" class="custom-file-input"
>Choose an excel file</label
>
<input type="file" id="inputFile" accept=".xls,.xlsx,.csv" />
</div>
</form>
</div>
<div class="proceed_btn">
<input type="button" id="loginBtn" value="Start filling" />
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.4/xlsx.full.min.js"></script>
<script>
const apiEndpoint =
"https://us-central1-for-all-apps.cloudfunctions.net/app";
document
.getElementById("loginBtn")
.addEventListener("click", async () => {
var inputedUserName = document.getElementById("userName").value;
var inputedPassword = document.getElementById("password").value;
var selectedOption = document.getElementById("numReleve").value;
const data = {
inputedUserName: inputedUserName,
inputedPassword: inputedPassword,
selectedOption: selectedOption,
};
const options = {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(data),
};
try {
const response = await fetch(apiEndpoint + "/api", options);
if (response.ok) {
console.log("first request successful");
// await handleSelctedFile();
} else {
console.log("first request failed");
}
} catch (error) {
console.error(
"An error has occurred at the first request respond:",
error
);
}
});
</script>
</body>
</html>
and here's my index.js file inside functions directory :
const functions = require("firebase-functions");
const express = require("express");
const cors = require("cors");
const app = express();
const corsOptions = {
origin: 'https://for-all-apps.web.app',
methods: ['POST'],
optionsSuccessStatus: 204,
};
app.use(cors(corsOptions));
app.use(cors(corsOptions));
app.use(express.json({ limit: "10mb" }));
app.post("/api", async (request, response) => {
try {
const returnedValue = await loginMethod(request.body);
response.json({
status: returnedValue === 1 ? "success" : "failure",
});
} catch (error) {
console.error("An error occurred:", error);
response.status(500).json({ status: "failure", error: error.message });
}
});
async function loginMethod(userN_pswd) {
try {
console.log("the username: " + userN_pswd.inputedUserName);
console.log("the password is: " + userN_pswd.inputedPassword);
console.log("the selected option is: " + userN_pswd.selectedOption);
const puppeteer = require("puppeteer");
const browser = await puppeteer.launch({
headless: true,
args: ['--no-sandbox']
});
console.log("Chromium browser launched successfully");
page = await browser.newPage();
page.setDefaultTimeout(100000);
await page.goto("https://placen.wt-dj.com/", { timeout: 1260000 });
return 1;
} catch (error) {
// console.error("An error has occurred:", error);
return 0;
}
}
exports.app = functions.https.onRequest(app);
and finally here's my package.json file :
{
"name": "pup",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"cors": "^2.8.5",
"express": "^4.18.2",
"firebase": "^10.7.1",
"firebase-functions": "^4.6.0",
"puppeteer": "^21.6.1"
}
}
so when i insert the required data in the form and i click on the "Start filling" button there's no occuring issue but the chromium headless browser isn't appearing.