PACKAGEJS: Building a To-do app API - reactjs starter kit

Part 1

ยท

5 min read

Introduction

Hello there! It's great to hear from you again. I'm glad you found my previous blog on setting up PackageJS on Windows helpful.

In my latest endeavor, I've built a to-do app and styled it using TailwindCSS. However, I realized that the YouTube tutorial for building the app was based on the vuejs starter kit. So, in this blog, I'm excited to guide you through the step-by-step process of building the to-do app API using the reactjs starter kit. It's going to be an exciting journey, and I can't wait to share it with you. So, let's dive in and get started on this project together!

Building the To-do app

To begin, locate the directory of the starter kit in your Windows Subsystem for Linux (WSL) terminal. Take a moment to ensure that you have a Node version greater than 14 installed. Once you're there, run this command: npm run serve

Once it starts up, you should see something like this:

The next thing would be to enter that URL http://localhost:40082 in your browser and you'll see the dashboard:

PackageJS dashboard

Once you've done that, click on the plus sign to create a new API. You'll be met with this:

Name your new API "to do app" and click on "insert". After doing that, you will have to open your newly created API.

After opening your API, click on the first plus sign to create a table and call it "tasks".

Click "insert" when you're done and you will be redirected to the dashboard and see that your table has been created.

Once, you've created your table, click on "tasks" and a plus sign will show up beneath it, click on it to create a new "primary key" and select the option "Time-based unique id".

After that, set its name to "id" and click "insert".

The next thing to do is create a textarea field to store searchable information about the tasks. To do that, click the plus sign beside "id".

Once you click on it, a list of options will be displayed, scroll down to "Custom textarea".

On the next page, set the "Field name" to "details" and check the "is this field required?" checkbox.

Also, scroll down and set the "Maximum byte length" to any number above 4000. When you're done, click "insert".

To create actions, click on this plus sign showing the alt text "Create a new action" when you hover the mouse.

You'll then see a list of options, select "Standard action" to create actions with the core "tasks" table as its only path component.

An actions path defines parent-child relationships between tables, automatically creating cross-reference tables in your database to manage those one-to-one, one-to-many, and many-to-many relationships.

Initially, you'll see this after selecting "Standard action":

Click the "T" to select the "tasks" table as the only path component. After selecting it, you should see something like this:

Now you can go ahead to click "Next" and you'll be taken to the next page where you will select the method you want that action to perform. You can start with any method of choice, but I'll start with the "INSERT" method.

Once you've selected your method, click "insert" and you will be redirected to the dashboard and see that your action has been created:

Because the "ID" is able to be automatically generated, we can exclude it from our "INSERT" action's expected "POST" parameters. To do this, click on the action and you'll see these appear below it:

After that, click on the plus sign beside the dollar sign and you'll be sent to this page where you will select the "Exclude a field from this form" option.

Once you select it, you will enter "id" as the "Field name" and click "insert".

You'll be redirected to the dashboard and "id" has been removed from the "INSERT" action's expected "POST" parameters. Hover on "id" and you'll see what I mean.

You can now proceed to create the SEARCH, UPDATE, DELETE, and SELECT actions the same way.

Now it's time to choose how and where to deploy the API. Click on the version number v0.0.0:

Then create a new deployment:

After doing so, you will set the "Deployment name..." to anything, but I used "development". You will also have to select the "Bundle type". You can choose either the "OneFile + Unix (onefile-unix-local)" or "OneFile + Unix (onefile-unix-local-V1)" and click "Insert".

You'll be taken back to this page and once you click on "development (onefile-unix-local)" and select "Current version" , your API will be automatically zipped and downloaded to your "Downloads" folder.

You will have to launch your API before you can auto-generate and customize your UI.

Navigate to your downloads folder, and unzip the "to-do-list-app_development.zip" file. Then open that directory in your Windows Subsystem for Linux terminal as you did for the starter kit and make sure you are using Node version 14 or higher.

Check the README.md file and you'll see instructions to run npm install to install all packages for your project. Press Enter and wait for them to install, then run npm run deploy to deploy your application.

Now, you'll be asked to set your environment variables, it's best to use the default values. Setting [DEF_API_URL]> to pretty much any port between 20000 and 60000, but I use http://127.0.0.1:49000 and that's the URL your API will launch on. Stick to one okay? Don't go crazy with this so you don't forget which port number you set it to ๐Ÿ˜….

For the remaining options, you can just press enter until you see this:

Congratulations! Your API is up and running smoothly. Take a moment to celebrate this achievement!

In the next blog, I'll be your guide, providing a step-by-step tutorial on how to effortlessly generate your own interface automatically. Stay tuned for more exciting insights and let's continue this amazing journey together!