Node.js Integration in Wappler

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!

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

Quick question. When using Node.js what is the extension you would use? When I use php it is *.php. When I use html only, it is *.html or *.htm. And what is the naming for index.html when using Node.js.

1 Like

@BruceSchueller I had the same questions here particularly because when you create a node project the first file it creates is the index.ejs and puts it in a views folder and not “Public”

Public is for static assets.
Views for templates(ejs).

Check ExpressJS and EJS documentation to get a better understanding how these two folders work.

2 Likes

Had a look at the documentation and a little over my head at this stage so I signed up for a Udemy Node.js / Express course. Finally figured out how to fix the routing syntax, but conscious I just want to learn what I have to to build in Wappler, just don’t have the time to deep dive. I assume at some stage Wappler will make this all clearer.

1 Like

Yes. It takes a bit of time and learning(ExpressJS, EJS and Nodejs). But less than you imagine. All the pieces start to fall in their place in cascade once you understand the basics. Wappler does abstract you from that. But during Beta it’s important to know the basics or the feedback you provide won’t be as useful.

Express will serve files in public without preprocessing. So if you ask for a jpeg you will get the browser view for an image. If you ask for html and css the same. You would normally store in public css, images, client js, etc

In views, express will preprocess the files(similar to php). Any ejs templating code will be evaluated before being rendered to the browser. In views is where you define your layouts and partials(.ejs files) which are the core of your app.

2 Likes