I have a node/express app with:
.set('views', __dirname + '/dist')
dist has a subdirectory guestApp.
in dist/guestApp I have an html page guest.html and a JavaScript file: vendor.js.
The html page has a script tag with: src='vendor.js'
I render the page with: response.render('guestApp/guest.html', {activeProfile: 'Me', title: 'World'});
The page is rendered, but the JavaScript is not found. I have tried all sorts of combinations but I can't seem to get it right. What is the correct relative path to that script please?
If your html file is not dynamic you don't need to set views. You have to setup the static middleware.
app.use(express.static(__dirname+'/dist'));
And the javascript file should also be referenced relative to the dist directory -
src='guestApp/vendor.js'
Related
where I link index.js
<script src="/assets/js/index.js"></script>
Folder Directory is such
assests
-css
--style.css
-js
--index.js
enter image description here
Error Im getting
index.html:25 GET file:///assets/js/index.js net::ERR_FILE_NOT_FOUND
I guess you are using an express app(by the tag in question). The static resources such as your javascript, css, images, etc. should be inside the public folder which gets served on running the application. Could you try moving the assets folder inside the public folder and then have a script tag pointing to that resource.
Maybe it helps to remove the first slash:
<script src="assets/js/index.js"></script>
Or startend with a dot
<script src="./assets/js/index.js"></script>
I have a code line:
app.use(express.static('public'));
for static files in public folder, but build a route:
app.get('/search/jobs', jobs.index);
The Expressjs is putting /search before url.
And I'm a getting error in console browser:
GET: http://localhost:5000/search/css/materialize.css
Any idea?
You need to use absolute paths in your html/css (e.g. /css/materialize.css). With relative paths (e.g. css/materialize.css) the browser will look up the path relative to the current path/"directory" (/search in this case).
This is my folder structure:
root
admin
index.html
bootstrap.css
...
...
app.js
when I'm running
node app.js
using Express 4, routing works correctly but I don't know how to view this file:
http://localhost/admin/index.html
it seems like it searching for this route...
so I tried to render the file to the client and it works but then all its css and script doesn't.
What am I doing wrong?
Please look at:
http://expressjs.com/en/starter/static-files.html
And use:
app.use(express.static('root'));
Express is a framework and provide the template structure, so it's good to put the files of frontend in the folder views, not in static. Static is more used for import libs, js, css.
In you case, put the index.html in the views folder, and the route can be somethink this:
res.sendFile("index.html");
Docs
I'm trying to serve a static folder, when using dynamic routes, by using res.sendFile() in ExpressJS:
res.sendFile('index.html', { root : path.join(__dirname, 'myStaticContentFolder') });
The file .../myStaticContentFolder/index.html, indeed gets served - hence: the root field correctly adjusts the path to it.
However, all the files within that folder, with paths relative to index.html are not found.
They are searched relative to the URL root instead of the root field path.
Note that the folder is properly served if I use:
app.use('/foo/', express.static(__dirname + '/myStaticContentFolder'));
I just did a fresh installation of sails (v0.11.0) in my server and after checking this up and working on controllers I found that css, js and templates files included into the assets folders are not being injected to the layout, if there any reason for this to happen? I mean, it is a clean fresh sails installation....
In my quest to get SailsJS to auto-inject stylesheets into the layout file under views/layouts/layout.handlebars in my case, I've found out a couple things...
When you first create your sails app using:
sails new APPNAME --template=handlebars --verbose
note: link below explains above syntax...
Using handlebars templates in Sails.js
Go to config > views.js
It will say:
layout: 'layouts/layout.handlebars'
change to:
layout: 'layouts/layout',
Go to tasks > config > sails-linker.js
Because I'm in development mode right now I will Ctrl + f searching for:
"devStyles"
devStyles: {
options: {
startTag: '<!--STYLES-->',
endTag: '<!--STYLES END-->',
fileTmpl: '<link rel="stylesheet" href="%s">',
appRoot: '.tmp/public'
},
files: {
'.tmp/public/**/*.html': require('../pipeline').cssFilesToInject,
'views/**/*.html': require('../pipeline').cssFilesToInject,
'views/**/*.ejs': require('../pipeline').cssFilesToInject
//ADD HANDLEBARS INJECTION HERE
}
},
Notice it has .html, & .ejs types being injected but not .handlebars
add this line:
'views/**/*.handlebars': require('../pipeline').cssFilesToInject
where I commented:
//ADD HANDLEBARS INJECTION HERE
At this point you should be able to drop a .css file into assets > styles and have it auto-copied to .tmp/public/styles
run:
sails lift
in your command prompt and give it about 20 seconds or so to have the stylesheet manifest its style on whatever page you have in your routes.js
'/': {
view: 'index'
}
As you can see, I made a new .handlebars file index.handlebars and set it as my root level page. You may have to refresh the page a time or two to get the newly auto-injected CSS to show.
P.S. It appears there is no more need to append --linker when first creating a SailsJS project. Also fyi, I'm using sails version 0.11.0
Also if you run sails lift --verbose the line below is how you know the .handlebars injection is working
verbose: Grunt :: File "views/layouts/layout.handlebars" updated.
Hope this helps!
Also, when adding Handlebars Helpers they should go in a file helper.js which should be located in config > helper.js
At the top of the helper.js file I found I had to require handlebars as follows
handlebars = require('sails/node_modules/express-handlebars/node_modules/handlebars');