How to include external .js file to ejs Node template page

I cannot find a way to include external .js file to Node ejs template. I want to put logic and data into object in external .js file, include that file to index.ejs template and pull data from it.

I tried by inserting standard way
<script src="sample.js"></script>, and it doesn't work

Then I tried ejs specific keyword <% include partials/sample.js %> and this works only for adding partials (ejs code snippets).

I inserted .js file into static directory which is defined in executable server.js, no results again.

But interestingly, including css file into ejs template classic way works fine, for example

<link href="/assets/styles.css" rel="stylesheet" type="text/css" />

Workaround would be to include external ejs file where I would put logic and data inside <% %> tags, but this is obviously a patch and not a viable solution, because ejs is not a js file. Besides, it doesn't work.

I cannot find any solution on Internet. Any hint?

Thanks

edited Oct 29 '17 at 15:07

asked Oct 29 '17 at 14:47

Dan

226

add a comment |

I cannot find a way to include external .js file to Node ejs template. I want to put logic and data into object in external .js file, include that file to index.ejs template and pull data from it.

I tried by inserting standard way
<script src="sample.js"></script>, and it doesn't work

Then I tried ejs specific keyword <% include partials/sample.js %> and this works only for adding partials (ejs code snippets).

I inserted .js file into static directory which is defined in executable server.js, no results again.

But interestingly, including css file into ejs template classic way works fine, for example

<link href="/assets/styles.css" rel="stylesheet" type="text/css" />

I cannot find any solution on Internet. Any hint?

Thanks

edited Oct 29 '17 at 15:07

asked Oct 29 '17 at 14:47

Dan

226

add a comment |

I cannot find a way to include external .js file to Node ejs template. I want to put logic and data into object in external .js file, include that file to index.ejs template and pull data from it.

I tried by inserting standard way
<script src="sample.js"></script>, and it doesn't work

Then I tried ejs specific keyword <% include partials/sample.js %> and this works only for adding partials (ejs code snippets).

I inserted .js file into static directory which is defined in executable server.js, no results again.

But interestingly, including css file into ejs template classic way works fine, for example

<link href="/assets/styles.css" rel="stylesheet" type="text/css" />

I cannot find any solution on Internet. Any hint?

Thanks

edited Oct 29 '17 at 15:07

asked Oct 29 '17 at 14:47

Dan

226

I cannot find a way to include external .js file to Node ejs template. I want to put logic and data into object in external .js file, include that file to index.ejs template and pull data from it.

I tried by inserting standard way
<script src="sample.js"></script>, and it doesn't work

Then I tried ejs specific keyword <% include partials/sample.js %> and this works only for adding partials (ejs code snippets).

I inserted .js file into static directory which is defined in executable server.js, no results again.

But interestingly, including css file into ejs template classic way works fine, for example

<link href="/assets/styles.css" rel="stylesheet" type="text/css" />

I cannot find any solution on Internet. Any hint?

Thanks

node.js ejs

edited Oct 29 '17 at 15:07

asked Oct 29 '17 at 14:47

Dan

226

edited Oct 29 '17 at 15:07

asked Oct 29 '17 at 14:47

Dan

226

edited Oct 29 '17 at 15:07

asked Oct 29 '17 at 14:47

Dan

226

asked Oct 29 '17 at 14:47

Dan

226

asked Oct 29 '17 at 14:47

Dan

226

add a comment |

1 Answer
1

active

oldest

votes

You can't.

Note: You can only pass data from .ejs file to .js file but not the other way. It won't work because .ejs is rendered on the server side while .js runs on the client side.
I am assuming you are using EJS on server side

1) You can pass an ejs variable value to a Javascript variable

    <% var test = 101; %> // variable created by ejs

    <script>

       var getTest = <%= test  %>;  //var test is now assigned to getTest which will only work on browsers

       console.log(getTest);  // successfully prints 101 on browser

    </script>

2) You can't pass a js variable value to a ejs variable

Yes, you can't: if it is on server.

Why:

The EJS template will be rendered on the server before the js is started execution(it will start on browser), so there is no way going back to server and ask for some previous changes on the page which is already sent to the browser.

edited Nov 22 '18 at 23:40

answered Oct 30 '17 at 7:23

Bharathvaj Ganesan

1,6321720

Thanks but somehow it doesn't work for me. It says 'Reference error, data is not defined' ... where in my .js file i have var data = {name: 'Peter'};

– Dan
Nov 1 '17 at 19:06

I got it. You cannot have two way transaction between your .js file and .ejs file. Because ejs file will be rendered on the server side and js file will be rendered on the client side. You can pass data from ejs to js but not from js back to ejs (which you are trying to do). Please mark the answer as verified so it will be useful for others.

– Bharathvaj Ganesan
Nov 2 '17 at 3:31

Thanks @Bharathvaj for your kind effort. So how can we then import data to a template like EJS. Standard html way we would enclose a link to .js file from where we would import data, make database query etc. Or we would do it inside <script> tags. How then to bring data to .ejs template so that we can display it there. If we try to build data logic inside routes file, for example inside server.js .. app.get(/someroute), there would be too much code inside each route. Isn't there a more elegant way for importing data to ejs, vue and other templates.

– Dan
Nov 2 '17 at 20:26

Server side rendering is mainly used to secure data... which means in client side everything it open to the world so instead of sending the actual data developers used to send the html templates with data in place

– Bharathvaj Ganesan
Nov 3 '17 at 0:49

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f47001537%2fhow-to-include-external-js-file-to-ejs-node-template-page%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

You can't.

1) You can pass an ejs variable value to a Javascript variable

    <% var test = 101; %> // variable created by ejs

    <script>

       var getTest = <%= test  %>;  //var test is now assigned to getTest which will only work on browsers

       console.log(getTest);  // successfully prints 101 on browser

    </script>

2) You can't pass a js variable value to a ejs variable

Yes, you can't: if it is on server.

Why:

edited Nov 22 '18 at 23:40

answered Oct 30 '17 at 7:23

Bharathvaj Ganesan

1,6321720

Thanks but somehow it doesn't work for me. It says 'Reference error, data is not defined' ... where in my .js file i have var data = {name: 'Peter'};

– Dan
Nov 1 '17 at 19:06

I got it. You cannot have two way transaction between your .js file and .ejs file. Because ejs file will be rendered on the server side and js file will be rendered on the client side. You can pass data from ejs to js but not from js back to ejs (which you are trying to do). Please mark the answer as verified so it will be useful for others.

– Bharathvaj Ganesan
Nov 2 '17 at 3:31

Thanks @Bharathvaj for your kind effort. So how can we then import data to a template like EJS. Standard html way we would enclose a link to .js file from where we would import data, make database query etc. Or we would do it inside <script> tags. How then to bring data to .ejs template so that we can display it there. If we try to build data logic inside routes file, for example inside server.js .. app.get(/someroute), there would be too much code inside each route. Isn't there a more elegant way for importing data to ejs, vue and other templates.

– Dan
Nov 2 '17 at 20:26

Server side rendering is mainly used to secure data... which means in client side everything it open to the world so instead of sending the actual data developers used to send the html templates with data in place

– Bharathvaj Ganesan
Nov 3 '17 at 0:49

add a comment |

You can't.

1) You can pass an ejs variable value to a Javascript variable

    <% var test = 101; %> // variable created by ejs

    <script>

       var getTest = <%= test  %>;  //var test is now assigned to getTest which will only work on browsers

       console.log(getTest);  // successfully prints 101 on browser

    </script>

2) You can't pass a js variable value to a ejs variable

Yes, you can't: if it is on server.

Why:

edited Nov 22 '18 at 23:40

answered Oct 30 '17 at 7:23

Bharathvaj Ganesan

1,6321720

Thanks but somehow it doesn't work for me. It says 'Reference error, data is not defined' ... where in my .js file i have var data = {name: 'Peter'};

– Dan
Nov 1 '17 at 19:06

I got it. You cannot have two way transaction between your .js file and .ejs file. Because ejs file will be rendered on the server side and js file will be rendered on the client side. You can pass data from ejs to js but not from js back to ejs (which you are trying to do). Please mark the answer as verified so it will be useful for others.

– Bharathvaj Ganesan
Nov 2 '17 at 3:31

Thanks @Bharathvaj for your kind effort. So how can we then import data to a template like EJS. Standard html way we would enclose a link to .js file from where we would import data, make database query etc. Or we would do it inside <script> tags. How then to bring data to .ejs template so that we can display it there. If we try to build data logic inside routes file, for example inside server.js .. app.get(/someroute), there would be too much code inside each route. Isn't there a more elegant way for importing data to ejs, vue and other templates.

– Dan
Nov 2 '17 at 20:26

Server side rendering is mainly used to secure data... which means in client side everything it open to the world so instead of sending the actual data developers used to send the html templates with data in place

– Bharathvaj Ganesan
Nov 3 '17 at 0:49

add a comment |

You can't.

1) You can pass an ejs variable value to a Javascript variable

    <% var test = 101; %> // variable created by ejs

    <script>

       var getTest = <%= test  %>;  //var test is now assigned to getTest which will only work on browsers

       console.log(getTest);  // successfully prints 101 on browser

    </script>

2) You can't pass a js variable value to a ejs variable

Yes, you can't: if it is on server.

Why:

edited Nov 22 '18 at 23:40

answered Oct 30 '17 at 7:23

Bharathvaj Ganesan

1,6321720

You can't.

1) You can pass an ejs variable value to a Javascript variable

    <% var test = 101; %> // variable created by ejs

    <script>

       var getTest = <%= test  %>;  //var test is now assigned to getTest which will only work on browsers

       console.log(getTest);  // successfully prints 101 on browser

    </script>

2) You can't pass a js variable value to a ejs variable

Yes, you can't: if it is on server.

Why:

edited Nov 22 '18 at 23:40

answered Oct 30 '17 at 7:23

Bharathvaj Ganesan

1,6321720

edited Nov 22 '18 at 23:40

answered Oct 30 '17 at 7:23

Bharathvaj Ganesan

1,6321720

answered Oct 30 '17 at 7:23

Bharathvaj Ganesan

1,6321720

answered Oct 30 '17 at 7:23

Bharathvaj Ganesan

1,6321720

Thanks but somehow it doesn't work for me. It says 'Reference error, data is not defined' ... where in my .js file i have var data = {name: 'Peter'};

– Dan
Nov 1 '17 at 19:06

I got it. You cannot have two way transaction between your .js file and .ejs file. Because ejs file will be rendered on the server side and js file will be rendered on the client side. You can pass data from ejs to js but not from js back to ejs (which you are trying to do). Please mark the answer as verified so it will be useful for others.

– Bharathvaj Ganesan
Nov 2 '17 at 3:31

Thanks @Bharathvaj for your kind effort. So how can we then import data to a template like EJS. Standard html way we would enclose a link to .js file from where we would import data, make database query etc. Or we would do it inside <script> tags. How then to bring data to .ejs template so that we can display it there. If we try to build data logic inside routes file, for example inside server.js .. app.get(/someroute), there would be too much code inside each route. Isn't there a more elegant way for importing data to ejs, vue and other templates.

– Dan
Nov 2 '17 at 20:26

Server side rendering is mainly used to secure data... which means in client side everything it open to the world so instead of sending the actual data developers used to send the html templates with data in place

– Bharathvaj Ganesan
Nov 3 '17 at 0:49

add a comment |

Thanks but somehow it doesn't work for me. It says 'Reference error, data is not defined' ... where in my .js file i have var data = {name: 'Peter'};

– Dan
Nov 1 '17 at 19:06

I got it. You cannot have two way transaction between your .js file and .ejs file. Because ejs file will be rendered on the server side and js file will be rendered on the client side. You can pass data from ejs to js but not from js back to ejs (which you are trying to do). Please mark the answer as verified so it will be useful for others.

– Bharathvaj Ganesan
Nov 2 '17 at 3:31

Thanks @Bharathvaj for your kind effort. So how can we then import data to a template like EJS. Standard html way we would enclose a link to .js file from where we would import data, make database query etc. Or we would do it inside <script> tags. How then to bring data to .ejs template so that we can display it there. If we try to build data logic inside routes file, for example inside server.js .. app.get(/someroute), there would be too much code inside each route. Isn't there a more elegant way for importing data to ejs, vue and other templates.

– Dan
Nov 2 '17 at 20:26

Server side rendering is mainly used to secure data... which means in client side everything it open to the world so instead of sending the actual data developers used to send the html templates with data in place

– Bharathvaj Ganesan
Nov 3 '17 at 0:49

Thanks but somehow it doesn't work for me. It says 'Reference error, data is not defined' ... where in my .js file i have var data = {name: 'Peter'};

– Dan
Nov 1 '17 at 19:06

I got it. You cannot have two way transaction between your .js file and .ejs file. Because ejs file will be rendered on the server side and js file will be rendered on the client side. You can pass data from ejs to js but not from js back to ejs (which you are trying to do). Please mark the answer as verified so it will be useful for others.

– Bharathvaj Ganesan
Nov 2 '17 at 3:31

Thanks @Bharathvaj for your kind effort. So how can we then import data to a template like EJS. Standard html way we would enclose a link to .js file from where we would import data, make database query etc. Or we would do it inside <script> tags. How then to bring data to .ejs template so that we can display it there. If we try to build data logic inside routes file, for example inside server.js .. app.get(/someroute), there would be too much code inside each route. Isn't there a more elegant way for importing data to ejs, vue and other templates.

– Dan
Nov 2 '17 at 20:26

Server side rendering is mainly used to secure data... which means in client side everything it open to the world so instead of sending the actual data developers used to send the html templates with data in place

– Bharathvaj Ganesan
Nov 3 '17 at 0:49

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Tukukkk