PREVIEW: Node.js Integration in Wappler

NOTE: This feature is still a beta, so it may have some small issues! Please make sure to report any issue you find so we can fix it for the official Wappler 3.0 release

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:

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

Add a name to your project:

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

Open the Server Model menu:

And select NodeJS:

Click Save:

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:

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

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

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:

You can also Install, Update or Clean Node packages:

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

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:

Right click Database Connections and add new connection:

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

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

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

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:

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

And add a new Database Connection step:

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

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:

The actions are located in the app/api folder

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:

Select your html file:

And enter the route path:

And you are done!

Conclusion

Make sure to check the Node.js integration in Wappler and let us know if you find any issues!
Let us know what do you think :slight_smile:

8 Likes

What framework are you using if any?

We use Express and build our own Server Connect framework around it.
So you can use all the server connection actions and database connections.
Or plugin own :slight_smile:

3 Likes

Hey George, now that you added support for nodejs, do you plan to add support for static sites generators, a la next.js, in the last release they implemented incremental static generation, what do you think? Here is a demo https://reactions-demo.now.sh

1 Like

@George, congrats to you and the Wappler team on Node.js support…very cool!

My understanding of Wappler history is that Server Connect (php/asp) was originally a Dreamweaver plugin that was built out and improved over several years.

Approximately how long did it take you and the Wappler team to build Node.js support into Server Connect/Wappler?

Very excited this is here (althought still not sure what it all means but i believe I will need it in my app further down the road)

First issue though: I have downloaded the beta and followed instructions to set up new project.

I am not getting the ‘Node Packages Installed successfully’ notification and it does not appear to be running properly. This is my terminal:

If i do a system check it states that Node.JS is missing.

I went ahead and installed it manually and it now states that is installed, but it wont open in browser and doesn’t appear to be listening to port 3000 as per the default localhost.

This is the message when i try and test the target settings:

image

Try the following:

Delete the project in Projects
Delete the newly created folder
Re-do the Create New Project procedure.

I have a faint suspicien that an anti virus program may have stalled the initial creation.

Thanks @ben I’ll give that a shot… Could it also have something to do with previous MAMP/WAMP local servers I had set up (although no longer use)?

For anyone else wondering… I fixed it.

After a number of fresh un/reinstall, turns out I had turned off the experimental features option the other day.

Turned it back on and restarted Wappler and it is working.

2 Likes

image

3 Likes

A post was split to a new topic: Hosting of NodeJS sites

10 posts were split to a new topic: Using NodeJS to create an offline desktop application

@Teodor, would it be possible to add Docker to the above tutorial?

You already cover “setting up a database connection”, but that would only apply (I think) if you’re not using Docker since Docker creates the database and it’s connection automatically.

Also there is talk in the other node.js threads on this forum about node.js having the web server already built in (unlike php). So I’m not clear on how Docker fits in with node.js in Wappler because Docker tends to build the web server along with the database.

Adding a bit to this tutorial (or as a separate tutorial) about how to use node.js with Docker in Wappler would be helpful and much appreciated.

2 Likes

3 posts were split to a new topic: NodeJS on MacOS Catalina - giving warning on fsevenets.node

Docker integration is still under development and it is coming up in the next betas.

1 Like