I have an electron app where i use preact package to create components and serve them in an index.html and i want to turn it to a web app
my file structure is
-- src/
---- workers/
---- components/
---- index.js (rendering the div#root)
-- index.html (with div#root and script src='src/index.js')
the js files contain nodejs code
i tried to create a root file index.js with a server pointing to index.html but the js inside src/ doesn't work
index.html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>title</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="root"></div>
<script src="./src/index.js"></script>
</body>
</html>
src/index.js:
const { render, h } = require("preact");
const App = require("./components/App");
const rootEl = document.getElementById("root");
render(h(App, { rootEl }), rootEl);
i tried this:
const path = require("path");
const express = require("express");
const app = express();
app.use(express.static(__dirname));
app.get('/', function(req, res) {
res.sendFile(path.join(__dirname, '/index.html'));
});
app.listen(process.env.PORT || 4433, () => {});
Related
I have the following app with express/socket.io (the app is listening and live without any errors). When I http-request it I get the following error:
GET http://localhost:3030/socket.io/1/?t=1630097351846 404 (Not Found)
And on the socket.io reponse http://localhost:3030/socket.io at I get:
Cannot GET /socket.io
Please help !!
const socket=io.connect('http://localhost:3030/');
//const { Socket } = require("socket.io");
const videoGrid=document.getElementById('video-grid');
const myVideo=document.createElement('video');
myVideo.muted=true;
let myVideoStream
navigator.mediaDevices.getUserMedia({
video:true,
audio:true
}).then(stream=>{
myVideoStream=stream;
addVideoStream(myVideo,stream);
})
// socket.emit('join-room');
const addVideoStream=(video,stream)=>{
video.srcObject=stream;
video.addEventListener('loadedmetadata',()=>{
video.play();
})
videoGrid.append(video);
}
const express=require('express');
const app=express();
const server=require('http').Server(app);
const {v4: uuidv4}= require('uuid');
const io=require('socket.io-client')(server);
//import { io } from "socket.io-client";
app.set('view engine', 'ejs');
app.use(express.static('public'));
app.get('/',(req,res)=>{
res.redirect(`/${uuidv4()}`);
})
app.get('/:room',(req,res)=>{
res.render('room',{roomId :req.params.room});
})
io.on('connection',socket=>{
socket.on('join-room',()=>{
console.log("Room Joined");
})
})
//now need to import socket.io in script.js
// server.listen(app.get('3030'));
app.listen(3030);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Zoom RJ</title>
<link rel="stylesheet" href="style.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/socket.io/0.9.16/socket.io.min.js"></script>
<!-- <script src="/node_modules/socket.io/client-dist/socket.io.js"></script> -->
</head>
<body>
<div id="video-grid">
</div>
<script src="script.js"></script>
</body>
</html>
I keep getting the following MIME error while trying to lead in a stylesheet to my application:
I have followed the newest issues on this MIME error for hours now with no luck. I have told my Express development server to pull resource from a static file and still no luck. Here is my development hierarchy:
I will include my code below. Any help is appreciated.
**index.html**
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="subject" content="">
<meta name="author" content="">
<link rel="stylesheet" href="/public/styles/customStyles.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<title>Clone Application</title>
</head>
<body>
<div class="conatiner-fluid">
<nav class="nav-wrapper">
Hello Again
</nav>
Hello World
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
</body>
</html>
**Server.js**
const express = require('express');
const app = express();
const router = require("./router");
const path = require("path");
const PORT = 3000;
app.use(router, express.static('public'));
app.listen(PORT, () => {
console.log("Listening on port: " + PORT);
});
**router.js**
const express = require('express');
const router = express.Router();
const pages = "/public/pages/";
router.get('/home', (req, res) => {
res.sendFile(__dirname + "/public/pages/home/index.html")
})
module.exports = router;
Your HTML links to the stylesheet at /public/styles/customStyles.css
However, the correct URI is /styles/customStyles.css (or preferably without the first slash, styles/customStyles.css so it will continue to work if the page isn't in the root).
app.use(router, express.static('public')); tells express to serve static files under the 'public' folder, so adding 'public' to your CSS URI is incorrect.
You're getting an HTML MIME type due to the Express default error page ('Cannot GET..')
My folder structure is something like this:
app
controller
routes
app.js
Within my controller folder, I have
controller
sites folder
index.html
style.css
controller.js
Here is my Controller.js
const express = require('express');
app = express();
app.use(express.static('../site'));
module.exports= {
index : (req, res, next)=>{
res.status(200);
res.sendFile(__dirname + '\\site\\index.html');
}
};
And here is my index.html:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Template</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>
When I run the server and do a GET request, Express gives a 404 on the CSS file. Where am I going wrong?
I am using the express ejs layouts but only the mainPage can read the css the other pages don't read it (the css, the html read it).
Another question, if I wanted to use another layout (ex: layout2.ejs) what would i do to act on a specific page.
Tree:
Project
- public
- js
- css
- style.css
- routes
- index.js
- users.js
- views
- layout.ejs
- mainPage.ejs
- login.ejs
...
- app.js
I am using particles.js if you need to know.
app.js
const express = require('express');
const expL = require('express-ejs-layouts');
const app = express(); //Create a Web Application
//EJS
app.use(expL);
app.set('view engine', 'ejs')
//Routes
app.use('/', require('./routes/index'));
app.use('/users', require('./routes/users'));
app.listen(3000, ()=> console.log('Listening at 3000'));
app.use(express.static('public'))
index.js
const express = require('express');
const router = express.Router();
router.get('/',(req, res) => {
res.render('mainPage',{title: 'Groupy'}); (THIS ONE WORK AND READ THE CSS)
});
module.exports = router;
users.js
const express = require('express');
const router = express.Router();
//Login Page
router.get('/login',function(req, res) {
res.render('login',{title: 'Groupy Login'}); (DON'T READ CSS)
});
//Register Page
router.get('/register',function(req, res) {
res.render('register',{title: 'Groupy Register'}); (DON'T READ CSS)
});
module.exports = router;
layout.ejs
<html>
<head>
<script type="text/javascript" src="code.js"></script>
<link rel="stylesheet" type="text/css" href="./css/style.css">
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
</script>
<title><%= title %></title>
</head>
<body>
<div id="particles-js"> </div>
<script src="js/particles.min.js"></script>
<script src="js/app.js"></script>
<h2>teste</h2>
<%- body %>
</body>
mainPage.ejs
<h1 id="title">Groupy</h1>
<div id="firstBox">
<div id="SignIn">Register <div id="login">Login</div>
</div>
</div>
<br>
<div id="mainBox"></div>
login.ejs
<h1 id="title">Groupy Login</h1>
Reseult of login (without CSS):
teste
Groupy Login
Can you try the following app.use instead of app.use(express.static('public'))
app.use('/public', express.static(path.join(__dirname, 'public')));
Also you should import path module
const path = require('path');
The error was the path of css and javascript (particles.js)
<link rel="stylesheet" type="text/css" href="/css/style.css">
<script src="/js/particles.min.js"></script>
<script src="/js/app.js"></script>
I need to pass a variable from a NodeJS file to a rendered html file. How to do that?
Here below what I had tried
Nodejs code
const loginRouter= express.Router();
const config= require('../config/config.json');
loginRouter.get('/', (req,res)=>{
res.render(path.dirname(__dirname)+'/views/login.html',{version:config.version});
//res.json('done')
});
HTML Code
<label style="font-size:10px;float: right;"><%= version %></label>
Current Result:-
Nothing is coming
Expected Result:-
<label style="font-size:10px;float: right;">3.9</label>
I have set this version number in my config which I have imported in my login.js, but still, I am not getting the output. Does anyone have any idea about it?
If you don't want to use a templating engine like ejs or pug then you can just send a get request with axios or fetch to your node server and send a response.
Here's a sample on how you can do it. Change it according to your needs.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1 id="title">My page</h1>
<script>
fetch('http://localhost:5000/version').then(function(response) {
return response.json();
}).then(function(myJson) {
document.getElementById('title').innerHTML = myJson;
});
</script>
</body>
</html>
server.js
const express = require('express');
const app = express();
const PORT = 5000;
app.get('/', (req, res) => {
res.sendFile('index.html', {root: __dirname });
});
app.get('/version', (req, res) => {
const myVersion = 'My version is 0.5';
res.json(myVersion);
});
app.listen(PORT, () => {
console.log(`Server running on PORT ${PORT}`);
});