Why I can't load ejs file? - javascript

Error: Failed to lookup view "index.ejs" in views directory

You don't need to tell it the extension since the view engine is already set up as EJS. Try changing it to res.render('index'). Also, your index.ejs file name has 2 periods.

Is it ok to set the ejs as a view engine even you don't require the ejs?

Related

Browser thinks that the HTML file is a js file

I am writing a website using NodeJS and Express. After specifying a link with 2 route parameters:
app.get('/game/:port/:player/', function(req, res) {
res.sendFile(path.join(__dirname, '/game/game.html'));
})
-the result is a blank white page.
Looking at DevTools, I saw the error Uncaught SyntaxError: Unexpected token '<' game.js:1. It looks like the browser is interpreting the html file as a JavaScript file! I think this is because the browser tries to fetch the js and css files from /game/(portnumber)/(playernumber) instead of from /game. And the css shows up as the actual HTML file:
However, another route that I have with only 1 route parameter works just fine! I am still relatively new to Express so I don't really understand how fetching directories works.
Is there any way to fix this directory error without manually specifying every single path in which there are HTML files?
This doesn't really have anything to do with Express. It is basic URL resolution.
The browser will request /game/3561/2 and get an HTML document back
That document will tell it to load ./game.js which it will resolve to
/game/3561/game.js (since a URL starting with a . means "resolve the path from current directory").
That isn't the URL of your JS file, so you get an HTML document instead — where :player is game.js.
You need to write the actual URL to your JS file in the src attribute.
You can use the express.static middleware to specify a public directory your clients have access to:
https://expressjs.com/en/starter/static-files.html
app.use('/static', express.static('public'))
http://localhost:3000/static/images/kitten.jpg
http://localhost:3000/static/css/style.css
http://localhost:3000/static/js/app.js
http://localhost:3000/static/images/bg.png
http://localhost:3000/static/hello.html

How do relative paths to ejs templates work?

I am trying to render some ejs. I'm not using any frameworks. So right now I have an ejs navigation bar template and a template for a random other site (in this example it is just a form).
My directory:
root
rendered (cache for already rendered sites)
sites (ejs templates for sites)
form.ejs
test.ejs (template I am trying to insert into form.ejs)
templates (ejs templates for reusable stuff like the nav-bar)
bar.ejs
server.js (logic for the server: including rendering of ejs)
So now comes the actual question: How do I reference an other ejs template in an ejs template? The docs say:
%- include('user/show') %>
Includes ./user/show.ejs into the template (As I understood it relative to the current ejs file if no absolute path is given)
<% include user/show %>
is not supported after v3.0, but would have done (almost) the same.
So now I thought I could just do
<%- include('test') %>
in my form.ejs, but it throws an error:
Could not find the include file "test.ejs"
So I wondered what was going on and included the absolute Path to the file and voila it works.
I was curious so i included
<%- process.cwd(); %>
into form.ejs and that return the root directory probably because it is being executed from server.js.
So now the question is: How do I get relative paths? Do I have to create a variable at runtime with the root directory and add that to my include paths like this? (even this wouldn't be relative)
const root = process.cwd(); //inside server.js
<%- include(root+'/sites/test.ejs') %>
This seems inelegant. What am I missing? Thanks for your help.
Ok I'm guilty of RTFM: It didn't work before, because i had to set the views option in my ejs.render(str, data, options). With
ejs.render(contents.toString(),null,{views:["./sites"]}); //in server.js
<%- include('test') %> // in form.ejs ('test.ejs' works as well)
It now renders, but still, the path is relative to the one set in views.
Ok that's a workaround and after digging a bit more i found this line from the docs literally a line after what i originally posted:
You must specify the filename option for the template with the
include call unless you are using renderFile().
renderFile() is asynchronous, so that wouldn't work for me. So finally the solution is to modify my original ejs.render function:
html = ejs.render(contents.toString(),null,{filename: ejspath}); //ejspath being the path to the ejs file to render
//contents is the contents of the ejs file
This Method works with paths like ../templates.bar inside of form.ejs

Can't get a script file in Jade | Error 404

I'm new to Jade and I'm really strugling with it, I created a simple drag and drop table system, but for some reason I can't use my script file in jade. I have a css and a JS file and I linked both to the jade file, for some reason only the css is connected correctly...
script(src='routes/dragdrop.js' type='text/javascript')
This is the reference to the "dragdrop.js" file, I put it at the end of the body tag. The console log gives me the following:
GET /routes/dragdrop.js 404 20.949 ms - 507
What's possibly wrong here?
If you have your file index.jade located in /sample/views/index.jade and dragdrop.js in /sample/routes/dragdrop.js then if you want to call dragdrop.js from index.jade you should call it in this way script(src='../routes/dragdrop.js' type='text/javascript').
If you'd need to go back two folders you should use ../.. three ../../... and so on.

Load json file into Asset pipeline

So, I'm trying to use Cocos2d-JS to create a simple game embedded into one of my rails view.
The thing is that cocos requires a farly simple project.json file with some config data in it to run correctly, here's the internal code:
if(!txt){
txt = cc.loader._loadTxtSync("project.json");
}
data = JSON.parse(txt);
Nonetheless even though I have this JSON file besides the cocos2d-JS .js file, I get always the same error running the rails server on development which is:
GET http://127.0.0.1:3000/project.json 404 (Not Found)
What have I tried so far and haven't worked:
Change the path on the js file to use a relative one, doesn't work.
Putting the JSON file in an aws bucket and try loading it from there, I get a non-authorized access error.
Renaming the cocos2d.js file to cocos2d.js.erb and lad the json with <%= asset_path 'project.json' %>, this breaks cocos2d itself...
How to bypass in case I can't get an answer:
I would try fixing the aws non authorized access issue, I'm a bit seasoned in Ruby and Rails, but don't fully understand the asset pipeline in order to find an alternative...
So my question is: Is this something related to the asset pipeline? How can I load this .json file into my js?
Thanks a lot!
Fixed!
Just modified the CORS policy on aws to allow access from my web app and everything's done

.net MVC4 path file .js in the nested web pages

I have a problem with mvc4 application.
I have created a masterpage with "bundleconfig" for css and js file.
so far so good ... everything works, such as "localhost1234:/Admin/Index" I see everything correctly.
The problem is when I go to the page "localhost1234:/Admin/Edit/2" (2 is user id por update) here does not find references in the file main.js
The file main.js is this:
`
head.js("../assets/js/skin-select/jquery.cookie.js");
head.js("../assets/js/skin-select/skin-select.js");
head.js("../assets/js/clock/date.js");
`
In the error console of the browser says that not found the reference:
404 Not Found - localhost:1234/Admin/assets/js/jquery.cookie.js"
jquery.cookie.js
404 Not Found - localhost:1234/Admin/assets/js/bootstrap.js"
Why he put the name of the view (Admin) front the path in the main.js file ???
Can you help me?
Use Url.Content helper to generate the right path from the relative path like this:
head.js('#Url.Content("~/assets/js/skin-select/jquery.cookie.js")');
Currently it is trying to find in the Admin folder assets--> js-->jquery.cookie.js.
After using Url.Content() it will first get the RootDirectory and the address will be like : http://localhost/assests/js/skin-select/jquery.cookie.js

Categories

Resources