Supercharging your NodeJS server development with Visual Backend
Tags: node, api, webdev, javascript
Published: 2023-08-29 02:00:56

You’re working on your third backend project in 2 months — setting up your project structure, creating the same old starter files, sifting through a bit of documentation here and there to initialise your database, but all you really want to do is just get down to the core functions that will make up your REST API.

Or maybe you git cloned an awesome template and didn’t have to do all that. But still, every time you create a new route, or connect a new service (e.g. MySQL), you spend the first few minutes writing, copying and pasting boilerplate code, a few minutes that you’ll never be able to get back.

That was me for the past 6 months, which is why I created Visual Backend, the desktop app for backend development. This app allows you to create routes, connect to services, etc. with the click of a button, and handles all of the tedious & repetitive bits such as boilerplate set up and file creation meaning now, you only need to focus on writing your REST functions.

## Let’s see how this looks like
You can download Visual Backend from https://visual-backend.com (or request early access). Once you have created an account, you can go ahead and create your first project, which will bring you to a screen like this:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/50cd2p50ptyu5q0meko1.png)

## Creating a route
To create a route, all you need to do is hit that little file-add icon in the Routes section. Then you can choose to create a GROUP, GET or POST endpoint. Once that is created, you can click on the newly created route which will open up the editor where you can work on your function straight away. I think I did all that in less than 10 seconds.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pot4ozbgzs4s3iv65cip.png)

## Running your server (locally & in the cloud)

To run your server locally, simply open the terminal with ⌘ + T. This terminal is very much like any other. When you run the app (with ⌘ + Shift + R), console logs and errors will appear here. But enough with the boring stuff, let’s talk about hosting.

With Visual Backend, we help you host your project in the cloud immediately. No need for Heroku, Digital Ocean or AWS. To deploy / update your project, simply click on the Hosting section in the sidebar, and then click on ‘Deploy’. Once your build is complete, clicking ‘Copy Endpoint’ will return your server’s URL and viola, you’re done (or test it with Postman to really make sure)!

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zc8v12ax6mis23f22bx9.png)


## Connecting to services

The last feature which we focused on is automating the repetitive actions when using external services, such as MongoDB. Normally, you would have to write your connection string to your .env file, create your initialisation function, etc. With Visual Backend, all that is done in one click and you can immediately start working on your specific functions right away.

On the app, click on the ‘+’ sign next to the Modules section in the sidebar, then select the ‘MongoDB’ module. All you need to do now is enter your connection string and select your default database.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xmfg22972rppvk9k5to6.png)

Once done, a new mongo section will appear under the modules tab, where you can then start writing your database functions. As seen above, your mongo functions are grouped according to the collections in your database. Also, every function will have access to the global variables mongoCli and defaultDb, which allow you to access the databases and collections in your MongoDB cluster. Happy querying!

> P.S. MongoDB is just the first of many services which we hope to make more efficient, so let us know through the email at the end of this article which services you’d like to see next on the app!

## Using your db functions
To use your db functions, simply click ⌘ + I when your editor is open to open up a function search screen where you can click and import these functions into the editor.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ytvxc9ed14b40tlzg63q.png)

## What’s next?
From machine language to assembly language to high level languages, the way that we program computers have always been, and will be evolving. I’ve always wondered what will be next, which maybe was in some ways an impetus for me to build this application.

Anyways, Visual Backend is new, and so I look forward to hearing everyone’s feedback and adding the features that you want. Maybe one day, Visual Backend will be your go to platform for backend development. Email me at johnyeocx@visual-backend.com to share your questions, insights, feature requests, or even criticism.