Discuss

Node.js Integration in Wappler

On this page

One of the most anticipated features is already here! Say hello to Node.js in Wappler!

Getting Started

To get started we need to create a project and select Node.js as a server technology.

Creata a new project

Click the Projects icon in the left sidebar:

Screenshot_1|690x419

Open the New Project tab (1) and add a new blank project (2):

Screenshot_2|690x419

Add a name to your project:

Screenshot_3|690x419

Create an empty folder on your hard drive and select it:

Screenshot_4|690x419

Open the Server Model menu:

Screenshot_5|690x419

And select NodeJS:

Screenshot_6|690x419

Click Save:

Screenshot_7|690x419

Installing the required packages

When you create your project, you will see a confirmation dialog asking you to install the required Node.js packages. Click Yes:

Screenshot_8|690x419

The Terminal opens you can see the progress of the Node packages installation:

Screenshot_9|690x419

You will see a notification, once the packages have been installed successfully:

Screenshot_10|690x419

Your local Node.js server is now started!

Managing Node.js server

You can manage your local server by using the toolbar. It allows you to Start, Restart and Kill the server:

Screenshot_11|690x419

You can also Install, Update or Clean Node packages:

Screenshot_2|690x419

Clicking the project settings button, you can see how's your Development target set up:

Screenshot_13|690x419

Setting up a Database Connection

In order to create a server action which uses data from your database, you need to set up a database connection for this target in the Database Manager first.

Create a database connection

Open the Database Manager panel:

Screenshot_3|690x419

Right click Database Connections and add new connection:

Screenshot_4|690x419

Add a name for your connection and click the Server Connect Connection button:

Screenshot_5|690x419

Select your database type and enter the connection details in order to connect to your database server:

Screenshot_6|690x419

You can test the connection. Click Save when you are done:

Screenshot_7|690x419

Use the database connection in server actions

Your database connection is now available in Server Connect, so you can select it in Server Connect.

Open the Server Connect panel:

Screenshot_1|690x419

Create a new Server Action and add a name for it. Right click its steps:

Screenshot_2|690x419

And add a new Database Connection step:

Screenshot_3|690x419

Then you will see your database connection in the dropdown and you can select it:

Screenshot_4|690x419

Site structure

With Node.js your site structure is as follows.

Your site public files like html pages, css files, js plugins are located in the public folder:

Screenshot_7|690x418

The actions are located in the app/api folder

Screenshot_8|690x418

Routing

Routing is supported out of the box with the Node.js server model. You can easily create routes for your website pages without configuring anything or setting up additional options. You can directly create a new route in the Routing Panel:

Screenshot_9|690x418

Select your html file:

Screenshot_10|690x418

And enter the route path:

Screenshot_11|690x418

And you are done!