{"id":2371,"date":"2021-04-27T06:16:48","date_gmt":"2021-04-27T00:46:48","guid":{"rendered":"http:\/\/uitutorials.in\/wp\/?p=2371"},"modified":"2021-04-29T16:55:27","modified_gmt":"2021-04-29T11:25:27","slug":"what-is-relative-path-vs-absolute-path","status":"publish","type":"post","link":"https:\/\/uitutorials.in\/wp\/what-is-relative-path-vs-absolute-path\/","title":{"rendered":"What Is Relative Path vs. Absolute Path"},"content":{"rendered":"<p><a href=\"https:\/\/www.youtube.com\/watch?v=Onq0ue5o_uo\" rel=\"noopener\" target=\"_blank\">What Is Relative Path vs. Absolute Path<\/a><br \/>\n<a href=\"https:\/\/www.youtube.com\/watch?v=3fzEdtw_Mt4\" rel=\"noopener\" target=\"_blank\">Create React App Tip: avoid relative import hell (..\/..\/..\/) in JS and TS<\/a><br \/>\n<a href=\"https:\/\/www.youtube.com\/watch?v=FY_sisNvbEQ\" rel=\"noopener\" target=\"_blank\">NodeJS Express &#8211; File path relative to root<\/a><br \/>\n<a href=\"https:\/\/www.youtube.com\/watch?v=xHiCRpfZIO8\" rel=\"noopener\" target=\"_blank\">How to use absolute path component imports in create react app | Avoiding relative path imports<\/a><\/p>\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=BapA-vG9HZI\" rel=\"noopener\" target=\"_blank\">Node JS Path Module | Path Module | path.resolve | path.join | path.normalize | Node JS Tutorial<\/a><\/p>\n<p><strong>EJS Path <\/strong><br \/>\n<strong>__dirname <\/strong>tells you the absolute path of the directory containing the currently executing file.<\/p>\n<p>By default, EJS is going to look for the file relative to <strong>process.cwd()<\/strong>, the directory where the Node.js process was started. <strong>__dirname<\/strong> is the directory that your JS file ( contact.js ) is in. If you don&#8217;t want to join to <strong>__dirname<\/strong>, you need to make your paths relative to where the Node.js process is started. Which means,<\/p>\n<p>If folder structure is,<\/p>\n<pre>\r\nRoot\r\n   server.js <--- EJS look for relative paths from here\r\n   views\r\n      -mail.ejs\r\n<\/pre>\n<p><a href=\"https:\/\/stackoverflow.com\/questions\/59755880\/nodemailer-ejs-render-template-from-another-folder\" rel=\"noopener\" target=\"_blank\">Nodemailer & ejs - Render template from another folder<\/a><\/p>\n<pre>\r\nconst output = await ejs.renderFile(\"\/views\/mail.ejs\", {\r\n  test: 'Test'\r\n});\r\n<\/pre>\n<p><strong>EJS Path Issue 2 <\/strong><br \/>\nEJS is going to look for the file relative to process.cwd(), the directory where the Node.js process was started. __dirname is the directory that your JS file is in. If you don't want to join to __dirname, you need to make your paths relative to where the Node.js process is started.<\/p>\n<pre>\r\nejs.renderFile(path.join(__dirname, 'templates\/registration_confirmation.ejs'), registrationData, (err, html) => {})\r\n<\/pre>\n<p><a href=\"https:\/\/github.com\/mde\/ejs\/issues\/281\" rel=\"noopener\" target=\"_blank\">ejs.renderFile can't find file if using relative pathing<\/a><\/p>\n<p>Difference between these 2 methods (render,renderFile)<br \/>\n<strong>render()<\/strong> takes a string as a template and is a <em>synchronous <\/em>method.<\/p>\n<pre>ejs.render(str, data, options);\r\n    \/\/ => Rendered HTML string\r\n<\/pre>\n<p><strong>renderFile()<\/strong> takes a file path as input, is <em>asynchronous <\/em>and takes a function call back.<\/p>\n<pre>\r\nejs.renderFile(filename, data, options, function (err, str) {  \r\n        \/\/ str => Rendered HTML string\r\n    });\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>What Is Relative Path vs. Absolute Path Create React App Tip: avoid relative import hell (..\/..\/..\/) in JS and TS NodeJS Express &#8211; File path relative to root How to use absolute path component imports in create react app | Avoiding relative path imports Node JS Path Module | Path<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[83],"tags":[88],"class_list":["post-2371","post","type-post","status-publish","format-standard","hentry","category-others","tag-others","ct-col-2"],"_links":{"self":[{"href":"https:\/\/uitutorials.in\/wp\/wp-json\/wp\/v2\/posts\/2371","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/uitutorials.in\/wp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/uitutorials.in\/wp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/uitutorials.in\/wp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/uitutorials.in\/wp\/wp-json\/wp\/v2\/comments?post=2371"}],"version-history":[{"count":7,"href":"https:\/\/uitutorials.in\/wp\/wp-json\/wp\/v2\/posts\/2371\/revisions"}],"predecessor-version":[{"id":2386,"href":"https:\/\/uitutorials.in\/wp\/wp-json\/wp\/v2\/posts\/2371\/revisions\/2386"}],"wp:attachment":[{"href":"https:\/\/uitutorials.in\/wp\/wp-json\/wp\/v2\/media?parent=2371"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/uitutorials.in\/wp\/wp-json\/wp\/v2\/categories?post=2371"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/uitutorials.in\/wp\/wp-json\/wp\/v2\/tags?post=2371"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}