Let’s develop a NodeJS WEBAPP

Now that we have Node running, we going to create NodeJS app using express-generator. Express-generator is a scaffolding tool that creates a skeleton for express-driven sites. In your command prompt, type the following:

> npm install -g express-generator

So let’s use this installed generator to create the scaffolding for a website. In your command prompt, type the following.

Let’s open http://localhost:3000 in browser where you will see a welcome to Express page.
Our basic WebApp up and running. Now open Visual Studio Code editor and open our WebApp
And select our WebApp folder “nodeArangoWebApp”
By default express-generator use jade view engine but in our WebApp we going to use ejs view engine as it has simple html syntax. More info about ejs you can find at http://www.embeddedjs.com/

To use ejs we need to install ejs in our WebApp, return to your command prompt and navigate to our WebApp directory and type this:

> npm install ejs --save

– – save : save ejs package as our WebApp dependency if you see package.json you can see ejs in dependencies section
Now we have installed ejs in our WebApp, to use ejs as view engine we need to change app.js file. Open app.js file and modify as follow:
From:
To:
Also we need to change all default jade view to ejs view. Delete all jade view from view and create new folder “partials” in view folder (nodeArangoWebApp\views\partials) and create following two ejs view (head.ejs and footer.ejs)

error.ejs

Save that file, now our WebApp converted to ejs format. So let’s restart our node server, go to your command prompt, kill your server if it’s still running from way back before. Then type:
(Remember your command prompt must navigate to our WebApp directory if not please do it.)

> npm start

And open url (http://localhost:3000/) in browser

Create ArangoDB database

If you not install ArangoDB, you can install from https://www.arangodb.com/download/
Open ArangoDB’s user interface and create database “nodeArangoWebAppDB” with nopassword. (Leave password textbox empty)
Now you can see nodeArangoWebAppDB in database list and open it by clicking on it.
Now we have database. We need to create collection to store our WebApp user data. Click collection on top menu and create collection “User”.

Now our WebApp’s database and collection has been created we need to put some user data in collection. To add collection, we going to use “AQL Editor” tool. Open “AQL Editor” from top menu and type following AQL query and click “Execute”

Now our WebApp backend has been created and ready to use in our WebApp. To use ArangoDB we need to install ArangoDB NodeJS (ArangoJS) package to interact with Database. Let’s install ArangoJS, type the following cmd to your command prompt:
(Kill your server if it’s still running and your command prompt must navigate to our WebApp directory if not please do it.)

It’s always good practice to separate remote service from route or controller so we can call anywhere in our WebApp. Let’s create “service” Folder (nodeArangoWebApp\service) and “DataServices.js” in it. And add following code to DataServices.js

Now our getAllusers service has been created so we can use this into WebApp to display all users. To achieve that we need to create route and view. By default our WebApp has userd.js route so we going to use that and create new view “userlist.ejs”.
Open users.js to editor and add following code in GET user listing.

Our WebApp now pulling data from the DB and spitting it out onto a web page. Great!!
Now we can extend our WebApp functionality to create, update and delete users.
To achieve that we need to modify our WebApp services, route and view for each operation.