Docker: Local Databases

Wappler General Need Help
25

Sort of correct in what you are saying but just to clarify, NodeJS can be used without Docker, but if you want Docker as well as NodeJS together then this is sort of the setup.

  1. Before even opening Wappler, make sure you have the latest NodeJS installed (The LTS) version
  2. Next make sure you have Docker for Desktop installed, but for me I just installed it, and did nothing inside it at all.
  3. Open Wappler, create a new project, make sure to choose
    Hosting Type: Docker Hosting
    Server Model: NodeJS
  4. Your new project will open, just hit Yes, which does all the initial setup for you.
  5. Click the Gear icon for your Target, in this first General section, i leave all the defaults but make sure the
    User Uploads Folder: /public/whatever-folder-you-want-without-spaces
  6. Under the Targets section, I leave my Development target as it is except
    Node Version: 14
    Database: MariaDB (Leave all default except)
    MariaDB Version 10.5.x
    No Sample Data: Toggle ON
    Then I go alter passwords if I want, otherwise just use what they give, and I change my database name.
  7. Save

At this point I like to just add a title to the open page and save and Deploy, if I do not do this then the Database so far just says “Unable to Connect” as it needs to set the DB into the container etc, and can not do that without deploying it.
At this stage, after clicking refresh a few times in the database manager, it does connect, just be patient before trying to adjust, it does connect, although it’s empty because you removed the sample data.

You now have a perfectly setup local environment with Docker and NodeJS and can see your website by going to http://localhost:8100/, you can connect to your database using any third party tool such as Navicat, by entering the details as per the Database settings for the Target. When you have your database changed inside the third party tool then you need to refresh in Wappler Database Manager to get the changes.
It seems like a lot but realistically, its all very automated, no WAMP/MAMP etc.

Taking this live, well that is also pretty simple when you know the steps.
What you need is a Domain Name, like you always did, a DNS provider OR Hosting provider to point your records out to wherever you want, and a Cloud based Docker host like Digital Ocean.

Open your Wappler targets and add a second target, Add a (I will only list what i change)

  1. Target Name: MyWebsiteRemote
  2. Usage: Development
  3. Connection: Remote
  4. In the Docker Remote section Click Manage, then the + button
  5. Name: MyWebsiteRemoteServer
  6. Provider: Digital Ocean
  7. Set your Region, Size, OS (I left mine all default but turned off IPv6)
  8. Click Create Account, click Sign Up, and do your initial setup, or sign in to an existing account
  9. If you did the Sign Up, then when you get Let's Build Something, then click Skip this and go to the control panel
  10. Click API, then under Tokens/Keys, click Generate New Token, enter a token name and make sure it is Read and Write, then click Generate Token, copy the generated Token, and paste that into Wappler, and click Create.
  11. Wait for it to complete, it can take some time, you can see progress in the Digital Ocean dashboard, but it takes a bit longer in Wappler.
    I will admit mine often fails with Error creating machine: Error running provisioning: Unable to verify the Docker daemon is listening: Maximum number of retries (10) exceeded
    Error Creating Docker Machine!
    I just click Back To List, hit the refresh button, and my machine appears with an error State, I select it, and click Restart The Docker Machine and after a little while it says restarted successfully and the state changes to running.
    I do not install Portainer or Traefil at this stage, until I have my Domain setup. I just click Select
  12. Back in the Wappler Targets window now, the Host and Port and Cert Folders have all been set.
    The Web Section i change to Node Version: 14
    The Database section I change MariaDB Version: 10.5.x and No Sample Data: Toggle ON
  13. Click Save

Back in the main Wappler App, I now do a last deploy with my target still as local, then switch to the remote target and it asks to Deploy again, this time to Digital Ocean. Wait a moment for this to complete.

In my web browser I can now see my site at http://localhost:8100/ and the IPv4 address provided by Digital Ocean in the control panel, or by clicking the View in Browser from Wappler.

I now have a local as well as a remote Docker/NodeJS all set and working, I can connect to both databases, through Wappler by clicking refresh a few times, also click db and then refresh, sometimes that helps. I can connect to both databases in Navicat as well.
My only issue I have had at this stage is getting my entire database to replicate to Docker, this is my own fault because I do most of my database design though Navicat or the likes, and Wappler keeps no record of these changes, so I can not open the Changes area and just push the latest change. I assume if I fully used Wappler, then this would be the best way.

In Wappler with my local target set i refresh my database to get all the latest alterations made, then next to the deploy button I click the icon, save database data and structure this saves a file inside the hidden .wappler folder then I used Navicat on the remote database and imported the file from myWebsite/.wappler/targets/Development/db_init/db_save.sql which I am pretty sure is not the intended way, but it worked for me.

Almost at the end now, we want to make this all work on a real domain name, in my Digital Ocean dashboard I click the three dots to the right of my docker, select Add a Domain, I enter the domain name, click Add Domain.

  1. I enter @ in the first Hostname box, and select my Docker in the Will Direct To box, Create Record
  2. I enter * in the first Hostname box, and select my Docker in the Will Direct To box, Create Record

This creates 2 A records as well as the 3 existing ns (name server) records, take note of all the NS records as we are going to use them in the next step.

In my DNS providers website, I went to manage my DNS for a particular domain, and all I did was change the nameservers from their own to the Digital Ocean ones, for me I did not even need to add the IP addresses, just the ns1… ns2… ns3… etc.

Saved, waited a while, watching https://dnschecker.org/ till I could see everything was the correct IP address.

Back in Wappler I now want to use the real Domain Name, so I open my targets, select the remote one pointing to Digital Ocean, and make the following changes.
DO NOT change the DOCKER REMOTE portion, this is good as is with the IP Address

  1. Web Server URL: https://www.example.com
  2. Port: LEAVE BLANK

Now you can use the DOCKER REMOTE section, click Manage, select your Docker Machine, click the spanner icon Manage Services, you want to install both of these regarless if you only need one, or Wappler will fail, so just do both services.

  1. Portainer
    Dashboard URL: portainer.example.com
  2. Traefik
    Let’s Encrypt Email: you@example.com
    Dashboard: ON
    Secure Dashboard: ON
    User: whatever-username-you-want
    Password: whatever-password-you-want
    Dashboard URL: traefik.example.com

Apply

Obviously wherever I use example.com change to the real URL of your domain. Portainer is a nice way to manage your Docker containers, and Traefik is how you get the https SSL Certificate all working.

Once Successful, save all and close back to Wappler,

  1. In your web browser open portainer.example.com and in the login screen enter the details you created earlier for the username and password. Click Login
  2. In your web browser open traefik.example.com, there is no login for this.

If all seems to be working at this point, try your website with the new https address

  1. In your browser go to https://www.example.com
    It should show your webpage with no warnings about security certificates not being valid etc.

And thats it, start to finish
Docker, NodeJS, Database, local and remote, hosting, DNS, SSL, and you can continue with your development.

Hope this helps.

12 Likes