Resources and Tips for Beginners to Wappler

Intro

This Guide

This will be about getting started with Wappler when coming from a non-coding background.

This isn’t a tutorial on how to make a site or anything (although those are linked), more talking about what’s involved and a general collection of resources I found useful. As a heads up, I am using ChatGPT to help with some of the explanations.

This will just cover the basics you NEED to know, assuming you are able to learn more advanced stuff as you go.

My Experience

Just thought I’d share generally where I am coming from so you can get a reference to if you are in a similar boat to me or not.

I started using Wappler about a half a way ago. I have no real coding experience, just what I picked up over time using things like WordPress and Bubble. I would describe web design/development as more of a hobby for me. I switched to Wappler because I got frustrated at always trying to find workarounds to simple problems in things like Bubble because they didn’t support it.

Currently, I have just about finished recreating an old WordPress website with a lot of added functionality as well as started work on a social media type project.

The front-end designing part of Wappler is very easy for me to use and understand and has little to no problems.

The database part was very easy after I watched Hyperbyte’s tutorial series (linked later on).

The one place I ran into some problems was when trying to deploy my website to Digital Ocean and get the domain and SSL working, but with help from the amazing community and Wappler team I was able to get it working.

One thing that is a bit too much for me right now is extensions (although I haven’t really given them a go yet). They allow you to add on to Wappler functionality, but you have to code these yourselves. There are some shared on the forum by other Wappler users, and I also think the Wappler team is working on improvements to this area.

One last thing as a heads up, I reference Digital Ocean quite a bit since it is what I use but feel free to use whatever works for you.

Terms to Know

Deploy - Simply means to publish. You are “deploying” your site from your computer to a target (usually a live server/webhost), so it is accessible to others.

Target - Refers to a specific environment or platform. For example, you might have different targets for development, testing, staging, and production. Each target has its own set of settings and configurations, such as database credentials, API keys, and URLs.

Framework - A pre-built set of components. By default, Wappler adds Bootstrap, Font Awesome, and Server Connect.

GIT - A version control system that allows you to keep track of changes to your code over time.

API - Application Programming Interface, is a set of protocols and tools for building software applications. It allows different software programs to communicate with each other.

Node.js - An open-source, cross-platform JavaScript runtime environment that executes JavaScript code outside of a browser. It is commonly used for server-side programming.

Express - A fast and minimalist web application framework for Node.js. It provides a set of features for building web applications and APIs, such as routing, middleware, and HTTP utilities.

JQuery - A fast, small, and feature-rich JavaScript library. It simplifies the process of writing complex JavaScript code and provides a wide range of functionalities to make web development easier and more efficient.

jQuery allows you to manipulate the HTML DOM, handle events, create animations, make AJAX requests, and much more with just a few lines of code.

Bootstrap - A popular front-end framework for building responsive, mobile-first web applications. It provides a set of pre-built components and styles that can be easily customized.

SSL - Secure Sockets Layer is a security technology that encrypts the data that is transmitted between a web browser and a web server. When you visit a website that uses SSL, the website’s URL starts with “https” instead of “http”, and a padlock icon appears in the address bar. Wappler supplies a system called “Traefik” to set up SSL.

Docker - A tool that helps developers build and run applications in a way that makes them easy to move around. It does this by packaging everything an application needs to run - like code and libraries - into a little box called a container. This container can then be moved between different computers and environments, without any changes needed. Docker makes it easier for developers to build, test, and deploy applications quickly and consistently, without worrying about compatibility issues.

For some more information and discussion see

Routes - Used to define the URL paths and the corresponding actions that should be taken when a user navigates to that particular URL. This could include displaying specific content, loading data from a database, or executing a server-side script.

Server Action - Perform a specific task or operation on the server-side. It can be used to handle requests from clients, interact with databases, manipulate data, and perform other server-side tasks. They can be organized into workflows to create more advanced functionality, such as user authentication, data processing, and web service integrations.

Workflows - A set of automated actions or sequences of events that execute in response to specific triggers. For example, a workflow could be created to send a confirmation email to a user after they have completed a form on a website. The workflow would trigger when the form is submitted, and it would include actions such as validating the form data, sending the confirmation email, and updating a database to record the form submission.

Droplet - A basic VPS from Digital Ocean. Just a fancy name for a server.

VPS - Virtual Private Server is a type of web hosting service that allows users to have their own virtual server environment on a physical server that is shared with other users. Essentially, a VPS provides users with more control and flexibility over their web hosting environment compared to shared hosting. Users can install their own operating system and software, configure their own settings, and have access to more resources such as CPU, RAM, and disk space. VPS hosting is commonly used by businesses and individuals who require more power and control than what shared hosting can offer, but do not require the full resources of a dedicated server.

HTTP Request - A message sent by a client (such as a web browser) to a server in order to request content or data. The request typically includes information about the resource being requested (such as a web page or a file), as well as any additional data required for the server to process the request. The server then sends a response back to the client, which may include the requested content, an error message, or other relevant information. The HTTP protocol is the primary method used for communicating between web clients and servers.
We will cover common HTTP request types later on.

Requirements to use Wappler

Basic Understanding of HTML and CSS

You just need to understand the basics. Things like padding, margin, borders, and alignment.

Basic Understanding of Bootstrap

Bootstrap is a way to design the front end of your website as well as make it responsive. It’s what you use to layout your website using things like containers, rows, and columns. It also lets you easily add things like cards and accordions. You can easily set up a theme with global colors and fonts. It also has lots of premade CSS classes to easily style with. It is kind of similar to a theme in WordPress, but you have a lot more freedom and control.

Two of the biggest things to properly understand is the
Grid system - https://getbootstrap.com/docs/5.0/layout/grid/
And
Breakpoints - https://getbootstrap.com/docs/5.0/layout/breakpoints/

Also, if you are looking at the Bootstrap site and getting a little worried, don’t be. All the complicated looking stuff like installing node packages, SASS, utilities, etc. are done for you with Wappler.

Basic Understanding of Databases

You just need to know simple things, like what a database is, what a table is, and things like that. If you are new to databases altogether, you can kind of think of a Database as a group of spreadsheets. A basic example of a database table would be a user table with columns for email, password, first name, and last name.

The most complicated part (it’s not very complicated) you will need to understand is CRUD/SCRUD (Create Read, Update, Delete, can also include Search which is similar to Read), which is one of the main ways to interact with your database. Video about the topic

One step further would be understanding joins, sub tables, and multi references. Video to explain those

Project Settings

Development Environment

When designing your site, you don’t want to have to pay for hosting and constantly upload your site to test it. So instead, you host the site locally on your computer. Your two main choices are Wappler Local Server and Docker.

I prefer Wappler Local Server for its ease of use, but Docker is more powerful and can host a database on your computer for you.

Server Model

This is what is going to run the backend of your website. Assuming you are using Wapplers built in tools you don’t need to know how to write the code or anything like that. I see most people using Node.js and it is what I use. Unless you have a specific reason, I would just use Node.

Database

Your choices are…

SQLite - A basic database that is best used for local development or mobile apps.

Custom(local) - You can use a database like MySQL on your own computer by installing something like WAMP.

Custom(external) - If you are hosting a database somewhere else you can connect to it.

Cloud Provider - For use with the resource manager.

Docker - If you set your development environment to Docker you can have Docker run a database like MySQL for you on your computer without having to mess around with WAMP.

Hosting

Web Hosting - cPanel

You may already be familiar with this method if you have previous sites you have hosted. You will have an interface to access everything related to the server, and you can upload your site with FTP. You can usually create a database on these as well(confirm?). Just make sure that the provider you chose supports FTP, Node.js, and your preferred database type.

VPS

With a VPS you are in charge of a lot more and have to do most things on your own. However, Wappler and Docker make this easy for you. You can connect to your VPS provider in Wappler’s resource manager and easily create servers and databases as well as deploy your site in a few clicks. The most common VPS I see is Digital Ocean, which is what I use.

Railway

You can easily upload your sites via GIT and create databases in a few clicks. Has a free tier. This is great for beginners or for small sites. For more info see

and

Google Firebase

You can get free hosting, but they do not allow any server-side languages which limits a lot of what you can do.

Also Look At

and

Text tutorial showing a Docker and Digital Ocean setup.

Video showing how to set up FTP and database on shared host (older Wappler version, using PHP)

Database Hosting

Docker

If you are using Docker locally you are able to deploy your database along with your website when you deploy to a place like Digital Ocean. Your Digital Ocean droplet would host both your website and database (this will increase the resources used).

Railway

You can easily create a database on Railway even with the free tier. You can then connect to it from Wappler.

Shared Hosting Database

Most shared hosting providers give you a cPanel that allows you to create databases.

VPS Providers

You can install a database on your VPS. Some come with one click installs so you don’t have to get into the command lines or anything.

Digital Ocean Managed Databases

You can buy a database cluster from Digital Ocean for $15 a month. This allows you to make multiple databases, so you can have a database for each of your sites in this one cluster rather than having to make and host a bunch of different databases. It is also managed meaning they handle things like the software and security.

Common HTTP Request Types

I find GET and POST to be what I use the most.

GET - Retrieves data from a server. When a browser sends a GET request, it is asking the server to send back a resource (a web page or data) that matches a specific URL. The data sent through a GET request is visible in the URL as a query string. Can also send variables with the request in order to do things like filter a database search.

POST - Submits data to be processed to a specified resource. When a browser sends a POST request, it is asking the server to accept the data enclosed in the request’s body and process it. Unlike GET, the data sent through a POST request is not visible in the URL. This is commonly used to send form data, file uploads, and other types of data.

In general, GET is used when you want to retrieve data from a server, and POST is used when you want to send data to a server for processing. However, both methods can be used for a variety of purposes depending on the specific requirements of a web application.

Also worth knowing.

PUT: Updates an existing resource on the server.

DELETE: Removes a resource from the server.

PATCH: Applies partial modifications to an existing resource.

For more information - https://www.w3schools.com/tags/ref_httpmethods.asp

Tips When Starting Out

Plan Ahead, Organize, and Double Check Spelling

This goes for server actions, database design, on page elements, etc. It is a lot easier if you plan everything ahead and properly organize it. In Wappler, if you change the name or location of an item you will have to manually edit most things that reference it in your project.

It is far better to spend a little bit of time planning ahead to save a lot of time down the line.

I personally use Figma for creating a rough draft of my frontend.

Use GIT

GIT can look a little confusing at first, but it is quite easy to use and very useful. The reason to use GIT is to store a copy of your site at various points. If you make a mistake, you can easily restore back to a save point. Think of it like system restore on a computer. You can do slightly more complicated things like have branches that you use if you want to test out a change.

I strongly suggest setting up GIT. It can be a lifesaver if you ever make a mistake.

SQLite

SQLite is great for designing your site locally, but you will probably want a different database for live. You can easily apply the structure of your SQLite database (the tables, columns, etc.) to your production database. The entries/data will not transfer over, however.

Don’t Overcomplicate Things

With all the power Wappler provides you may find yourself getting a little carried away trying to implement an idea. I just spent like 2 hours trying to make part of my text heading change and animate when it does. I was adding arrays and schedule components and more. Then I found out I could have just used “Typed Properties” and do all I wanted in 1 min.

Anyways, if you are trying to do something simple and are getting frustrated after adding like 50 components, take a step back and make sure you need to do it that way in the first place.

Resources and Troubleshooting

Documentation

To be honest, the Wappler documentation is a bit lacking but still very useful. It’s also a bit of a mess as it is in a few locations, and I think some things can only be found in one place.



Main Docs Page - https://docs.wappler.io/
I find these easiest to read but I think some of the docs on the forum are missing from here.

Community Forum Docs - https://community.wappler.io/c/docs
Docs as forum posts, I think these are the most extensive.

New Docs (work in progress) - https://docsdev.wappler.io/
Not done yet but is looking good and worth checking out.

YouTube

https://www.youtube.com/c/Wapplerio

Official channel which includes a great tutorial on how to make a full site by Hyperbytes, great mini tutorials by Ben which cover single topics, and recordings of the monthly meetups where people discuss everything Wappler.

Full Tutorials

Intro to Wappler/Creating a Community Portal Website - By @Hyperbytes - Wappler v5

Creating a Mobile App - By @Adetoyinbo1 - Wappler v5

Task Management App - By @Adetoyinbo1 - Wappler v4

PWA Boilerplate - By @Ben - Wappler v4

Creating a Blog - By @Hyperbytes - Wappler v4

Webinar on Using Wappler - By @Hyperbytes - Wappler v4

Short Tutorials - By @Ben - Wappler v4 and v5

All Playlists on the Wappler YouTube Channel
https://www.youtube.com/@Wapplerio/playlists

Getting Help on the Forum

The forum is the best place to get support for Wappler. Always search for your problem first as there is a good chance someone else had the same question/problem.

Try to avoid DMing users asking for help, start a topic. Since if you need help on a topic then it is likely someone else down the line may have the same problem and would find your topic useful.

Provide all related info. Describe what you are trying to achieve in detail, what project settings you are using, and any relevant screenshots or errors.

Screenshots should be uploaded using the “Upload” button for easier viewing.

Code should be pasted in between ``` for easy viewing. Example (add the third ` to the front)

``this is an error I got```

will look like

this is an error that I got

When possible, copy code rather than use screenshots.

You can find members of the team (Teodor, George, and Patrick) on the forums, usually during the week. They provide great help but are also busy developing Wappler so I would tend to avoid @ing them unless urgent, especially since there are so many other great Wappler members who can help you.

Using AI

The usefulness of AI can get a little exaggerated by some, but for simple questions it is very useful.

Make sure you let the AI know you are using Wappler and not hand coding.

You can try it at
https://chat.openai.com/

Other

Here is some great info if you are coming from Bubble.

Productivity Tips and Tricks (old post)

Feedback

Please start a new topic in the Wappler Community > Wappler General to leave a comment with any feedback, questions, things you would like to see added, etc.