Discuss

Creating a NodeJS project with Docker

On this page
With the new Wappler 3.0 support for NodeJS projects it is realy easy to develop and deploy them with Docker.

In this guide we will show you how easy is to setup a NodeJS project with Docker in Wappler

Creating NodeJS Project

Open the Project Manager and choose to create a new project. Let start with a template so our project isn't empty. But if you wish you can also choose to start with blank. image|690x445

As project options choose a nice project name (1), select a local project folder (2), choose Docker Hosting for using Docker (3) and as Server Model select NodeJS (4)

image|550x266

After you click "save" your project will be directly created and you will be asked if you want to launch the docker for it: image|450x220

Just choose "yes" and your docker project is up and running!

image|690x407

You can press refresh Design View or press F12 to view it live in the browser!

Adding Databases

Per default just a web server is added for your NodeJS project in Docker. But you can easily add databases you wish to use.

Just go to the project options and choose targets:

image|477x96

There you can choose the database you want to use:

image|679x500

In our example we choose MySQL. Let's keep the defaults and just save:

image|676x500

Click on Deploy to activate the new service:

image|426x98

and your database server is launched together with your web server! image|560x101

Connecting to your Database with the Database Manager

So now that you have a database up and running, you want to connect to it with the Database Manager. So open it:

image|295x367

Amazing magic happens! The Database Manager already knows about your database! And it is connected and ready to use:

image|257x500

Using the Database in Server Connect

Let's go to Server Connect and make an action to query our database.

image|425x403

Add a new server action: image|427x381

As steps for the action add the database connection first:

image|330x500

In its properties - choose the ready to go connection:

image|366x464

Add a database query step after it image|567x198

Go to its Query Builder: image|267x500

Select the Cars table as this is what we want to display and click save. image|690x405

Then save also your server action:

image|364x308

and you are done! You can test you Server Action in the browser:

image|424x320

You will see the ourput of the query:

image|172x500

Remote deploy with Docker

So suppose we are done with our development and want to create a remote server for our Docker deployment.

A great option for this is Digital Ocean. We can do it all from within Wappler.

Create a new "Docker Machine" on Digital Ocean:

Just open the project settings and go to the targets, there click on the [ + ] to add a new target:

image|674x500

Give it a nice name and choose Connect to be "remote"

image|690x249

As we don't yet have a server (a droplet in Digital Ocean terms) - we need to make a new one. So click on "Manage"

image|690x318

Initially you don't have any servers as Docker Machines so we want to create a new one. image|624x500

Give it a good name (without spaces) and choose Digital Ocean as provider: image|686x412

Go to the control panel of Digital Ocean and get yourself an API key, image|156x500

image|690x140

then you can just paste it:

image|690x390

Choose any region for your server and hit "create" , the server creation will kick in:

image|635x500

It might take a minite or two to complete:

image|690x187

image|690x201

Docker is being fully installed for your on the remote server and everything is getting prepared

image|690x198

When all done, choose to go back to the list:

image|690x200

You will see your new server up and running! Just select it (1) and click on the "select" button:

image|621x499

Then the new server is selected as remote docker server for you live target:

image|690x344

So just save the new target options:

image|671x500

All the new options will be saved and your new Live target will be available. So let's select it:

image|520x128

As it your docker site is not deployed yet there - let do so:

image|629x112

Asll the needed services will be automatically downloaded and installed. You can expand the bottom panel to see what is going on:

image|690x249

And hooray! Success - your site is fully live!

image|690x283

You can just press F12 in design view to open it!

and there you go your site is live and kicking!

image|395x500