Creating a Web App Using Node.js MySQL - Getting Started

In this tutorial, we’ll focus on creating a web application using Node.js and MySQL. Node.js is a rapidly growing technology and is widely used in web application development nowadays. The most preferred database solution for a Node.js application is the NoSQL database. But sometimes a SQL database may be a better solution depending on your requirements.

The web application would work something like this:

  1. The User signs into the application,
  2. They see the list of tasks they’ve already created,
  3. They have an option to create a new task and an option to log out from the application.
  4. That’s pretty much it!

You can find the full source code from this node.js and mysql tutorial on GitHub. Feel free to put down you thoughts, suggestions and corrections in the comments below.

Installing the Requisite Technologies

Let’s get started by downloading and installing Node.js in your development environment. Once node has been installed, you should have a version of NPM installed. NPM is the node package manager which we’ll be using for installing different packages.

Create a directory for the project called NodeTaskApp. Inside the project directory, we’ll create a file called package.json which will have all the information related to the project, like the project name, repository, project dependencies etc. We don’t need to create this file manually. NPM provides an option to automatically create the package.json file. So navigate to the project directory and create the package.json file.

cd NodeTaskApp
npm init

npm init command would initialize the package.json file and prompt the user to enter the details. Fill in the relevant details and at the end you should be able to view the package.json file in your project directory. Here is how my package.json file looks like:

{
  "name": "NodeTaskApp",
  "version": "1.0.0",
  "description": "Node.js and MySQL app",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/jay3dec/NodeTaskApp"
  },
  "author": "Jay",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/jay3dec/NodeTaskApp/issues"
  },
  "homepage": "https://github.com/jay3dec/NodeTaskApp"
}

Another very big advantage of the package.json file is that when some one wants to build your project, he doesn’t have to bother about each and every dependency in your project. Using npm install, all the dependencies can be installed automatically from the package.json file.

Moving on, we’ll be using express, a web framework for creating Node.js web applications. So navigate to the project directory and install express framework.

cd NodeTaskApp
npm install express --save

Make a note of the --save option. It is done to save the express dependency in the package.json file.

Setting Up Node App

We are going to create a basic node app using express framework that we had installed. Then we’ll bind the app to a local port address. So create a file called app.js and add the following code:

var express = require('express');
var app = express();

// Binding express app to port 3000
app.listen(3000,function(){
    console.log('Node server running @ http://localhost:3000')
});

Try to run the app.js file using Node.

# start the node app
node app.js

You should be above to view the message Node server running @ http://localhost:3000 in the terminal console. Next, let’s add a default view for our application. We’ll make use of the bootstrap templates to set up a quick user interface for our application. So, install bootstrap in our project directory.

# install bootstrap
npm install bootstrap --save

Create a folder called style in the project directory and a file called cover.css.

Inside the project directory, create a folder called templates and add file called home.html.

In the app.js file, define the static folder paths so that it gets resolved in the node application.

app.use('/node_modules',  express.static(__dirname + '/node_modules'));

app.use('/style',  express.static(__dirname + '/style'));

Now let’s define the default route for our application.

app.get('/',function(req,res){
    res.sendFile('home.html',{'root': __dirname + '/templates'});
})

As seen in the above code, when the / route is requested the home.html page is rendered. Save the above changes and restart the server. Point browser URL to http://localhost:3000 and you should be able to view the home page.

[caption id=“attachment_346” align=“aligncenter” width=“872”]Creating a Web App Using Node.js & MySQL – Getting Started Creating a Web App Using Node.js & MySQL – Getting Started[/caption]

Similarly, define the routes to show the sign in page and the sign up page in app.js.

app.get('/showSignInPage',function(req,res){
    res.sendFile('signin.html',{'root': __dirname + '/templates'});
})

app.get('/showSignUpPage',function(req,res){
  res.sendFile('signup.html',{'root':__dirname + '/templates'})
})

Include the signin.html and signup.html page in the templates folder of the project. Now, on clicking the SignIn & SignUp links in the home page, it should navigate to the respective pages.

Conclusion

In this part of the creating a web app using Node.js and MySQL tutorial series, we saw how to get started with creating a Node app. In the next part of the tutorial, we’ll see how to connect to MySQL database from Node.js and try to implement the User Sign In feature.

Any feature request for the Node.js and MySQL tutorial serious are most welcome.

Do let us know your thoughts, corrections or any suggestions in the comments below.