I have created a site, that have root, help and 404 paths and pages in hbs format. The issue is that when I run localhost:3000/wrong it shows the site correctly but when I run localhost:3000/help/wrong the css part doesn't get applied to that 404 page as it should, because there is not route /help/wrong.
I run the code using node app.js or nodemon app.js.
Folder Structure:
public
css
styles.css
templates
partials
animal.hbs
info.hbs
views
404.hbs
help.hbs
index.hbs
app.js
package.json
package-lock.json
package.json
"dependencies": {
"express": "^4.17.1",
"hbs": "^4.1.1"
},
"devDependencies": {
"nodemon": "^2.0.7"
}
app.js
const express = require("express");
const hbs = require("hbs");
const app = express();
app.set('view engine', 'hbs');
app.set('views', './templates/views');
hbs.registerPartials('./templates/partials');
app.use(express.static('./public'));
const animal = 'Tiger';
app.get('', (request, response, next) => {
response.render('index', {
title: 'Root',
animal
});
})
app.get('/help', (req, res) => {
res.render('help', {
title: 'Help',
animal
})
})
app.get('/help/*', (req, res) => {
res.render('404', {
title: '404',
animal,
error: 'Help Page Not Found!'
})
})
app.get('*', (req, res) => {
res.render('404', {
title: '404',
animal,
error: 'Page Not Found!'
})
})
app.listen(3000, () => {
console.log("Server is on port 3000");
})
index.hbs
<!DOCTYPE html>
<html lang="en">
<head>
<title>Root</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
{{>info}}
{{>animal}}
</body>
</html>
help.hbs
<!DOCTYPE html>
<html lang="en">
<head>
<title>Help</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
{{>info}}
{{>animal}}
</body>
</html>
404.hbs
<!DOCTYPE html>
<html lang="en">
<head>
<title>404</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
{{>info}}
{{error}}
{{>animal}}
</body>
</html>
animal.hbs
<p>Animal is {{animal}}</p>
info.hbs
<h1>{{title}}</h1>
Root
Help
styles.css
body {
background-color: teal;
}
I have tried explaining the question as best as possible. Please do comment if anything is not clear. Thank you so much.
app.get('/help*', (req, res) => {
res.render('404', {
title: '404',
animal,
error: 'Help Page Not Found!'
})
})
Does removing the / before the * do the trick?
Related
when I use rollup configure vue3 environment ,i run it then use the component in the html file,it happen error
the code below
rollup.config.js this is rollup config file
const path = require('path')
const resolve = require('rollup-plugin-node-resolve')
const commonjs = require('rollup-plugin-commonjs')
const babel = require('rollup-plugin-babel')
const json = require('rollup-plugin-json')
const vue = require('rollup-plugin-vue')
const postcss = require('rollup-plugin-postcss')
const inputPath = path.resolve(__dirname,'./src/index.js')
const outputUmdPath = path.resolve(__dirname,'./dist/imooc.datav.js')
const outputEsPath = path.resolve(__dirname,'./dist/imooc.datav.es.js')
module.exports = {
input:inputPath,
output:[{
file:outputUmdPath,
format:'umd',
name:'imoocDatav',
globals: {
vue: 'Vue'
}
},{
file:outputEsPath,
format:'es',
globals: {
vue: 'Vue'
}
}],
plugins:[
vue(),
babel({
exclude:'node_modules/**',
presets: ["#vue/babel-preset-jsx"]
}),
resolve(),
commonjs(),
json(),
// vue(),
postcss({
plugins:[]
})
],
external:['vue']
}
Test.vue this is vue3 component
<template>
<div class="text">{{ aa }}</div>
</template>
<script>
export default {
name: 'Test',
setup() {
const aa = 'hello';
return {
aa,
};
},
};
</script>
<style lang="scss" scoped>
.text {
color: red;
}
</style>
index.js the code make an global component
import Test from './Test.vue'
export default function(Vue){
Vue.component(Test.name,Test);
}
index.html this is html file
<!DOCTYPE html>
<html>
<head>
<title>imooc datav libs example</title>
<script src="https://cdn.jsdelivr.net/npm/vue#3.0.0-beta.6/dist/vue.global.js"></script>
<script src="../dist/imooc.datav.js"></script>
</head>
<body>
<div id="app">
{{message}}
<test></test>
</div>
<script>
Vue.createApp({
setup(){
var message = 'hello world';
return {
message
}
}
}).use(imoocDatav).mount('#app');
</script>
</body>
</html>
vue.global.js:4877 TypeError: Cannot read property 'aa' of undefined
package.json dependencies:
"vue": "^3.0.0"
Change:
external:['vue']
to
external:['#vue']
This works for me
I'm using deno, oak, and view_engine.
Here is my file structure:
server.ts
routes
user.ts
view
index.ejs
/user
index.ejs
On my server.js this code works as expected:
router
.get("/", (context: any) => {
context.render("view/index.ejs");
});
But, in my routes/user.ts, the following code does NOT work:
router
.get("user/", (ctx: any) => {
ctx.render("../view/user/index.ejs")
});
Inside render, I tried:
${Deno.cwd}"/../view/student/index.ejs"
"/../view/user/index.ejs"
and out of desperation:
"/view/user/index.ejs"
I'm sure there's a super easy, most obvious thing I'm missing here.
Here is workaround,
import { Application, send, Router } from "https://deno.land/x/oak/mod.ts";
import { viewEngine, engineFactory, adapterFactory, ViewConfig } from 'https://deno.land/x/view_engine/mod.ts';
const ejsEngine = engineFactory.getEjsEngine();
const oakAdapter = adapterFactory.getOakAdapter();
const app = new Application();
app.use(viewEngine(oakAdapter, ejsEngine, {
viewRoot: "./view",
viewExt: ".ejs",
}));
const router = new Router();
app.use(router.routes());
app.use(router.allowedMethods());
router
.get('/', async (ctx, next) => {
ctx.render("index", { data: { name: "Nikhil" } });
});
await app.listen({ port: 8000 });
Inside the view folder i have index.ejs
Run files as,
deno run --allow-net --allow-read server.ts
index.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>EJS HOLA</h1>
Hobbies of <%=data.name%>
</body>
</html>
For more resource to add, you can look at view_engine
Hye guys I am newbie in node.js .
I am working with ejs partial template . I have been stuck for days in this issue where i have public/css/style.css file in root directory .
where i am accessing this file from views/contact.ejs and views/home.ejs
Contact.ejs
!-- begin snippet: js hide: false console: true babel: false -->
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="/public/css/style.css" type=“text/css“>
</head>
<body>
<%- include('partialComponents/naviagations.ejs') %>
<H3>CONTACTS US !</H3>
<h2>LEARN THE BEST CODE TECHNIQUES HERE ....</h2>
<h2>EJS FILE TEMPLATE </h2>
</body>
</html>
main.js
var express = require('express');
var app = express();
app.set('view engine', 'ejs');
//app.set('views', '/views'); // settings the path to view folder to express can locate
//by default express will check the view folder in first root to the js file
app.use(express.static('public'))
app.get('/profile/:id', (req, res) => {
var data = {
age: 23,
job: 'software developer',
hobbies: ['eating', 'fishing', 'gaming']
}
console.log('hey');
res.render('profile', { name: req.params.id, data: data });
});
app.get('/home', (req, res) => {
res.render('home');
});
app.get('/', (req, res) => {
res.render('home');
});
app.get('/contact', (req, res) => {
res.render('contact');
});
app.listen(3000);
// console.log(__dirname + "");
style.css
body {
background-color: skyblue;
text-align: center;
}
h3 {
font-size: 50px;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
color: white;
}
h2 {
color: white;
}
.testid {
color: red;
}
here is my file structure
👨🏫 You're missing in the <link href=""> because you have set public as your static folder, your style is in the location:http://localhost:3000/css/style.css. That is why when you call /public/css/style.css it cannot be found, because it will look for thepublic folder inside the public folder and you do not have it other than thecss folder there..
So, You can change your <link href=""/> with this code below 👇:
<link rel="stylesheet" href="/css/style.css" href="text/css">
For an example: You can see on my codesandbox
Sandbox code: https://codesandbox.io/s/quirky-borg-ghwc0
For view only: https://ghwc0.sse.codesandbox.io/contact
I hope it can help you 🙏.
Have problem in my express app. Have some ejs templates, where css style file applied correctly. For example "localhost***/page", but when i go to "localhost***/page/secondpage" my ejs doesn't see style even if i apply it.
A little bit of code
app.js
app.use(express.static(path.join(__dirname, 'public')));
//some code
app.use('/', require('./routes/index'));
app.use('/events', require('./routes/events'));
some routes
const express = require('express');
const router = express.Router();
router.get('/', function (req, res, next) {
let query = *db query*;
res.locals.connection.query(query, function (error, results, fields) {
if (error) throw error;
res.render('index', { title: 'Events', data: results });
});
});
router.get('/:id', function (req, res) {
let query = *db query*;
res.locals.connection.query(query, function (error, results, fields) {
if (error) throw error;
res.render('singleevent', { title: 'Event', data: results });
});
});
Head of localhost***/events page and of next page localhost***/events/singleevent
<head>
<meta charset="UTF-8">
<title>
<%= title %>|Minsk Events</title>
<link rel="stylesheet" href="css/style.css">
</head>
There are my dirs
You asked for css file related to the html file.
So if html file is placed under events, then css file should be at:
/events/css/style.css
etc.
I recently start learning node.js, and I got problem. I use express to acces my public file, everything work fine except css files. I did some research on the topic, and use everthing i found, but it dose not work.
My folder structure
app.js
pub
index.html
style.css
This is my html:
<!DOCTYPE html>
<html >
<head>
<title> Curriculum Vitae </title>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css"/>
</head>
<body>
...
</body>
</html>
And my app.js file:
var http = require('http');
var url = require('url');
var fs = require('fs');
var express = require('express')
var app = express();
var path = require('path');
app.use(express.static(path.join('pub', 'public')));
http.createServer(function (req, res) {
var q = url.parse(req.url, true);
var filename = "." + q.pathname;
fs.readFile(filename, function(err, data) {
if (err) {
res.writeHead(404, {'Content-Type': 'text/html'});
return res.end("404 Not Found");
}
res.writeHead(200, {'Content-Type': 'text/html'});
res.write(data);
return res.end();
});
}).listen(8080);
I think your problem is on this line :
app.use(express.static(path.join('pub', 'public')));
You are setting "/pub/public" as public folder, and you just need to set "/pub"
Can you try with something like this ?
app.use(express.static(__dirname + '/pub'));
Hope it helps.