[GH-ISSUE #132] Local js/css scripts #76

New issue

Open

opened 2026-03-03 11:14:13 +03:00 by kerem · 3 comments

kerem commented

2026-03-03 11:14:13 +03:00

Owner

Originally created by @parthsidpara on GitHub (Oct 29, 2025).
Original GitHub issue: https://github.com/debloper/xiosk/issues/132

Discussed in https://github.com/debloper/piosk/discussions/113

^{Originally posted by marcogruhl September 16, 2025}
Hi, great project! Thank you!

I hit a small road block when using PiOSK in an air gaped environment. The js and css scripts (bootstrap.bundle.min.js, bootstrap.min.css, jquery-3.7.1.min.js) don't load. I also can imagine usecases where the Pi are not allowed to load something from outside.

I can had to ideas to implement this: Load the files within the installer and change the paths or include the files in the project. Any thoughts?

If this is a good idea i will provide a PR for it.

regards Marco</div

Originally created by @parthsidpara on GitHub (Oct 29, 2025). Original GitHub issue: https://github.com/debloper/xiosk/issues/132 ### Discussed in https://github.com/debloper/piosk/discussions/113 <div type='discussions-op-text'> <sup>Originally posted by **marcogruhl** September 16, 2025</sup> Hi, great project! Thank you! I hit a small road block when using PiOSK in an air gaped environment. The js and css scripts (bootstrap.bundle.min.js, bootstrap.min.css, jquery-3.7.1.min.js) don't load. I also can imagine usecases where the Pi are not allowed to load something from outside. I can had to ideas to implement this: Load the files within the installer and change the paths or include the files in the project. Any thoughts? If this is a good idea i will provide a PR for it. regards Marco</div

kerem commented

2026-03-03 11:14:14 +03:00

Author

Owner

@djedu28 commented on GitHub (Nov 26, 2025):

You need to serve them with a web server. Use express. A minimal configuration of the examples on the official express page. is enough.

Just remember to set the page of the HTML/CSS/JS files as the "public" page of the Express service.

Automatically translated.

ordinal text in Brazilian Portuguese

Você precisa servir elas com um servidor web. Use o express. Uma configuração mínima dos exemplos na página oficial do express. já é o suficiente.

lembre-se apenas de definir a página dos arquivos html/css/js como a página "public" do serviço express.

exemplo:

A importação depende se está usando cjs ou mjs

example:

The import depends on whether you are using cjs or mjs

import express from 'express';

const app = express();
const port = 8080;

// #__dirname in mjs
import path from "node:path";
const __dirname = import.meta.dirname;

const path_public_folder = path.join(__dirname, '/dist')
app.use(express.static(path_public_folder));

app.use((req, res) => {
  if (!req.method.toUpperCase() === 'GET') {
    return res.status(404);
  }
  res.setHeader('Content-Type', 'text/html');
  res.setHeader('Cache-Control', 's-max-age=604800, stale-while-revalidate');
  return res.status(404).sendFile("index.html", { root: path_public_folder });
});

app.listen(port, () => {
  console.log(`Servidor rodando na porta ${port}`);
});

@djedu28 commented on GitHub (Nov 26, 2025): You need to serve them with a web server. Use express. A minimal configuration of the examples on the official express page. is enough. Just remember to set the page of the HTML/CSS/JS files as the "public" page of the Express service. ---- Automatically translated. <details><summary>ordinal text in Brazilian Portuguese</summary> Você precisa servir elas com um servidor web. Use o express. Uma configuração mínima dos exemplos na página oficial do express. já é o suficiente. lembre-se apenas de definir a página dos arquivos html/css/js como a página "public" do serviço express. exemplo: > A importação depende se está usando cjs ou mjs </details> example: > The import depends on whether you are using cjs or mjs ```js import express from 'express'; const app = express(); const port = 8080; // #__dirname in mjs import path from "node:path"; const __dirname = import.meta.dirname; const path_public_folder = path.join(__dirname, '/dist') app.use(express.static(path_public_folder)); app.use((req, res) => { if (!req.method.toUpperCase() === 'GET') { return res.status(404); } res.setHeader('Content-Type', 'text/html'); res.setHeader('Cache-Control', 's-max-age=604800, stale-while-revalidate'); return res.status(404).sendFile("index.html", { root: path_public_folder }); }); app.listen(port, () => { console.log(`Servidor rodando na porta ${port}`); }); ```

kerem commented

2026-03-03 11:14:14 +03:00

Author

Owner

@djedu28 commented on GitHub (Nov 26, 2025):

If you want to use the same service as the piosk interface, just put the files in the dashboard folder /dashboard

@djedu28 commented on GitHub (Nov 26, 2025): If you want to use the same service as the piosk interface, just put the files in the dashboard folder [`/dashboard`](https://github.com/debloper/piosk/tree/main/dashboard)

kerem commented

2026-03-03 11:14:14 +03:00

Author

Owner

@marcogruhl commented on GitHub (Nov 26, 2025):

HI @djedu28
i pushed a PR (#115 ) for that, but its outdated. If i find some time i will adjust it to v5.

@marcogruhl commented on GitHub (Nov 26, 2025): HI @djedu28 i pushed a PR (#115 ) for that, but its outdated. If i find some time i will adjust it to v5.