Prelude (ensure node is running in the virtual environment)
It is important to note that after downloading the node-v14.18.2-linux-x64.tar.gz (for Linux) on your system, it is stored in the local storage, most likely the Downloads folder. so, you will have to copy the zipped file and paste it into your virtual directory as you did for the starter kit (https://richgodsblog.hashnode.dev/packagejs-how-to-set-up-on-windows-10-pro-wsl) before extracting on the terminal with the code snippet:
If you miss this vital step, whatever you run on your terminal won't work as you won't be able to launch the starter kit.
Launching the starter kit
Locate the directory of the starter kit in your Windows Subsystem for Linux (WSL) when you connect to WSL. Once connected and the folder appears on the sidebar, open a new terminal and run this command: npm run serve
Once it runs, you should see something like this:
Then enter that URL http://localhost:40082 (at the bottom of the highlighted box above) in your browser and the dashboard loads:
Create your API
click on the plus sign to create a new API, and give the API a name:
Name your new API "to do app" and click on "insert". After doing that, click the newly created API to open it.
Creating a new table
After opening your API, click on the first plus sign(box-shaped) to create a table and call it "tasks".
Click "insert" when you're done and you will be redirected to the dashboard, your task table has been created.
Creating a new primary key
click on task 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 (field name) to "id" and click "insert".
Creating the details textarea
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".
Creating a new action
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.
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 manner 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.
Deploying the API
Now it's time to choose how and where to deploy the API. Click on 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.
Deploying the API
We will have to deploy the API before customizing the user interface
Ensure to keep the builder server running while undergoing the process of deploying the API.
So while the builder server is still running, open a new window on your code editor, then go ahead to navigate to your downloads folder on your local storage and unzip the "to-do-app_development.zip" file downloaded earlier. Then open that directory in your WSL terminal as you did for the starter kit.
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.
Then you will be asked to set your environment variables, it's best to use the default values. Set [DEF_API_URL]> to basically 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.
For the remaining options, just press enter till you get to the end, although some options come in prefilled, keep tapping Enter key
when you get to this point, the API has been successfully deployed 😁🥳
Now we can proceed to create our UI.
You can always refer to the YouTube tutorial and watch all instructions step-by-step for clarification (https://t.co/2vkShOT7U6?ssr=true)
Generating the User Interface
After launching the reactjs starter kit and opening the URL http://localhost:40082 in your browser to view the dashboard. You'll click on the Interfaces tab and click the plus sign
You'll then name your new UI "to do app interface" or anything you like. Once that's taken care of, you'll connect your UI to your API by clicking on the plus sign you see here:
Connecting the UI to your API
The API was launched on http://127.0.0.1:49000 and its contract can be accessed when you add /openapi.json making the entire URL http://127.0.0.1:49000/openapi.json. Be sure to copy the contract, you'll need it to complete this step.
Clicking on that plus sign takes you to this page where you have to set the "Remote API name..." to "tasks" and pasting the contract in the text area that reads "Remote contract (JSON)..." and click "Insert".
Deploying the UI
Remember the procedure to deploy? it's pretty much the same thing as we did for the API. The name you'll set is still "development" or any name you decide to call it and select what "Bundle type" you want to make use of, in this case I'll be using ReactJS(reactjs-local v1), then click "Insert".
You can choose other bundle versions, the reactjs-local is the default and automatically updates when new versions are released. The versioned (-v1) bundles are locked to the specific bundle versions, I chose -v1. You can now proceed to deploy the current version of the UI just as you did the API.
Launching the UI
Navigate to your downloads folder, and unzip the "to-do-app-interface_development.zip" file. Then open that directory in your WSL terminal as you did for the starter kit and API, also ensure to keep the builder server running while undergoing the process of deploying the UI as you did in the API.
Check the README.md file and you'll see instructions to `cd` into this directory, then run `npm install`, then run `npm run deploy` to deploy your application. try `npm cache clean --force` if there are any problems.
Now, you'll be asked to set your environment variables, it's best to use the default values. Setting [DEF_UI_URL]> to pretty much any port you'd like, but I used http://127.0.0.1:9000 and that's the URL your UI will launch on. And we will set [DEF_SERVICES_URL_FOR_APIS_REMOTE_TASKS]> to the URL we launched our API, which is http://127.0.0.1:49000/openapi.json. After that, you can press enter until you see this:
And your UI will be launched and open up in your browser automatically on port 9000.
You just successfully made your to-do app😀🥳📝