DEV Community: Mariam Adeyemi

Connect Your Node.js Project to MySQL Database Locally

Mariam Adeyemi — Wed, 04 Jan 2023 10:39:17 +0000

There is more than one way to connect MySQL database to node.js and in this tutorial, we are going use one of the easy ways to do it. With the use of XAMPP and mysql2 package, our connection will be set up in no time. No worries if you don't know these two, we are going to do this step by step.

Install Xampp

Xampp is a control panel or cross-platform server that enables developers to create and test their programs locally. Xampp is going to provide the GUI(Graphical User Interface) of our database. It will allow us to create databases and the data we need for our project.

Visit the apachefriends website to download the suitable xampp for your operating system. Follow all the necessary procedures and install it. After the successful installation, open the program:

Start the first two modules on the panel(Apache and MySQL).

This will start the SQL database locally which you can access on a localhost server. Open your browser and go to localhost/phpmyadmin/.

To create a new database, click on the new button at the side panel.

Give your database a new name and click create. It should show up in the side panel after it has been successfully created. You can access it and go on to create your tables manually or import a SQL file with your data.

Set Up Connection

For this, we will make use of the mysql2 package. Install mysql2 to your project with npm install mysql2. You should read the mysql2 documentation to learn more about how to work with the package.

In your model folder, create a connection.js file and copy the code to establish a connection to your database:

const mysql = require('mysql2');
const connection = mysql.createConnection({
    host: "localhost",
    user: "root",
    password: '', //your password. You could leave it like this, for now
    database: 'database_name'
})

connection.connect((err)=>console.log(err || 'Database Connected'))

module.exports = connection.promise()

You can go on to import the connection function(please be aware that it is asynchronous) anywhere in your project you want to query your database.

And that's it, our node.js project is connected to MySQL database in few steps.

React.js Roadmap for Beginners

Mariam Adeyemi — Mon, 02 Jan 2023 20:34:45 +0000

React.js is a JavaScript library useful for building fast and scalable user interfaces. It is one of the most popular JavaScript libraries and easy to get up and running with.

Before you learn React, it is advisable to have a good grasp of JavaScript especially ES6, and the concept of Object Oriented Programming.

The Roadmap

Node

The first step is to download and install node on your local system.

Set up

To get up and running with react, you need to get a copy of the react library. You could do this with npx create-react-app or use alternatives like vite.js.

JSX

JSX is JavaScript HTML. It allows us to write HTML in JavaScript, making its syntax look similar to HTML. It is important to get familiar with this language to start working with the react library.

Components (functional and class)

Everything in React is made up of components, which makes them important to this framework. This is one of the most important React fundamentals you should start with. React has built-in components but you can also create custom components to build your app user interface. Components could either be functional or class-based.

Props and State

Props and state are other important concepts needed for your components. You can pass properties(props) to your components to render differently based on the values of the properties.

State, on the other hand, is any data that components want to use to render themselves. The setState() function is used to render your state.

You should learn these two and also when to use them.

Conditional Rendering

This is no different from conditional statements in JavaScript. If you can use if/else statements and ternary operators, you will have no problem with conditional rendering.

Component Lifecycle

This is another crucial concept in React you should learn about. React provides several lifecycle methods that are used to listen for changes in your component.

Basic Hooks(useState, useEffect)

Hooks are required to keep state in your function components. Hooks are functions that start with "use" and allow you to use various React features like tools for managing state and component lifecycles. As a beginner, you should start by learning how to use the useState and useEffect hooks.

Events

React event handling has some peculiar conventions, such as using camelCase for event names (onclick - onClick). You should also learn these.

Lists and arrays

With the power of JSX, you can create lists of elements by looping through an array. This is an interesting concept you should also know about.

Compositions vs Inheritance

These are object-oriented programming concepts. Inheritance occurs when a child class inherits properties from its parent class while composition describes a class that can refer to one or more objects of another class as instances rather than inheriting properties from a base class. You can use either of the two in React.

To conclude, these are the fundamentals of React to get you started with the library. It is advisable to learn and practice these concepts before moving to advanced ones.

Important Node.js Modules You Should Know

Mariam Adeyemi — Wed, 21 Dec 2022 14:44:59 +0000

Here are important node.js inbuilt modules that you can't avoid using whether as a beginner or experienced node.js developer.

Filesystem

Node.js filesystem allows you to work with files on your computer. There are several ways you can handle these files. You could create, read, write, update, delete, and rename a file. To work with the filesystem, the first to do is require it:

const fs = require ("fs");

The filesystem can be synchronous or asynchronous. To work with an asynchronous filesystem, require fs/promises

Create file

There is more than one way to do this:

fs.open() fs.writeFile() fs.appendFile()

Any of these methods will create a new file if it doesn't already exist and they take in the name of the file, the content, and a callback function.


fs.writeFile("data.txt", "Hello World", (err)=>{
if(err) throw err;
})

fs.open() is quite versatile as it takes a "flag" argument that indicates what you want to do with the file. "w" flag means the file is open for writing, and "r" means you want to read from the file. It works for creating a file because if the file indicated does not exist, it's going to be created.

Read a file

The method fs.readFile() or fs.read() is used to read from a file. This method takes the name of the file and a callback function.


const fs = require('fs');

function readFile(){
  await fs.readFile("data.txt", "utf-8" (err, data)=>{
    if (err) throw err;
     console.log(data);
})
}

Delete

To delete a file use the fs.unlink() method.
fs.unlink("data.txt")

Rename

Use fs.rename(). It takes in the name of the file then the new name followed by a callback function.

fs.rename("data.txt", "newData.txt", (err)=>{
  if (err) throw err;
  console.log('rename successful!')
})

Path

To work with files on your system, it is important to be able to know the path correctly. There are two types of file paths.

Absolute path
Relative path

An absolute path specifies the location of a file or directory from the root or (/) directory.

C: \desktop\tuts\data.txt

Relative path defines the path as related to the present working directory.

data.txt

Node.js has an inbuilt path module that makes it easier to work with file paths. To use it, the first thing is to require it

const path = require("path")

This gives you access to different path methods and the most common you will mostly use/come across arepath.resolve and path.join

The path.resolve() method resolves a sequence of paths or path segments into an absolute path. The given path fragments are processed from right to left. If no path segments are passed, path.resolve() will return the absolute path of the current working directory.

path.join

The path.join() method joins all given path segments together and then normalizes the resulting path.

path.dirname

The path.dirname()method returns the directory name of a path, this is especially useful for knowing the directory where a file is saved.

path.extname()

This method returns the file extension from the path. It starts from the last period character (.) to the end of the given string/path. If there is no period, an empty string is returned.

path.extname('index.html');
// Returns: '.html'

Stream

Stream is another inbuilt module in Node.js that is used for working with streaming data. It is great for saving time and memory. When the data to be written or read in a file is huge, it is better to use streams. An example is uploading/downloading/streaming videos. Streams are readable and writable. You can have access to the stream module by requiring it.

const stream = require('node:stream');
The methods fs.createReadStream()and fs.createWriteStream() are used to stream data to be written or read.

http.createServer(function(req, res)=>{
 const stream = fs.createReadStream("data.json");
 stream.pipe(res); //streams the data inside the json file
}).listen(5000)

Events

As a JavaScript developer, you should know about events triggering and have worked with this concept more than you can count. Events refer to every action that occurs on a computer. Objects in Node.js can fire events, like the readStream object fires events when opening and closing a file.

You can work with events in Node.js too as it has a built-in events module. You first require it to start creating, firing, or listening for your events. Also, events are instances of EventEmitter object, so you must create an EventEmitter object too to have access to its properties and methods.

const events = require('events');
const eventEmitter = new events.EventEmitter();

The EventEmitter object allows you to assign event handlers to your own events. We use the emit() method to fire an event. Here is an example of how to work with events:

let event = new events.eventEmitter();

event.on('event-name', function (data) {
  console.log('You just did something:', data);
});

event.emit('event-name');

The above code initialized a new instance of the eventEmitter object. The "on" method is used to create an event while the "emit" method fires the event.

HTTP

Hyper Text Transfer Protocol (HTTP) is used to communicate between the web server and browser among other things. It is used for transmitting hypermedia documents like HTML. Node.js has an inbuilt http module that is meant to tap into the power of HTTP. Node.js HTTP module is essentially used to create servers. We require it like this:

const http = require('http');
To create an HTTP server in node.js, we use the createServer() method. The syntax looks like this:

const http = require('http');

http.createServer((req, res)=>{
  res.end('Hello World'); 
}).listen(5000);

The createServer() method takes a function that handles the request and response between the server and the user. The listen() method indicates the port where the server can be accessed (5000).

How To Set Up An Express Server in a Nodejs Project

Mariam Adeyemi — Fri, 09 Dec 2022 16:14:57 +0000

Node.js is an open-source server environment powered by JavaScript. It is an excellent choice for JavaScript developers and diehard JavaScript fans who do not want to switch to another language to program the backend of an application.

Express is a lightweight and adaptable Node.js framework that offers a comprehensive set of features for developing web and mobile applications. It makes setting up a node server easier and faster.

Setting up an express server is incredibly easy and straightforward. We are going to do it in a few steps and with even less code.

Step One: Install Node

The first step in this project is to install Node.js. Don't forget that this is a node.js project so this is an important part of our project that cannot be skipped. Head to the node website to download the latest version of node. You can skip this step if you have it already installed or run npm -v in the terminal to check the version of the node you have on your operating system.

Step Two: Install Express

Now let's install express into our project. Create a new folder for your project then open the folder in VSCode or any code editor/IDE of your choice. Create a new js file, you can name it "server.js". Open the terminal and run the command:

npm install express

This command will initialize npm and install the necessary packages and dependencies. After it has been successfully installed, you should have three new files. A node module folder and two JSON files. If you check the package.json file, you will see something like this

{
  "dependencies": {
    "express": "^4.18.2",
   }
}

This tracks the dependencies your project has access to. In the next step, we are going to add a new dependency and it will show in this file.

Recommended Step: Install Nodemon

This step is optional but necessary for efficiency. Nodemon helps to restart the server every time you save any changes. It prevents the tiresome process of restarting it yourself every time. So, let's go back to our terminal to install nodemon. Run the command:

npm install -g nodemon

The -g tag means globally and it enables you to use nodemon in all your projects, not just the current one.

Step Three: Require Express

Let's go back to our server.js file to finish setting up our express server. The first thing to do is to require express:

const express = require("express");
const app = express();

The above code required the express package and assigned the express function to a constant named "app". The variable name can be anything but it is conventional to name it like that.

Step Four: Set Up Port

Next, we going to set up our port to run our server locally.

const PORT = 3000;
app.listen(PORT, ()=>{
   console.log(`Server is running at http://localhost:${port}`)
})

The above code saved the port to a variable and called the "listen" method from our express framework. The listen method takes a single argument and an optional callback function. We passed the port number as the argument and called a function that will log something to the console once the server is set up successfully.

Step Five: Run It

Run the command nodemon server.js in the terminal and if there is no mistake in your code, you should see the console.log message and your server running at the implied port. Congratulations! you have successfully set up your express server in a few steps.

Bonus: Hello World

If we visit our port address in the browser, the page is going to show up blank. It is because our newly set up server is not sending any response for the page to display. We can solve this by routing. Let's make a simple GET request to the home route and send back a "Hello World" response.

Warning! The position of the following code is very important, you should make sure it comes after our first two codes that initialized the express framework and before the port listening code.

app.get("/", (req, res)=>{
   res.send("Hello World");
})

The code makes a GET request to the home route which is represented with "/" and sends a string ("Hello World") as a response. The get method takes an argument and a callback function. The callback function has two parameters: the request and response. We will talk more about routing and other concepts in later posts. Stay tuned for more.

Until next time.