"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { a: "a", code: "code", figure: "figure", h2: "h2", h3: "h3", li: "li", ol: "ol", p: "p", pre: "pre", span: "span", strong: "strong", ul: "ul", ..._provideComponents(), ...props.components }; return _jsxs(_Fragment, { children: [_jsxs(_components.p, { children: ["Hi guys! Today's article, I'm going to explain to you why should you implement the use of ", _jsx(_components.strong, { children: "Templating" }), " than just use the bare bone of HTML. How can it basically change your code while very much able to help you a lot in some ways that you won't understand until you actually implement and use it yourself."] }), "\n", _jsxs(_components.p, { children: ["At first when learning how to code JavaScript programming I thought I could code it as ", _jsx(_components.strong, { children: "Vanilla" }), " JavaScript without needing to implement other front-end framework. At least until I have very broad grasp of how Vanilla JavaScript works. So I did continue till now making and building my own portfolio website just using ", _jsx(_components.strong, { children: "Vanilla JavaScript" }), " together with JavaScript based back-end framework like ", _jsx(_components.a, { href: "https://nodejs.org/en/", children: "Node JS" }), ". I started realizing when I'm in the middle of creating my second version of my portfolio. Specifically when trying to add a blog feature. There's no problem when trying to display all blog post available that I have in my database. But unfortunately, I faced a problem when trying to display a single blog post page."] }), "\n", _jsxs(_components.p, { children: ["But before we begin, let me inform you I did too, provide a video sharing session regarding this issue. If you find it much easier to follow me through video form. Then I would suggest you to go to this ", _jsx(_components.a, { href: "https://youtu.be/046g15-Syk4", children: "link" }), ". But for those who are more comfortable following in written form. You are welcome to continue doing so. So, with that out of the way. Let's start coding!"] }), "\n", _jsx(_components.h2, { id: "coding-start", children: "Coding Start" }), "\n", _jsxs(_components.p, { children: ["Let me explain how it goes through sample code. Let's say we want to display all available blog posts. And then when user click on ", _jsx(_components.strong, { children: "read more" }), ", we want the system to maneuver or basically bring the user to the single blog post page. So in this example I'm going to use just ", _jsx(_components.strong, { children: "Vanilla JavaScript" }), " for the front-end. ", _jsx(_components.a, { href: "https://nodejs.org/en/", children: "Node JS" }), " as the back-end framework and just a simple object of blog posts act as our data storage. Then, later on we going to change the code to implement a template."] }), "\n", _jsx(_components.h3, { id: "a-without-template-usage", children: "A. Without Template Usage" }), "\n", _jsx(_components.p, { children: "So first, let's create the route to display all blogs available in our database. But before that, make sure you install these packages first:-" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Express" }), "\n", _jsx(_components.li, { children: "Cors" }), "\n"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "index.js" }), ":-"] }), "\n"] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#282c34", color: "#abb2bf" }, tabIndex: "0", "data-language": "js", "data-theme": "one-dark-pro", children: _jsxs(_components.code, { "data-language": "js", "data-theme": "one-dark-pro", style: { display: "grid" }, children: [_jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: "/* Dependencies */" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: "// Express Package" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C678DD" }, children: "const" }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: " express" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " =" }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: " require" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'express'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ")" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C678DD" }, children: "const" }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: " app" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " =" }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: " express" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "()" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: "// Cors" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C678DD" }, children: "const" }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: " cors" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " =" }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: " require" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'cors'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ")" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: "// Path" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C678DD" }, children: "const" }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: " path" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " =" }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: " require" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'path'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ")" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: "/* Middlewares */" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: "// cors" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E5C07B" }, children: "app" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "use" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "cors" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "())" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: "// body parser" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E5C07B" }, children: "app" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "use" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: "express" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "json" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "())" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: "// Static folder" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E5C07B" }, children: "app" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "use" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: "express" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "static" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'web'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "))" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: "/* Gimmick Data Storage */" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C678DD" }, children: "let" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: " posts" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " =" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " [" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " {" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E06C75" }, children: " id" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ": " }), _jsx(_components.span, { style: { color: "#D19A66" }, children: "1" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E06C75" }, children: " title" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ": " }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'Post 1'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E06C75" }, children: " description" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ": " }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'Post One Description'" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " }," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " {" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E06C75" }, children: " id" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ": " }), _jsx(_components.span, { style: { color: "#D19A66" }, children: "2" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E06C75" }, children: " title" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ": " }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'Post 2'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E06C75" }, children: " description" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ": " }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'Post Two Description'" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " }," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " {" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E06C75" }, children: " id" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ": " }), _jsx(_components.span, { style: { color: "#D19A66" }, children: "3" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E06C75" }, children: " title" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ": " }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'Post 3'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E06C75" }, children: " description" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ": " }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'Post Three Description'" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " }" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "]" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: "/* Routes */" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: "// 1.0 - page to display All Blog Posts Available" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E5C07B" }, children: "app" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "get" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'/blog'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ", " }), _jsx(_components.span, { style: { color: "#C678DD" }, children: "async" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#E06C75", fontStyle: "italic" }, children: "req" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ", " }), _jsx(_components.span, { style: { color: "#E06C75", fontStyle: "italic" }, children: "res" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ") " }), _jsx(_components.span, { style: { color: "#C678DD" }, children: "=>" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " {" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: " // using just NodeJS won't enable use to render a page and send data together when rendering (in my knowledge)" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: " // so the only way to do it, its just render a static html page for now" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: " // - using 'path resolve' to get the path of where 'blog.html' situated" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C678DD" }, children: " let" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: " parentPath" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " =" }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: " path" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "resolve" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "__dirname" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " +" }), _jsx(_components.span, { style: { color: "#98C379" }, children: " '/blog.html'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ", " }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'../'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ")" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: " // - using 'sendFile' to render a static html page of 'blog.html'" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E5C07B" }, children: " res" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "sendFile" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: "path" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "join" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "parentPath" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " +" }), _jsx(_components.span, { style: { color: "#98C379" }, children: " '/views/blog.html'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "))" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "})" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: "/* Server Connection */" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E5C07B" }, children: "app" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "listen" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#D19A66" }, children: "5000" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ", " }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: "console" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "log" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'Server is up and running at port 5000.'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "))" })] })] }) }) }), "\n", _jsxs(_components.p, { children: ["You might already notice that we don't actually send any blog post data right? That's because with only using just Node JS without implementing or applying any other third party package. Node JS not able to render a page dynamically. The only possible way for us to render a page is by using Node JS ", _jsx(_components.code, { children: "sendFile" }), " which is so limited and unable to send data while rendering a page. With the above code, we are only able to serve the page of where the content will be. So where exactly we are able to get our desired blog post data? Let me show you."] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "blog.html" }), " (Page to display All Blog Post Available):-"] }), "\n"] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#282c34", color: "#abb2bf" }, tabIndex: "0", "data-language": "html", "data-theme": "one-dark-pro", children: _jsxs(_components.code, { "data-language": "html", "data-theme": "one-dark-pro", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#ABB2BF" }, children: "" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#ABB2BF" }, children: "<" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "html" }), _jsx(_components.span, { style: { color: "#D19A66" }, children: " lang" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "=" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "\"en\"" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#ABB2BF" }, children: "<" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "head" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#ABB2BF" }, children: " <" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "meta" }), _jsx(_components.span, { style: { color: "#D19A66" }, children: " charset" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "=" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "\"UTF-8\"" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#ABB2BF" }, children: " <" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "meta" }), _jsx(_components.span, { style: { color: "#D19A66" }, children: " name" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "=" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "\"viewport\"" }), _jsx(_components.span, { style: { color: "#D19A66" }, children: " content" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "=" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "\"width=device-width, initial-scale=1.0\"" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#ABB2BF" }, children: " <" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "title" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ">Blog" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#ABB2BF" }, children: "" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#ABB2BF" }, children: "<" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "body" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#ABB2BF" }, children: " <" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "div" }), _jsx(_components.span, { style: { color: "#D19A66" }, children: " class" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "=" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "\"container\"" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ">" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#ABB2BF" }, children: " <" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "script" }), _jsx(_components.span, { style: { color: "#D19A66" }, children: " src" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "=" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "\"/js/blog.js\"" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#ABB2BF" }, children: "" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#ABB2BF" }, children: "" })] })] }) }) }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "blog.js" }), " (Script to handle fetching of All Blog Post Available):-"] }), "\n"] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#282c34", color: "#abb2bf" }, tabIndex: "0", "data-language": "js", "data-theme": "one-dark-pro", children: _jsxs(_components.code, { "data-language": "js", "data-theme": "one-dark-pro", style: { display: "grid" }, children: [_jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: "// create a function to handle data fetching" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C678DD" }, children: "let" }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: " dataFromDB" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " =" }), _jsx(_components.span, { style: { color: "#C678DD" }, children: " async" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "() " }), _jsx(_components.span, { style: { color: "#C678DD" }, children: "=>" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " {" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: " // fetch data (All Blog Posts Available) through API URL of '/api/blog'" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C678DD" }, children: " const" }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: " res" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " =" }), _jsx(_components.span, { style: { color: "#C678DD" }, children: " await" }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: " fetch" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'/api/blog'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ")" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C678DD" }, children: " const" }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: " json" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " =" }), _jsx(_components.span, { style: { color: "#C678DD" }, children: " await" }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: " res" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "json" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "()" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C678DD" }, children: " if" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: "json" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "message" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " ===" }), _jsx(_components.span, { style: { color: "#98C379" }, children: " 'Successful!'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ") {" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: " // update into UI" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C678DD" }, children: " let" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: " posts" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ", " }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "htmlTemplate" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E06C75" }, children: " posts" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " =" }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: " json" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "data" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E5C07B" }, children: " posts" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "forEach" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#E06C75", fontStyle: "italic" }, children: "post" }), _jsx(_components.span, { style: { color: "#C678DD" }, children: " =>" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E06C75" }, children: " htmlTemplate" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " =" }), _jsx(_components.span, { style: { color: "#98C379" }, children: " `" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#98C379" }, children: "

" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#98C379" }, children: "

" }), _jsx(_components.span, { style: { color: "#C678DD" }, children: "${" }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: "post" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "title" }), _jsx(_components.span, { style: { color: "#C678DD" }, children: "}" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "

" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#98C379" }, children: "

" }), _jsx(_components.span, { style: { color: "#C678DD" }, children: "${" }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: "post" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "description" }), _jsx(_components.span, { style: { color: "#C678DD" }, children: "}" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "

" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#98C379" }, children: " /* will bring user to route of '/blog/id' */" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#98C379" }, children: " Read More" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#98C379" }, children: "

" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#98C379" }, children: " `" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: " // append the template to UI" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E5C07B" }, children: " document" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "querySelector" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'.container'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ")." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "insertAdjacentHTML" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'beforeend'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ", " }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "htmlTemplate" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ")" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " });" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#ABB2BF" }, children: " } " }), _jsx(_components.span, { style: { color: "#C678DD" }, children: "else" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#61AFEF" }, children: " alert" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'No data fetched from db!'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ")" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " }" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "}" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#61AFEF" }, children: "dataFromDB" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "()" })] })] }) }) }), "\n", _jsxs(_components.p, { children: ["As you see, we actually able to get data (All Blog Posts Available) by using JavaScript ", _jsx(_components.code, { children: "fetch" }), " from the front-end of the system. This is the only way how we can get data from our server or back-end. The only next thing we could do is to create those API URL of ", _jsx(_components.code, { children: "route /api/blog" }), " to send/return the data we need like shown below:-"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "index.js" }), ":-"] }), "\n"] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#282c34", color: "#abb2bf" }, tabIndex: "0", "data-language": "js", "data-theme": "one-dark-pro", children: _jsxs(_components.code, { "data-language": "js", "data-theme": "one-dark-pro", style: { display: "grid" }, children: [_jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: "/* Dependencies */" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: "// Express Package" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C678DD" }, children: "const" }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: " express" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " =" }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: " require" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'express'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ")" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C678DD" }, children: "const" }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: " app" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " =" }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: " express" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "()" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: "// Cors" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C678DD" }, children: "const" }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: " cors" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " =" }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: " require" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'cors'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ")" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: "// Path" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C678DD" }, children: "const" }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: " path" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " =" }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: " require" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'path'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ")" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: "/* Middlewares */" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: "// cors" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E5C07B" }, children: "app" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "use" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "cors" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "())" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: "// body parser" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E5C07B" }, children: "app" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "use" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: "express" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "json" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "())" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: "// Static folder" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E5C07B" }, children: "app" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "use" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: "express" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "static" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'web'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "))" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: "/* Gimmick Data Storage */" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C678DD" }, children: "let" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: " posts" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " =" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " [" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " {" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E06C75" }, children: " id" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ": " }), _jsx(_components.span, { style: { color: "#D19A66" }, children: "1" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E06C75" }, children: " title" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ": " }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'Post 1'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E06C75" }, children: " description" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ": " }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'Post One Description'" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " }," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " {" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E06C75" }, children: " id" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ": " }), _jsx(_components.span, { style: { color: "#D19A66" }, children: "2" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E06C75" }, children: " title" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ": " }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'Post 2'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E06C75" }, children: " description" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ": " }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'Post Two Description'" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " }," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " {" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E06C75" }, children: " id" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ": " }), _jsx(_components.span, { style: { color: "#D19A66" }, children: "3" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E06C75" }, children: " title" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ": " }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'Post 3'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E06C75" }, children: " description" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ": " }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'Post Three Description'" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " }" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "]" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: "/* Routes */" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: "// 1.0 - page to display All Blog Posts Available" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E5C07B" }, children: "app" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "get" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'/blog'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ", " }), _jsx(_components.span, { style: { color: "#C678DD" }, children: "async" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#E06C75", fontStyle: "italic" }, children: "req" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ", " }), _jsx(_components.span, { style: { color: "#E06C75", fontStyle: "italic" }, children: "res" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ") " }), _jsx(_components.span, { style: { color: "#C678DD" }, children: "=>" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " {" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: " // using just NodeJS won't enable use to render a page and send data together when rendering (in my knowledge)" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: " // so the only way to do it, its just render a static html page for now" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: " // - using 'path resolve' to get the path of where 'blog.html' situated" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C678DD" }, children: " let" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: " parentPath" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " =" }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: " path" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "resolve" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "__dirname" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " +" }), _jsx(_components.span, { style: { color: "#98C379" }, children: " '/blog.html'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ", " }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'../'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ")" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: " // - using 'sendFile' to render a static html page of 'blog.html'" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E5C07B" }, children: " res" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "sendFile" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: "path" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "join" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "parentPath" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " +" }), _jsx(_components.span, { style: { color: "#98C379" }, children: " '/views/blog.html'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "))" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "})" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: "// 1.1 - route to handle passing of All Blog Posts Available" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E5C07B" }, children: "app" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "get" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'/api/blog'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ", " }), _jsx(_components.span, { style: { color: "#C678DD" }, children: "async" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#E06C75", fontStyle: "italic" }, children: "req" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ", " }), _jsx(_components.span, { style: { color: "#E06C75", fontStyle: "italic" }, children: "res" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ") " }), _jsx(_components.span, { style: { color: "#C678DD" }, children: "=>" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C678DD" }, children: " try" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " {" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: " // send All Blog Posts Available" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E5C07B" }, children: " res" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "json" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "({ " }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "message" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ": " }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'Successful!'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ", " }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "data" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ": " }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "posts" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " })" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#ABB2BF" }, children: " } " }), _jsx(_components.span, { style: { color: "#C678DD" }, children: "catch" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "err" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ") {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E5C07B" }, children: " res" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "json" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "({ " }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "message" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ": " }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'Unsuccessful!'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ", " }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "data" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ": " }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "err" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " })" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " }" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "})" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: "/* Server Connection */" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E5C07B" }, children: "app" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "listen" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#D19A66" }, children: "5000" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ", " }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: "console" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "log" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'Server is up and running at port 5000.'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "))" })] })] }) }) }), "\n", _jsx(_components.p, { children: "Up till now, there was no problem to serve our Blog page using this method. But the problem you will definitely face when continuing doing so, is when you want to serve a Single Blog Post page that user will clicked on. Let's create a route to handle the single blog post page." }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "index.js" }), ":-"] }), "\n"] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#282c34", color: "#abb2bf" }, tabIndex: "0", "data-language": "js", "data-theme": "one-dark-pro", children: _jsxs(_components.code, { "data-language": "js", "data-theme": "one-dark-pro", style: { display: "grid" }, children: [_jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: "/* Dependencies */" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: "// Express Package" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C678DD" }, children: "const" }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: " express" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " =" }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: " require" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'express'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ")" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C678DD" }, children: "const" }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: " app" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " =" }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: " express" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "()" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: "// Cors" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C678DD" }, children: "const" }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: " cors" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " =" }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: " require" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'cors'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ")" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: "// Path" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C678DD" }, children: "const" }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: " path" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " =" }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: " require" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'path'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ")" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: "/* Middlewares */" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: "// cors" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E5C07B" }, children: "app" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "use" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "cors" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "())" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: "// body parser" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E5C07B" }, children: "app" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "use" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: "express" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "json" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "())" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: "// Static folder" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E5C07B" }, children: "app" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "use" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: "express" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "static" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'web'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "))" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: "/* Gimmick Data Storage */" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C678DD" }, children: "let" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: " posts" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " =" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " [" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " {" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E06C75" }, children: " id" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ": " }), _jsx(_components.span, { style: { color: "#D19A66" }, children: "1" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E06C75" }, children: " title" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ": " }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'Post 1'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E06C75" }, children: " description" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ": " }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'Post One Description'" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " }," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " {" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E06C75" }, children: " id" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ": " }), _jsx(_components.span, { style: { color: "#D19A66" }, children: "2" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E06C75" }, children: " title" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ": " }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'Post 2'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E06C75" }, children: " description" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ": " }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'Post Two Description'" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " }," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " {" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E06C75" }, children: " id" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ": " }), _jsx(_components.span, { style: { color: "#D19A66" }, children: "3" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E06C75" }, children: " title" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ": " }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'Post 3'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E06C75" }, children: " description" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ": " }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'Post Three Description'" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " }" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "]" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: "/* Routes */" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: "// 1.0 - page to display All Blog Posts Available" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E5C07B" }, children: "app" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "get" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'/blog'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ", " }), _jsx(_components.span, { style: { color: "#C678DD" }, children: "async" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#E06C75", fontStyle: "italic" }, children: "req" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ", " }), _jsx(_components.span, { style: { color: "#E06C75", fontStyle: "italic" }, children: "res" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ") " }), _jsx(_components.span, { style: { color: "#C678DD" }, children: "=>" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " {" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: " // using just NodeJS won't enable use to render a page and send data together when rendering (in my knowledge)" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: " // so the only way to do it, its just render a static html page for now" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: " // - using 'path resolve' to get the path of where 'blog.html' situated" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C678DD" }, children: " let" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: " parentPath" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " =" }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: " path" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "resolve" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "__dirname" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " +" }), _jsx(_components.span, { style: { color: "#98C379" }, children: " '/blog.html'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ", " }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'../'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ")" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: " // - using 'sendFile' to render a static html page of 'blog.html'" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E5C07B" }, children: " res" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "sendFile" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: "path" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "join" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "parentPath" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " +" }), _jsx(_components.span, { style: { color: "#98C379" }, children: " '/views/blog.html'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "))" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "})" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: "// 1.1 - route to handle passing of All Blog Posts Available" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E5C07B" }, children: "app" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "get" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'/api/blog'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ", " }), _jsx(_components.span, { style: { color: "#C678DD" }, children: "async" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#E06C75", fontStyle: "italic" }, children: "req" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ", " }), _jsx(_components.span, { style: { color: "#E06C75", fontStyle: "italic" }, children: "res" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ") " }), _jsx(_components.span, { style: { color: "#C678DD" }, children: "=>" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C678DD" }, children: " try" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " {" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: " // send All Blog Posts Available" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E5C07B" }, children: " res" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "json" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "({ " }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "message" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ": " }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'Successful!'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ", " }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "data" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ": " }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "posts" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " })" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#ABB2BF" }, children: " } " }), _jsx(_components.span, { style: { color: "#C678DD" }, children: "catch" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "err" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ") {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E5C07B" }, children: " res" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "json" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "({ " }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "message" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ": " }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'Unsuccessful!'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ", " }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "data" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ": " }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "err" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " })" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " }" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "})" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: "// 2.0 - page to display Single Blog Post" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E5C07B" }, children: "app" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "get" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'/blog/:id'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ", " }), _jsx(_components.span, { style: { color: "#C678DD" }, children: "async" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#E06C75", fontStyle: "italic" }, children: "req" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ", " }), _jsx(_components.span, { style: { color: "#E06C75", fontStyle: "italic" }, children: "res" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ") " }), _jsx(_components.span, { style: { color: "#C678DD" }, children: "=>" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " {" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: " // send user according to which Single Blog Post they clicked on" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: " // - send user to Single Blog Post of 'id = 1'" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C678DD" }, children: " if" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: "+" }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: "req" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: "params" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "id" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " ===" }), _jsx(_components.span, { style: { color: "#D19A66" }, children: " 1" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ") {" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: " // - using 'path resolve' to get the path of where 'singleBlog1.html' situated" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C678DD" }, children: " let" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: " parentPath" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " =" }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: " path" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "resolve" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "__dirname" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " +" }), _jsx(_components.span, { style: { color: "#98C379" }, children: " '/singleBlog1.html'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ", " }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'../'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ")" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: " // - using 'sendFile' to render a static html page of 'singleBlog1.html'" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E5C07B" }, children: " res" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "sendFile" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: "path" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "join" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "parentPath" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " +" }), _jsx(_components.span, { style: { color: "#98C379" }, children: " '/views/singleBlog1.html'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "))" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#ABB2BF" }, children: " } " }), _jsx(_components.span, { style: { color: "#C678DD" }, children: "else" }), _jsx(_components.span, { style: { color: "#C678DD" }, children: " if" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: "+" }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: "req" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: "params" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "id" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " ===" }), _jsx(_components.span, { style: { color: "#D19A66" }, children: " 2" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ") { " }), _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: "// - send user to Single Blog Post of 'id = 2'" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: " // - using 'path resolve' to get the path of where 'singleBlog2.html' situated" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C678DD" }, children: " let" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: " parentPath" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " =" }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: " path" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "resolve" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "__dirname" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " +" }), _jsx(_components.span, { style: { color: "#98C379" }, children: " '/singleBlog2.html'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ", " }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'../'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ")" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: " // - using 'sendFile' to render a static html page of 'singleBlog2.html'" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E5C07B" }, children: " res" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "sendFile" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: "path" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "join" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "parentPath" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " +" }), _jsx(_components.span, { style: { color: "#98C379" }, children: " '/views/singleBlog2.html'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "))" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#ABB2BF" }, children: " } " }), _jsx(_components.span, { style: { color: "#C678DD" }, children: "else" }), _jsx(_components.span, { style: { color: "#C678DD" }, children: " if" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: "+" }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: "req" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: "params" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "id" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " ===" }), _jsx(_components.span, { style: { color: "#D19A66" }, children: " 3" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ") { " }), _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: "// - send user to Single Blog Post of 'id = 3'" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: " // - using 'path resolve' to get the path of where 'singleBlog3.html' situated" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C678DD" }, children: " let" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: " parentPath" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " =" }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: " path" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "resolve" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "__dirname" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " +" }), _jsx(_components.span, { style: { color: "#98C379" }, children: " '/singleBlog3.html'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ", " }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'../'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ")" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: " // - using 'sendFile' to render a static html page of 'singleBlog3.html'" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E5C07B" }, children: " res" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "sendFile" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: "path" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "join" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "parentPath" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " +" }), _jsx(_components.span, { style: { color: "#98C379" }, children: " '/views/singleBlog3.html'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "))" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#ABB2BF" }, children: " } " }), _jsx(_components.span, { style: { color: "#C678DD" }, children: "else" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " {" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: " // console log error message" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E5C07B" }, children: " console" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "log" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "`There's no post with the id of " }), _jsx(_components.span, { style: { color: "#C678DD" }, children: "${" }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: "req" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: "params" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "id" }), _jsx(_components.span, { style: { color: "#C678DD" }, children: "}" }), _jsx(_components.span, { style: { color: "#98C379" }, children: " exist in our database.`" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ")" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " }" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "})" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: "/* Server Connection */" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E5C07B" }, children: "app" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "listen" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#D19A66" }, children: "5000" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ", " }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: "console" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "log" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'Server is up and running at port 5000.'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "))" })] })] }) }) }), "\n", _jsx(_components.p, { children: "Like shown above, we have no way of doing this dynamically. Unfortunately we have to create a different single blog post page for each and every of our post or new added post in the future. But, the problems still not end there yet tho. Continue on below:-" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "singleBlog1.html" }), " (Page to display Single Blog Post of ID = 1):-"] }), "\n"] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#282c34", color: "#abb2bf" }, tabIndex: "0", "data-language": "html", "data-theme": "one-dark-pro", children: _jsxs(_components.code, { "data-language": "html", "data-theme": "one-dark-pro", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#ABB2BF" }, children: "" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#ABB2BF" }, children: "<" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "html" }), _jsx(_components.span, { style: { color: "#D19A66" }, children: " lang" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "=" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "\"en\"" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#ABB2BF" }, children: "<" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "head" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#ABB2BF" }, children: " <" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "meta" }), _jsx(_components.span, { style: { color: "#D19A66" }, children: " charset" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "=" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "\"UTF-8\"" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#ABB2BF" }, children: " <" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "meta" }), _jsx(_components.span, { style: { color: "#D19A66" }, children: " name" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "=" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "\"viewport\"" }), _jsx(_components.span, { style: { color: "#D19A66" }, children: " content" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "=" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "\"width=device-width, initial-scale=1.0\"" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#ABB2BF" }, children: " <" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "title" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ">Blog" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#ABB2BF" }, children: "" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#ABB2BF" }, children: "<" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "body" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#ABB2BF" }, children: " <" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "div" }), _jsx(_components.span, { style: { color: "#D19A66" }, children: " class" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "=" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "\"container\"" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ">" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#ABB2BF" }, children: " <" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "script" }), _jsx(_components.span, { style: { color: "#D19A66" }, children: " src" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "=" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "\"/js/singleBlog1.js\"" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#ABB2BF" }, children: "" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#ABB2BF" }, children: "" })] })] }) }) }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "singleBlog1.js" }), " (Script to handle fetching of Single Blog Post of ID = 1);-"] }), "\n"] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#282c34", color: "#abb2bf" }, tabIndex: "0", "data-language": "js", "data-theme": "one-dark-pro", children: _jsxs(_components.code, { "data-language": "js", "data-theme": "one-dark-pro", style: { display: "grid" }, children: [_jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: "// create a function to handle data fetching" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C678DD" }, children: "let" }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: " dataFromDB" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " =" }), _jsx(_components.span, { style: { color: "#C678DD" }, children: " async" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "() " }), _jsx(_components.span, { style: { color: "#C678DD" }, children: "=>" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " {" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: " // fetch data (All Blog Posts Available) through API URL of '/api/blog/1'" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C678DD" }, children: " const" }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: " res" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " =" }), _jsx(_components.span, { style: { color: "#C678DD" }, children: " await" }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: " fetch" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'/api/blog/1'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ")" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C678DD" }, children: " const" }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: " json" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " =" }), _jsx(_components.span, { style: { color: "#C678DD" }, children: " await" }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: " res" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "json" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "()" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C678DD" }, children: " if" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: "json" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "message" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " ===" }), _jsx(_components.span, { style: { color: "#98C379" }, children: " 'Successful!'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ") {" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: " // update into UI" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C678DD" }, children: " let" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: " posts" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ", " }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "htmlTemplate" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E06C75" }, children: " post" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " =" }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: " json" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "data" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E06C75" }, children: " htmlTemplate" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " =" }), _jsx(_components.span, { style: { color: "#98C379" }, children: " `" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#98C379" }, children: "

" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#98C379" }, children: "

" }), _jsx(_components.span, { style: { color: "#C678DD" }, children: "${" }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: "post" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "title" }), _jsx(_components.span, { style: { color: "#C678DD" }, children: "}" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "

" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#98C379" }, children: "

" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#98C379" }, children: "

" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#98C379" }, children: " `" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: " // append the template to UI" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E5C07B" }, children: " document" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "querySelector" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'.container'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ")." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "insertAdjacentHTML" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'beforeend'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ", " }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "htmlTemplate" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ")" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#ABB2BF" }, children: " } " }), _jsx(_components.span, { style: { color: "#C678DD" }, children: "else" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#61AFEF" }, children: " alert" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'No data fetched from db!'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ")" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " }" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "}" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#61AFEF" }, children: "dataFromDB" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "()" })] })] }) }) }), "\n", _jsxs(_components.p, { children: ["With the example above, this also means that we need a separate JavaScript scripting for each ", _jsx(_components.code, { children: "singleBlog.html" }), " we've created. And in our ", _jsx(_components.code, { children: "index.js" }), ", we need to add one new ", _jsx(_components.code, { children: "route" }), " to handle the sending of data to each ", _jsx(_components.code, { children: "singleBlog.js" }), " we've created like shown below:-"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "index.js" }), ":-"] }), "\n"] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#282c34", color: "#abb2bf" }, tabIndex: "0", "data-language": "js", "data-theme": "one-dark-pro", children: _jsxs(_components.code, { "data-language": "js", "data-theme": "one-dark-pro", style: { display: "grid" }, children: [_jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: "/* Dependencies */" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: "// Express Package" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C678DD" }, children: "const" }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: " express" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " =" }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: " require" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'express'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ")" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C678DD" }, children: "const" }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: " app" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " =" }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: " express" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "()" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: "// Cors" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C678DD" }, children: "const" }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: " cors" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " =" }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: " require" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'cors'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ")" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: "// Path" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C678DD" }, children: "const" }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: " path" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " =" }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: " require" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'path'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ")" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: "/* Middlewares */" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: "// cors" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E5C07B" }, children: "app" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "use" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "cors" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "())" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: "// body parser" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E5C07B" }, children: "app" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "use" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: "express" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "json" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "())" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: "// Static folder" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E5C07B" }, children: "app" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "use" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: "express" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "static" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'web'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "))" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: "/* Gimmick Data Storage */" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C678DD" }, children: "let" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: " posts" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " =" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " [" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " {" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E06C75" }, children: " id" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ": " }), _jsx(_components.span, { style: { color: "#D19A66" }, children: "1" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E06C75" }, children: " title" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ": " }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'Post 1'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E06C75" }, children: " description" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ": " }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'Post One Description'" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " }," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " {" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E06C75" }, children: " id" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ": " }), _jsx(_components.span, { style: { color: "#D19A66" }, children: "2" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E06C75" }, children: " title" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ": " }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'Post 2'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E06C75" }, children: " description" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ": " }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'Post Two Description'" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " }," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " {" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E06C75" }, children: " id" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ": " }), _jsx(_components.span, { style: { color: "#D19A66" }, children: "3" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E06C75" }, children: " title" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ": " }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'Post 3'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E06C75" }, children: " description" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ": " }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'Post Three Description'" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " }" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "]" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: "/* Routes */" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: "// 1.0 - page to display All Blog Posts Available" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E5C07B" }, children: "app" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "get" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'/blog'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ", " }), _jsx(_components.span, { style: { color: "#C678DD" }, children: "async" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#E06C75", fontStyle: "italic" }, children: "req" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ", " }), _jsx(_components.span, { style: { color: "#E06C75", fontStyle: "italic" }, children: "res" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ") " }), _jsx(_components.span, { style: { color: "#C678DD" }, children: "=>" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " {" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: " // using just NodeJS won't enable use to render a page and send data together when rendering (in my knowledge)" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: " // so the only way to do it, its just render a static html page for now" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: " // - using 'path resolve' to get the path of where 'blog.html' situated" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C678DD" }, children: " let" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: " parentPath" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " =" }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: " path" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "resolve" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "__dirname" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " +" }), _jsx(_components.span, { style: { color: "#98C379" }, children: " '/blog.html'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ", " }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'../'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ")" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: " // - using 'sendFile' to render a static html page of 'blog.html'" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E5C07B" }, children: " res" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "sendFile" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: "path" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "join" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "parentPath" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " +" }), _jsx(_components.span, { style: { color: "#98C379" }, children: " '/views/blog.html'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "))" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "})" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: "// 1.1 - route to handle passing of All Blog Posts Available" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E5C07B" }, children: "app" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "get" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'/api/blog'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ", " }), _jsx(_components.span, { style: { color: "#C678DD" }, children: "async" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#E06C75", fontStyle: "italic" }, children: "req" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ", " }), _jsx(_components.span, { style: { color: "#E06C75", fontStyle: "italic" }, children: "res" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ") " }), _jsx(_components.span, { style: { color: "#C678DD" }, children: "=>" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C678DD" }, children: " try" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " {" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: " // send All Blog Posts Available" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E5C07B" }, children: " res" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "json" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "({ " }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "message" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ": " }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'Successful!'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ", " }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "data" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ": " }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "posts" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " })" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#ABB2BF" }, children: " } " }), _jsx(_components.span, { style: { color: "#C678DD" }, children: "catch" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "err" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ") {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E5C07B" }, children: " res" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "json" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "({ " }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "message" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ": " }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'Unsuccessful!'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ", " }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "data" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ": " }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "err" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " })" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " }" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "})" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: "// 2.0 - page to display Single Blog Post" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E5C07B" }, children: "app" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "get" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'/blog/:id'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ", " }), _jsx(_components.span, { style: { color: "#C678DD" }, children: "async" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#E06C75", fontStyle: "italic" }, children: "req" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ", " }), _jsx(_components.span, { style: { color: "#E06C75", fontStyle: "italic" }, children: "res" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ") " }), _jsx(_components.span, { style: { color: "#C678DD" }, children: "=>" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " {" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: " // send user according to which Single Blog Post they clicked on" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: " // - send user to Single Blog Post of 'id = 1'" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C678DD" }, children: " if" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: "+" }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: "req" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: "params" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "id" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " ===" }), _jsx(_components.span, { style: { color: "#D19A66" }, children: " 1" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ") {" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: " // - using 'path resolve' to get the path of where 'singleBlog1.html' situated" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C678DD" }, children: " let" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: " parentPath" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " =" }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: " path" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "resolve" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "__dirname" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " +" }), _jsx(_components.span, { style: { color: "#98C379" }, children: " '/singleBlog1.html'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ", " }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'../'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ")" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: " // - using 'sendFile' to render a static html page of 'singleBlog1.html'" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E5C07B" }, children: " res" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "sendFile" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: "path" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "join" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "parentPath" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " +" }), _jsx(_components.span, { style: { color: "#98C379" }, children: " '/views/singleBlog1.html'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "))" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#ABB2BF" }, children: " } " }), _jsx(_components.span, { style: { color: "#C678DD" }, children: "else" }), _jsx(_components.span, { style: { color: "#C678DD" }, children: " if" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: "+" }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: "req" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: "params" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "id" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " ===" }), _jsx(_components.span, { style: { color: "#D19A66" }, children: " 2" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ") { " }), _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: "// - send user to Single Blog Post of 'id = 2'" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: " // - using 'path resolve' to get the path of where 'singleBlog2.html' situated" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C678DD" }, children: " let" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: " parentPath" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " =" }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: " path" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "resolve" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "__dirname" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " +" }), _jsx(_components.span, { style: { color: "#98C379" }, children: " '/singleBlog2.html'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ", " }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'../'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ")" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: " // - using 'sendFile' to render a static html page of 'singleBlog2.html'" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E5C07B" }, children: " res" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "sendFile" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: "path" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "join" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "parentPath" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " +" }), _jsx(_components.span, { style: { color: "#98C379" }, children: " '/views/singleBlog2.html'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "))" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#ABB2BF" }, children: " } " }), _jsx(_components.span, { style: { color: "#C678DD" }, children: "else" }), _jsx(_components.span, { style: { color: "#C678DD" }, children: " if" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: "+" }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: "req" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: "params" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "id" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " ===" }), _jsx(_components.span, { style: { color: "#D19A66" }, children: " 3" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ") { " }), _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: "// - send user to Single Blog Post of 'id = 3'" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: " // - using 'path resolve' to get the path of where 'singleBlog3.html' situated" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C678DD" }, children: " let" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: " parentPath" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " =" }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: " path" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "resolve" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "__dirname" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " +" }), _jsx(_components.span, { style: { color: "#98C379" }, children: " '/singleBlog3.html'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ", " }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'../'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ")" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: " // - using 'sendFile' to render a static html page of 'singleBlog3.html'" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E5C07B" }, children: " res" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "sendFile" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: "path" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "join" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "parentPath" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " +" }), _jsx(_components.span, { style: { color: "#98C379" }, children: " '/views/singleBlog3.html'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "))" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#ABB2BF" }, children: " } " }), _jsx(_components.span, { style: { color: "#C678DD" }, children: "else" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " {" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: " // console log error message" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E5C07B" }, children: " console" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "log" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "`There's no post with the id of " }), _jsx(_components.span, { style: { color: "#C678DD" }, children: "${" }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: "req" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: "params" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "id" }), _jsx(_components.span, { style: { color: "#C678DD" }, children: "}" }), _jsx(_components.span, { style: { color: "#98C379" }, children: " exist in our database.`" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ")" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " }" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "})" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: "// 2.1 - route to handle passing of Single Blog Post user requested" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E5C07B" }, children: "app" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "get" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'/api/blog/:id'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ", " }), _jsx(_components.span, { style: { color: "#C678DD" }, children: "async" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#E06C75", fontStyle: "italic" }, children: "req" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ", " }), _jsx(_components.span, { style: { color: "#E06C75", fontStyle: "italic" }, children: "res" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ") " }), _jsx(_components.span, { style: { color: "#C678DD" }, children: "=>" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " {" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: " // send user Single Post data according to which user have requested" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C678DD" }, children: " try" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " {" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: " // - send user Single Blog Post data of 'id = 1'" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C678DD" }, children: " if" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: "+" }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: "req" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: "params" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "id" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " ===" }), _jsx(_components.span, { style: { color: "#D19A66" }, children: " 1" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ") {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E5C07B" }, children: " res" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "json" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "({ " }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "message" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ": " }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'Successful!'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ", " }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "data" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ": " }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "posts" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "[" }), _jsx(_components.span, { style: { color: "#D19A66" }, children: "0" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "] })" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#ABB2BF" }, children: " } " }), _jsx(_components.span, { style: { color: "#C678DD" }, children: "else" }), _jsx(_components.span, { style: { color: "#C678DD" }, children: " if" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: "+" }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: "req" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: "params" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "id" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " ===" }), _jsx(_components.span, { style: { color: "#D19A66" }, children: " 2" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ") { " }), _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: "// - send user Single Blog Post data of 'id = 2'" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E5C07B" }, children: " res" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "json" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "({ " }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "message" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ": " }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'Successful!'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ", " }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "data" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ": " }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "posts" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "[" }), _jsx(_components.span, { style: { color: "#D19A66" }, children: "1" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "] })" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#ABB2BF" }, children: " } " }), _jsx(_components.span, { style: { color: "#C678DD" }, children: "else" }), _jsx(_components.span, { style: { color: "#C678DD" }, children: " if" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: "+" }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: "req" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: "params" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "id" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " ===" }), _jsx(_components.span, { style: { color: "#D19A66" }, children: " 3" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ") { " }), _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: "// - send user Single Blog Post data of 'id = 3'" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E5C07B" }, children: " res" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "json" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "({ " }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "message" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ": " }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'Successful!'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ", " }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "data" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ": " }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "posts" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "[" }), _jsx(_components.span, { style: { color: "#D19A66" }, children: "2" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "] })" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#ABB2BF" }, children: " } " }), _jsx(_components.span, { style: { color: "#C678DD" }, children: "else" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " {" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: " // console log error message" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E5C07B" }, children: " console" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "log" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "`There's no post with the id of " }), _jsx(_components.span, { style: { color: "#C678DD" }, children: "${" }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: "req" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: "params" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "id" }), _jsx(_components.span, { style: { color: "#C678DD" }, children: "}" }), _jsx(_components.span, { style: { color: "#98C379" }, children: " exist in our database.`" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ")" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " }" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#ABB2BF" }, children: " } " }), _jsx(_components.span, { style: { color: "#C678DD" }, children: "catch" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "err" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ") {" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: " // - send user Single Blog Post's error message" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E5C07B" }, children: " res" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "json" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "({ " }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "message" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ": " }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'Unsuccessful!'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ", " }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "data" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ": " }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "err" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " })" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " }" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "})" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: "/* Server Connection */" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E5C07B" }, children: "app" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "listen" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#D19A66" }, children: "5000" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ", " }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: "console" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "log" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'Server is up and running at port 5000.'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "))" })] })] }) }) }), "\n", _jsxs(_components.p, { children: ["Like I said earlier, this is the only way to do it now when just using bare Node JS. But don't worry tho. I'm going to show you how we can change our code, not much, just a tad actually, with just using a package called ", _jsx(_components.strong, { children: "EJS" }), " (Embedded JavaScript Templating). Let's get started."] }), "\n", _jsx(_components.h2, { id: "b-with-template-usage", children: "B. With Template Usage" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "index.js" }), ":-"] }), "\n"] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#282c34", color: "#abb2bf" }, tabIndex: "0", "data-language": "js", "data-theme": "one-dark-pro", children: _jsxs(_components.code, { "data-language": "js", "data-theme": "one-dark-pro", style: { display: "grid" }, children: [_jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: "/* Dependencies */" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: "// Express Package" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C678DD" }, children: "const" }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: " express" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " =" }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: " require" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'express'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ")" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C678DD" }, children: "const" }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: " app" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " =" }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: " express" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "()" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: "// Cors" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C678DD" }, children: "const" }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: " cors" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " =" }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: " require" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'cors'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ")" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: "// Path" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C678DD" }, children: "const" }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: " path" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " =" }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: " require" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'path'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ")" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: "/* Middlewares */" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: "// cors" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E5C07B" }, children: "app" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "use" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "cors" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "())" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: "// body parser" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E5C07B" }, children: "app" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "use" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: "express" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "json" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "())" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: "// Static folder" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E5C07B" }, children: "app" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "use" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: "express" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "static" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'web'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "))" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: "/* Gimmick Data Storage */" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C678DD" }, children: "let" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: " posts" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " =" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " [" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " {" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E06C75" }, children: " id" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ": " }), _jsx(_components.span, { style: { color: "#D19A66" }, children: "1" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E06C75" }, children: " title" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ": " }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'Post 1'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E06C75" }, children: " description" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ": " }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'Post One Description'" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " }," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " {" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E06C75" }, children: " id" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ": " }), _jsx(_components.span, { style: { color: "#D19A66" }, children: "2" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E06C75" }, children: " title" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ": " }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'Post 2'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E06C75" }, children: " description" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ": " }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'Post Two Description'" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " }," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " {" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E06C75" }, children: " id" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ": " }), _jsx(_components.span, { style: { color: "#D19A66" }, children: "3" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E06C75" }, children: " title" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ": " }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'Post 3'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E06C75" }, children: " description" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ": " }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'Post Three Description'" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " }" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "]" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: "/* Routes */" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: "// 1.0 - page to display & data to send of All Blog Posts Available" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E5C07B" }, children: "app" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "get" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'/blog'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ", " }), _jsx(_components.span, { style: { color: "#C678DD" }, children: "async" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#E06C75", fontStyle: "italic" }, children: "req" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ", " }), _jsx(_components.span, { style: { color: "#E06C75", fontStyle: "italic" }, children: "res" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ") " }), _jsx(_components.span, { style: { color: "#C678DD" }, children: "=>" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " {" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: " // dynamically render a page while in the same time send data together with it" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: " // - make sure to change your extension of 'blog.html' to 'blog.ejs' in order to make it work" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C678DD" }, children: " try" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E5C07B" }, children: " res" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "render" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'blog'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ", { " }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "message" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ": " }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'Successful!'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ", " }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "data" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ": " }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "posts" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " })" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#ABB2BF" }, children: " } " }), _jsx(_components.span, { style: { color: "#C678DD" }, children: "catch" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "err" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ") {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E5C07B" }, children: " res" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "render" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'blog'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ", { " }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "message" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ": " }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'Unsuccessful!'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ", " }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "data" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ": " }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "err" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " })" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " }" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "})" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: "// 2.0 - page to display & data to send of Single Blog Post" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E5C07B" }, children: "app" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "get" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'/blog/:id'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ", " }), _jsx(_components.span, { style: { color: "#C678DD" }, children: "async" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#E06C75", fontStyle: "italic" }, children: "req" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ", " }), _jsx(_components.span, { style: { color: "#E06C75", fontStyle: "italic" }, children: "res" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ") " }), _jsx(_components.span, { style: { color: "#C678DD" }, children: "=>" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " {" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: " // filter which sigle post to send to singleBlog page" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C678DD" }, children: " let" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: " post" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " =" }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: " posts" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "filter" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#E06C75", fontStyle: "italic" }, children: "post" }), _jsx(_components.span, { style: { color: "#C678DD" }, children: " =>" }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: " post" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "id" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " ===" }), _jsx(_components.span, { style: { color: "#56B6C2" }, children: " +" }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: "req" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: "params" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "id" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ")" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: " // dynamically render a page while in the same time send data together with it" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: " // - make sure to change your extension of 'singleBlog.html' to 'singleBlog.ejs' in order to make it work" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C678DD" }, children: " try" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E5C07B" }, children: " res" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "render" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'singleBlog'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ", { " }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "message" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ": " }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'Successful!'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ", " }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "data" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ": " }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "post" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " })" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#ABB2BF" }, children: " } " }), _jsx(_components.span, { style: { color: "#C678DD" }, children: "catch" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "err" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ") {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E5C07B" }, children: " res" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "render" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'singleBlog'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ", { " }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "message" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ": " }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'Unsuccessful!'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ", " }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "data" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ": " }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "err" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " })" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " }" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "})" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7F848E", fontStyle: "italic" }, children: "/* Server Connection */" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E5C07B" }, children: "app" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "listen" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#D19A66" }, children: "5000" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ", " }), _jsx(_components.span, { style: { color: "#E5C07B" }, children: "console" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "." }), _jsx(_components.span, { style: { color: "#61AFEF" }, children: "log" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "(" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "'Server is up and running at port 5000.'" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "))" })] })] }) }) }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "blog.ejs" }), ":-"] }), "\n"] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#282c34", color: "#abb2bf" }, tabIndex: "0", "data-language": "html", "data-theme": "one-dark-pro", children: _jsxs(_components.code, { "data-language": "html", "data-theme": "one-dark-pro", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#ABB2BF" }, children: "" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#ABB2BF" }, children: "<" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "html" }), _jsx(_components.span, { style: { color: "#D19A66" }, children: " lang" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "=" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "\"en\"" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#ABB2BF" }, children: "<" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "head" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#ABB2BF" }, children: " <" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "meta" }), _jsx(_components.span, { style: { color: "#D19A66" }, children: " charset" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "=" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "\"UTF-8\"" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#ABB2BF" }, children: " <" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "meta" }), _jsx(_components.span, { style: { color: "#D19A66" }, children: " name" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "=" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "\"viewport\"" }), _jsx(_components.span, { style: { color: "#D19A66" }, children: " content" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "=" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "\"width=device-width, initial-scale=1.0\"" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#ABB2BF" }, children: " <" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "title" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ">Blog" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#ABB2BF" }, children: "" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#ABB2BF" }, children: "<" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "body" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#ABB2BF" }, children: " <" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "div" }), _jsx(_components.span, { style: { color: "#D19A66" }, children: " class" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "=" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "\"container\"" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#FFFFFF" }, children: " <" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "% data.forEach(post => { %>" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#ABB2BF" }, children: " <" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "div" }), _jsx(_components.span, { style: { color: "#D19A66" }, children: " class" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "=" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "\"post\"" }), _jsx(_components.span, { style: { color: "#D19A66" }, children: " id" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "=" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "\"post-" }), _jsx(_components.span, { style: { color: "#FFFFFF" }, children: "<" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "%= post.id %>\"" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#ABB2BF" }, children: " <" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "h1" }), _jsx(_components.span, { style: { color: "#D19A66" }, children: " class" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "=" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "\"title\"" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ">" }), _jsx(_components.span, { style: { color: "#FFFFFF" }, children: "<" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "%= post.title %>" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#ABB2BF" }, children: " <" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "p" }), _jsx(_components.span, { style: { color: "#D19A66" }, children: " class" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "=" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "\"desc\"" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ">" }), _jsx(_components.span, { style: { color: "#FFFFFF" }, children: "<" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "%= post.description %>" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#ABB2BF" }, children: " /* will bring user to route of '/blog/id' */" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#ABB2BF" }, children: " <" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "a" }), _jsx(_components.span, { style: { color: "#D19A66" }, children: " href" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "=" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "\"/blog/" }), _jsx(_components.span, { style: { color: "#FFFFFF" }, children: "<" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "%= post.id %>\"" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ">Read More" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#ABB2BF" }, children: " " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#FFFFFF" }, children: " <" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "% }) %> " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#ABB2BF" }, children: " " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#ABB2BF" }, children: "" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#ABB2BF" }, children: "" })] })] }) }) }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "singleBlog.ejs" }), " (Previously as ", _jsx(_components.code, { children: "singleBlog1.html" }), " or ", _jsx(_components.code, { children: "singleBlog2.html" }), " or so forth):-"] }), "\n"] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#282c34", color: "#abb2bf" }, tabIndex: "0", "data-language": "html", "data-theme": "one-dark-pro", children: _jsxs(_components.code, { "data-language": "html", "data-theme": "one-dark-pro", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#ABB2BF" }, children: "" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#ABB2BF" }, children: "<" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "html" }), _jsx(_components.span, { style: { color: "#D19A66" }, children: " lang" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "=" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "\"en\"" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#ABB2BF" }, children: "<" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "head" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#ABB2BF" }, children: " <" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "meta" }), _jsx(_components.span, { style: { color: "#D19A66" }, children: " charset" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "=" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "\"UTF-8\"" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#ABB2BF" }, children: " <" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "meta" }), _jsx(_components.span, { style: { color: "#D19A66" }, children: " name" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "=" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "\"viewport\"" }), _jsx(_components.span, { style: { color: "#D19A66" }, children: " content" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "=" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "\"width=device-width, initial-scale=1.0\"" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#ABB2BF" }, children: " <" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "title" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ">Blog" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#ABB2BF" }, children: "" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#ABB2BF" }, children: "<" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "body" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#ABB2BF" }, children: " <" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "div" }), _jsx(_components.span, { style: { color: "#D19A66" }, children: " class" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "=" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "\"container\"" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#FFFFFF" }, children: " <" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "% data.forEach(post => { %>" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#ABB2BF" }, children: " <" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "div" }), _jsx(_components.span, { style: { color: "#D19A66" }, children: " class" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "=" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "\"post\"" }), _jsx(_components.span, { style: { color: "#D19A66" }, children: " id" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "=" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "\"post-" }), _jsx(_components.span, { style: { color: "#FFFFFF" }, children: "<" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "%= post.id %>\"" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#ABB2BF" }, children: " <" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "h1" }), _jsx(_components.span, { style: { color: "#D19A66" }, children: " class" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "=" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "\"title\"" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ">" }), _jsx(_components.span, { style: { color: "#FFFFFF" }, children: "<" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "%= post.title %>" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#ABB2BF" }, children: " <" }), _jsx(_components.span, { style: { color: "#E06C75" }, children: "p" }), _jsx(_components.span, { style: { color: "#D19A66" }, children: " class" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "=" }), _jsx(_components.span, { style: { color: "#98C379" }, children: "\"desc\"" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: ">" }), _jsx(_components.span, { style: { color: "#FFFFFF" }, children: "<" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "%= post.description %>" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#ABB2BF" }, children: " " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#FFFFFF" }, children: " <" }), _jsx(_components.span, { style: { color: "#ABB2BF" }, children: "% }) %> " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#ABB2BF" }, children: " " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#ABB2BF" }, children: "" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#ABB2BF" }, children: "" })] })] }) }) }), "\n", _jsx(_components.p, { children: "Ain't that more simple? With this we able to cut our code with only having:-" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: ["2 routes only in our ", _jsx(_components.code, { children: "index.js" })] }), "\n", _jsxs(_components.li, { children: ["just a Single Blog post page, ", _jsx(_components.code, { children: "singleBlog.ejs" })] }), "\n", _jsx(_components.li, { children: "no need to apply dedicated & separated script anymore" }), "\n"] }), "\n", _jsxs(_components.p, { children: ["There you have it. We are able to overcome our problems of manually create every single blog post page that available with just using a template. When I just started learning to code using Node JS. Like I said earlier, I thought I could do it even without having to use any third party packages. But after a while learning and implement all sort of codes to build or make my own website (", _jsx(_components.a, { href: "https://www.lalapolalaanewb.com/", children: "Portfolio" }), "). I started knowing that at some point, I need to use any third party packages to make my Portfolio to work as intended. And soon definitely without a doubt, I need to learn how to use a front-end framework too."] }), "\n", _jsxs(_components.p, { children: ["So guys, I hope what I share with you guys today able to at least help you to understand Node JS and the use of ", _jsx(_components.strong, { children: "templating" }), " much better. This does not means that you should not learn Vanilla JavaScript and can straightaway learn how to use Front-end Framework. It depends actually. But, my recommendation will be to start learning the basic stuff first and progress more along the way. Create a website of your own. You will not believe how much and how fast you keep learning new stuff when doing so. It's the most effective way for me, personally."] }), "\n", _jsx(_components.p, { children: "Anyway, like always, thanks for being here. until next time. Chao! Salam." })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent };