<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>Forem: Emmanuel Dodoo</title>
    <description>The latest articles on Forem by Emmanuel Dodoo (@manuel__dev).</description>
    <link>https://forem.com/manuel__dev</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F973116%2Fe64cd989-2999-47cd-bc78-e8d72b16e29b.jpeg</url>
      <title>Forem: Emmanuel Dodoo</title>
      <link>https://forem.com/manuel__dev</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/manuel__dev"/>
    <language>en</language>
    <item>
      <title>Using NodeJS and ExpressJs for Backend Development.</title>
      <dc:creator>Emmanuel Dodoo</dc:creator>
      <pubDate>Wed, 15 Feb 2023 01:36:10 +0000</pubDate>
      <link>https://forem.com/manuel__dev/using-nodejs-and-expressjs-for-backend-development-2l48</link>
      <guid>https://forem.com/manuel__dev/using-nodejs-and-expressjs-for-backend-development-2l48</guid>
      <description>&lt;h2&gt;
  
  
  What is NodeJs
&lt;/h2&gt;

&lt;p&gt;Node.js is a server-side JavaScript runtime environment that enables developers to build and run web applications using JavaScript on the server-side. It is built on top of the Chrome V8 JavaScript engine and provides an event-driven, non-blocking I/O model that allows it to handle a large number of concurrent requests efficiently. Node.js is particularly useful for building scalable, high-performance web applications, real-time applications, and APIs, and has a large and active community of developers who create open-source modules and libraries to extend its functionality.&lt;/p&gt;

&lt;h2&gt;
  
  
  What is ExpressJS
&lt;/h2&gt;

&lt;p&gt;Express.js is a popular open-source web application framework for Node.js that provides a set of tools and features for building web applications and APIs. It is designed to be minimal and flexible, allowing developers to create web applications using their preferred libraries and tools.&lt;/p&gt;

&lt;p&gt;Express.js provides a range of features, including middleware support for handling requests and responses, routing for handling different HTTP requests, and template engine support for generating dynamic HTML pages. It also has a large and active community of developers who create open-source modules and plugins that can be used to extend its functionality.&lt;/p&gt;

&lt;p&gt;With Express.js, developers can build web applications quickly and easily, making it an ideal choice for prototyping and building small to medium-sized web applications. It is also highly customizable and can be used to build complex, large-scale web applications and APIs.&lt;/p&gt;

&lt;h2&gt;
  
  
  What is a Backend-API
&lt;/h2&gt;

&lt;p&gt;A backend API (Application Programming Interface) is a set of rules, protocols, and tools that enables communication between a client-side application (such as a web or mobile app) and the server-side backend of an application. The API defines how the client-side application can interact with the backend, and what data it can request or send.&lt;/p&gt;

&lt;p&gt;In other words, a backend API is responsible for handling requests from the client-side application, processing the data, and returning a response back to the client. This response can take various forms, such as data in a specific format (such as JSON or XML), an error message, or a success message.&lt;/p&gt;

&lt;p&gt;Backend APIs are essential for building modern web and mobile applications as they allow the client-side application to access and interact with data and functionality on the server-side. For example, an e-commerce application might use a backend API to handle requests for product information, add items to a shopping cart, process payments, and update inventory levels.&lt;/p&gt;

&lt;h2&gt;
  
  
  Next : Tutorial on how to create a Simple Backend Server for a School Management System using Node.Js and Express.Js
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;NB:&lt;/strong&gt; Make sure you have Nodejs installed on your machine before you can continue. &lt;a href="https://nodejs.org/en/" rel="noopener noreferrer"&gt;Nodejs download&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;1 . &lt;strong&gt;Creating your new Project.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;create a new folder called school-management system (this is going to be our working directory, and open this folder in vs code or any text editor of your choice.&lt;/p&gt;

&lt;p&gt;2 . &lt;strong&gt;Initialising a new Project and Installing Packages.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;To create a new Node.js project, you can open a terminal and navigate to your desired working directory using the "cd" (change directory) command. Once you are in the correct directory, you can initialize a new project using the &lt;br&gt;
&lt;code&gt;npm init&lt;/code&gt; command. This command will present you with a series of questions, similar to a wizard that you might encounter when installing software on a Windows operating system. These questions will allow you to specify details about your project such as the project name, version, description, entry point, and dependencies.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fr5vcv05bj3g3s1msry93.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fr5vcv05bj3g3s1msry93.png" alt="image for tut"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;After initializing the project, you can install your dependencies for the project. This project will be a simple backend server that will allow you to create new students and find a particular student by their ID. The technologies we are going to be using are Node.js, Express.js, and Mongoose ODM, so to install the packages for the project we are going to install the following packages into our project by using the command: &lt;code&gt;npm install mongoose express dotenv&lt;/code&gt; after doing this your package.json file should be looking like this:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fgdb2x0m1ucrdr5jpvdqm.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fgdb2x0m1ucrdr5jpvdqm.png" alt="packagejson"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The node_modules folder contains all the dependencies installed for a Node.js project.&lt;/p&gt;

&lt;p&gt;3 . &lt;strong&gt;Folder Structure for project&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;You can create the folders for your projects now: In your working directory, you can create another folder called &lt;code&gt;src&lt;/code&gt; in this src, this is where we are going to keep all our source folders and files. &lt;br&gt;
In the src folder we are going to create multiple folders and our main server file called server.js:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;models&lt;/li&gt;
&lt;li&gt;controllers&lt;/li&gt;
&lt;li&gt;routes&lt;/li&gt;
&lt;li&gt;config&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;In the models folder, we are going to create a file called &lt;code&gt;student.model.js&lt;/code&gt;. In the controllers' folder, we are going to create a file called &lt;code&gt;student.controller.js&lt;/code&gt;. In the routes folder we are going to a create a file called &lt;code&gt;student.js&lt;/code&gt;. In the config file, we are going to create a file called &lt;code&gt;dbconnection.js&lt;/code&gt;.&lt;br&gt;
After doing this, your folder structure should look like this:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fyjsxefgq8ceio94dfzus.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fyjsxefgq8ceio94dfzus.png" alt="folder structure"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;4 . &lt;strong&gt;Writing the code for the project&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;First lets create a new a MongoDB Atlas Database for our project. Head over to &lt;a href="https://www.mongodb.com/cloud/atlas/efficiency?utm_source=google&amp;amp;utm_campaign=search_gs_pl_evergreen_atlas_core-high-int_prosp-brand_gic-null_emea-nl_ps-all_desktop_eng_lead&amp;amp;utm_term=mongodb%20atlas&amp;amp;utm_medium=cpc_paid_search&amp;amp;utm_ad=e&amp;amp;utm_ad_campaign_id=19628148417&amp;amp;adgroup=149347432527&amp;amp;cq_cmp=19628148417&amp;amp;gclid=CjwKCAiA_6yfBhBNEiwAkmXy5_RPAmu4lOU2VG60nWR9UMWe34i4auMxRqUjqGWzTpWmy9Oa7HRVRRoCfiAQAvD_BwE" rel="noopener noreferrer"&gt;MongoDB atlas&lt;/a&gt;&lt;br&gt;
sign in or create a new account. After, create a new project and choose the plan for your cloud database. You can follow this link to know how to create a mongoDB atlas database &lt;a href="https://www.youtube.com/watch?v=084rmLU1UgA" rel="noopener noreferrer"&gt;Connecting MongoDB Atlas in a NodeJS project using mongoose&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;After getting your mongoDB atlas link you can place it in your &lt;br&gt;
&lt;code&gt;.env&lt;/code&gt; file which you will create in the root directory of your project.&lt;br&gt;
example : &lt;code&gt;MONGODB_URI=&amp;lt;atlas link&amp;gt;&lt;/code&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Describing your Student model.&lt;/strong&gt;
we are now going to be describing a Model for our student using the following code:&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fyvla91avsfii7p0tjf1v.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fyvla91avsfii7p0tjf1v.png" alt="model code"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Writing code for our student controller.&lt;/strong&gt;
After our model we are going to write controllers for our Student, the code should look like this:&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3pw2144pohzwbsj3hetq.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3pw2144pohzwbsj3hetq.png" alt="student controller"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Writing code for our student route&lt;/strong&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;We are now going to specify the HTTP methods for specific routes and assign controllers to them. After doing this, your code should look like this.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fl4s014ztrjuyk946zpzn.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fl4s014ztrjuyk946zpzn.png" alt="routes"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Writing code for our database connection&lt;/strong&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;we are now going to write a function to connect to our atlas database &lt;br&gt;
It should look like this:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fp7sl8bvle8nnm663wioo.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fp7sl8bvle8nnm663wioo.png" alt="db code"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Writing code for our server file&lt;/strong&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;In our server.js file which is the entry point for our project, we are going to listen on a port , connecting to the database, and also use our routes as global middleware. Your server file should look like this after completing it:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqssa0gkjn4726ku0ah0o.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqssa0gkjn4726ku0ah0o.png" alt="serverjs"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;After doing all this, you can run the command &lt;code&gt;node ./src/server.js&lt;/code&gt; or you can create a script for it in your package.json file&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;NB:&lt;/strong&gt; If you get any errors talking about module and commonjs, add the type property to your package.json. &lt;br&gt;
eg: &lt;code&gt;"type" : "module"&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;You can find the source code for the tutorial on github. &lt;a href="https://github.com/Manuel2u/DCIT-205-Mini-Project" rel="noopener noreferrer"&gt;Repo Link&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;5 . &lt;strong&gt;Testing Endpoints using Postman or Thunderclient.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;You can now check if your endpoints are working by using postman(Postman is an HTTP API development tool used for testing, documenting, and sharing APIs.) or thunder client a vs code extension for testing REST APIS.&lt;/p&gt;

&lt;p&gt;You can use this video to guide you on how to make API request using Postman. &lt;a href="https://www.youtube.com/watch?v=8mBmLDbpIH8" rel="noopener noreferrer"&gt;Postman Video&lt;/a&gt;&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>webdev</category>
      <category>tutorial</category>
      <category>node</category>
    </item>
    <item>
      <title>Difference between SSG and SSR</title>
      <dc:creator>Emmanuel Dodoo</dc:creator>
      <pubDate>Tue, 06 Dec 2022 21:50:35 +0000</pubDate>
      <link>https://forem.com/manuel__dev/difference-between-ssg-and-ssr-3ffb</link>
      <guid>https://forem.com/manuel__dev/difference-between-ssg-and-ssr-3ffb</guid>
      <description>&lt;p&gt;&lt;strong&gt;IN THE BEGINNING&lt;/strong&gt;&lt;br&gt;
Many moons ago, developers were using vanilla HTML, CSS, and Javascript for static websites and hosting them on a server, making them accessible on the internet. If someone is to use a browser to make a request to the URL of the website, the browser(client) will send a request to the server and if the page is available on the server, it will send a response back to the client which will normally be in a form of HTML tags and it will be interpreted into a web page on the browser(client). &lt;br&gt;
So let's get it straight, request from a client to a server and if the file is available, the server sends a response which is rendered on the browser(client) as a webpage.&lt;br&gt;
This approach was mainly for publishing static content. Over time, the need for dynamic content became essential. Technologies such as PHP and ASP.NET become popular with their ability to support the injection of dynamic data into webpages such as usernames, dates and times, profile pictures, and so on. This set the tone for server-side rendering which involved the retrieval of data, mainly from databases as part of the processing the server does before returning the response to the client. This paradigm is clearly depicted by the 3-tier architecture of the web.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F772q5ef2wdfm0clz231e.jpeg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F772q5ef2wdfm0clz231e.jpeg" alt="image of the 3-tie architecture of the web" width="602" height="452"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Then NodeJS Arrived&lt;/strong&gt;&lt;br&gt;
NodeJs is a run-time environment for Javascript which allows you to write Javascript code and run it without using a browser. This technology also allowed web developers to build their own API web servers for handling HTTP requests such as GET, POST, DELETE, etc, and also make their own 404 pages. The need for putting your public(HTML, CSS, Javascript) files on another server for them to handle your request wasn't needed.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;NextJs also arrived&lt;/strong&gt;&lt;br&gt;
NextJS is a JavaScript framework that is built on top of React and is designed to make it easy to create server-side rendered web applications. It provides a number of features and tools that make it easier to develop and deploy SSR applications, including automatic code splitting (Code splitting is a technique in which a large codebase is divided into smaller, more manageable chunks or bundles), optimized performance, and serverless deployment options. Using NextJS allows developers to create universal applications that can be rendered on both the server and the client, making it easier to build and maintain web applications.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;SSG&lt;/strong&gt;&lt;br&gt;
SSG stands for Static Site Generation. As technology continued to advance, NextJS also arrived, this technology supports static site Generation. What this means is that whenever you create a static website with nextJS and you host it, when a client makes a request to the URL of the website, NextJS is going to generate the public files(HTML, CSS, JAVASCRIPT) which will then be sent to the client for rendering. Unlike how it was done in the beginning, this time you won't write the public files yourself, you will write in NextJS (NB: NextJs is not a language. This is just an expression) and it will be compiled into public files and rendered by the client.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;SSR&lt;/strong&gt;&lt;br&gt;
SSR stands for Server Side Rendering. Server Side Rendering is a technique used in web development to render dynamic content on a website. With SSR, the server generates the HTML for a web page and sends it to the client's web browser, which then displays the page to the user. This is in contrast to traditional client-side rendering, where the web browser downloads the Public files and other assets needed to render the page, and then generates the HTML on the client side. Let’s get this straight with server side rendering &lt;br&gt;
When the request is made to the server it then generates an HTML for the requested content and sends it as a response to the client. This makes it very fast and also allows the use of dynamic content such as user names for different people easy to render on a website. NextJs also supports server side generation.&lt;/p&gt;

</description>
      <category>motivation</category>
      <category>career</category>
    </item>
  </channel>
</rss>
