I have views folder in my main directory though i am unable to render my html pages whenever i try to run the app. I have views folder in my main directory though i am unable to render my html pages whenever i try to run the app.I have views folder in my main directory though i am unable to render my html pages whenever i try to run the app.I have views folder in my main directory though i am unable to render my html pages whenever i try to run the app.
I tried this
const express = require('express');
const app = express()
app.set('view engine', 'ejs')
app.use(express.static('views'));
app.listen(3000)
app.get('/',(req,res)=>{
res.render('index')
})
app.get('/contact',(req,res)=>{
res.render('contact')
})
app.get('/about',(req,res)=>{
res.render('about')
})
app.use((req,res)=>{
res.status(404).send('/404')
})
but got this error
Error: Failed to lookup view "index" in views directory "/Users/abishek/Desktop/Node/views"
at Function.render (/Users/abishek/Desktop/Node/node_modules/express/lib/application.js:597:17)
at ServerResponse.render(/Users/abishek/Desktop/Node/node_modules/express/lib/response.js:1039:7)
at /Users/abishek/Desktop/Node/app.js:16:9
at Layer.handle [as handle_request] (/Users/abishek/Desktop/Node/node_modules/express/lib/router/layer.js:95:5)
at next (/Users/abishek/Desktop/Node/node_modules/express/lib/router/route.js:144:13)
at Route.dispatch (/Users/abishek/Desktop/Node/node_modules/express/lib/router/route.js:114:3)
at Layer.handle [as handle_request] (/Users/abishek/Desktop/Node/node_modules/express/lib/router/layer.js:95:5)
at /Users/abishek/Desktop/Node/node_modules/express/lib/router/index.js:284:15
at Function.process_params (/Users/abishek/Desktop/Node/node_modules/express/lib/router/index.js:346:12)
at next (/Users/abishek/Desktop/Node/node_modules/express/lib/router/index.js:280:10)
my directory
Node
views
index.html
about.html
contact.html
404.html
app.js
Related
I'm working on a express + vue project with the following structure (see below), and I have trouble accessing subroutes of the vue app directly in production (hosted on Heroku). For instance, I can go to www.example.com and can access subroutes from the index page, but typing www.example.com/subpage directly gives the following errors.
More context: I currently manually copy the built files from frontend/dist to public. To get it to work, I am using publicPath ./ in vue.config.js. In development if I change the publicPath to /, I don't get the above problem.
Uncaught SyntaxError: Unexpected token '<' (at chunk-vendors.25f4b4fa.js:1:1)
app.c661c8f0.js:1
Uncaught SyntaxError: Unexpected token '<' (at app.c661c8f0.js:1:1)
manifest.json:1
Manifest: Line: 1, column: 1, Syntax error.
Folder Structure
mainfolder
--> frontend (vue development files)
---> dist
--> src (express backend)
--> public (where I copy the built vue files)
---> js
---> css
---> img
---> index.html
express app.js file
app.use(express.static('public'));
app.use('*', function(req, res, next) {
res.sendFile(path.resolve(__dirname, '../public/index.html'));
});
app.use(require('connect-history-api-fallback')());
You are not serving static files properly. Let Node.Js ecosystems take care of returning your UI file.
// app.use(express.static('public'));
// app.use('*', function(req, res, next) {
// res.sendFile(path.resolve(__dirname, '../public/index.html'));
// });
app.use('/', express.static(path.join(__dirname, '../public')));
app.use(require('connect-history-api-fallback')());
If the index.htm does not load its JavaScript dependencies, you need to rebuild the UI taking care of subdomains.
To serve your static files in a better way, please look at this link.
I developed a small application with electron and expressjs. In development mode, the app works fine. But after packaging the app for the production mode I got the error that the home view is not found. Here are some details:
The main route in app.js
router.get('/', async (req,res) => {
res.render('home');
});
My file structure is:
In order to solve the problem I tried the following:
router.get('/', async (req,res) => {
var path = require('path');
res.render(path.join(__dirname+'/views/home.ejs'));
});
Now the view is loaded, but all the css and js files within home.ejs are not loaded
All css and js files are located under the public folder and within home.ejs, i refer to these files as follows:
<script src="/js/vendor/jquery-3.6.0.min.js"></script>
<script src="/js/vendor/bootstrap.bundle.min.js"></script>
<script src="/js/home.js"></script>
I tried both electron packagers, electron-forge and electron-builder and had the same error. Can you please help??
You need an express.static(...) statement somewhere in your app to serve the css and js files. How does that look? The following should work:
app.use("/js", express.static(__dirname + "/public/js"));
app.use("/css", express.static(__dirname + "/public/css"));
I get a problem to access local assets in React Native using rn-fetch-blob, this is my directory structure :
I want to access file female.png from App.js, this is my script :
RNFetchBlob.fs.readFile('./female.png', 'base64')
.then((data) => {
console.log(data);
})
and I always get this error :
Possible Unhandled Promise Rejection (id: 14):
Error: No such file './female.png'; ./female.png (No such file or directory)
Error: No such file './female.png'; ./female.png (No such file or directory)
at createErrorFromErrorData (blob:http://localhost:8081/61bf342c-3b22-4e66-9eea-bf93a115f88e:16416:17)
at blob:http://localhost:8081/61bf342c-3b22-4e66-9eea-bf93a115f88e:16368:27
at MessageQueue.__invokeCallback (blob:http://localhost:8081/61bf342c-3b22-4e66-9eea-bf93a115f88e:17245:18)
at blob:http://localhost:8081/61bf342c-3b22-4e66-9eea-bf93a115f88e:16976:18
at MessageQueue.__guard (blob:http://localhost:8081/61bf342c-3b22-4e66-9eea-bf93a115f88e:17149:13)
at MessageQueue.invokeCallbackAndReturnFlushedQueue (blob:http://localhost:8081/61bf342c-3b22-4e66-9eea-bf93a115f88e:16975:14)
at http://localhost:8081/debugger-ui/debuggerWorker.js:80:58
Please anyone help me to access local assets using rn-fetch-blob.
Thanks.
In my routes/index.json, I have the following.
const Signin = () => import('#/components/Authenticate/Signin')
{ path: '/signin', component: Signin, beforeEnter: beforeRouteLoggedIn },
The bad thing is, when I go to the main page at http://localhost:8080, I see .js and .css file getting loaded. Now I click signIn page, and what I expect to see is in network tab, new .js file should be generated, right? But after clicking signin, even though it should be lazy loaded, no new js file gets loaded in network tab.
I have a pug template inside my views folder under views/administration/assets/fixed-assets.pug
My default.pug which the fixed-assets.pug extends from is in my root views folder.
When I try to render the fixed-assets.pug view it looks for the default.pug inside the views/administration/assets/ directory rather than the views directory itself
Everything works fine if I take the fixed-assets.pug and place it in the views directory instead of the views/administration/assets/ directory and update the route accordingly.
How can I tell express to look for the default.pug in the views directory and the fixed-assets.pug in the views/administration/assets/ directory?
Here is my route
var express = require('express');
var secured = require('../lib/middleware/secured');
var router = express.Router();
/* GET fixed-assets page. */
router.get('/administration/fixed-assets', secured(), function(req, res, next) {
res.render('administration/assets/fixed-assets', {
title: 'Fixed Assets'
});
});
module.exports = router;
Here is my views/administration/assets/fixed-assets.pug
extends default.pug
block scripts
if !starter
script(src='/js/main.js')
block view
.animated.fadeIn
h1 Fixed Assets
and this is the error I'm getting
ENOENT: no such file or directory, open
'/usr/src/app/views/administration/assets/default.pug' at
/usr/src/app/views/administration/assets/fixed-assets.pug line 1
Thanks for your help!
In the docs for Includes it says:
If the path is absolute (e.g., include /root.pug), it is resolved by
prepending options.basedir. Otherwise, paths are resolved relative to
the current file being compiled.
The explanation for that is in the API Reference:
basedir: string The root directory of all absolute inclusion.
You can implement basedir globally like this in your main app.js/server.js file:
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');
app.locals.basedir = path.join(__dirname, 'views');