Node.js App Step-by-Step Guide for Frontend Developers
App development is the process of creating software applications that run on mobile devices, such as smartphones and tablets. These apps can be native, which means they are built specifically for a particular platform or device, or they can be cross-platform, which means they can run on multiple platforms or devices. App development typically involves a combination of front-end and back-end development.
Node.js is a popular choice for app development because it allows developers to use the same language (JavaScript) on the server-side and the client-side, which can make the development process more efficient and seamless. Additionally, Node.js has a rich ecosystem of third-party packages and libraries that are specifically designed for building app back-ends.
One of the key advantages of using Node.js for app development is that it allows developers to share code and modules between the front-end and back-end, which can make the development process more efficient and consistent. Additionally, the active Node.js community provides a wealth of resources and third-party packages to help with building and deploying apps.
Also read:
In this article, I’m going to show you an easy way to get started in Node.js app development using an open-source tool called Amplication. Amplication is a flexible open-source Node.js app development platform that helps you build a production-ready Node.js backend without wasting time on repetitive coding.
I will show you how to use Amplication as your backend to store e-commerce products. Then, I will show you how you can create a backend service, an entity for your service, and how you can sync your code to GitHub. I will also show you how to test the project locally, access the Admin UI, and make a request to the REST API endpoint.
Setting Up
Before we proceed, we need to sign up for an account on the Amplication website. Once you are signed up and logged in, you will be redirected to your dashboard. On your dashboard, you have to create a new project and give it a name. In my case, I called the project “myProject”.
Once the project has been created, select it and click on the “Add resource” button. Select “service” to add a new service resource to this project.
Once the service resource has been added, you will see the resource right below the project settings.
Now we are ready to sync our code to our GitHub repository.
Getting Ready to Sync to GitHub
If you look at the bottom of the page, you should see a link that says “Connect to GitHub”. Click on this link, and it will take you to your project configuration page, where you will connect your GitHub repository to your project.
If you don’t have a GitHub repository for this project, create one and initialize it with at least a readme file. Now go back and select the repository you created, and you should be able to see the connected repository at the bottom of your project.
We have to switch to the service resource we created earlier before creating an entity. Click on the project configuration dropdown and then click “service” to switch to the service resource.
Creating a New Entity
Now, we have to create an entity for our project. An Entity is a schema for our database. Remember that we are dealing with the backend of our project now. This means that when we create an entity, we automatically create a blueprint of our database.
Entity creation is fairly common when building applications. You can create each entity as its own component, pushing them to a platform such as Bit so that they can be used and reused across different applications.
If I am building an e-commerce platform, I will need an entity that will be used to store, update, and delete the products.
To create an entity, click on the Entities tab and click on the “Add Entity” button.
Add a name for your entity and click on “Create Entity”. Once the entity has been created, select it to go to the next page, where you can customize it.
A schema is a blueprint of our database. So, we have to add fields to our entity that will help us add/modify a product, the product type, and the amount of it ready to be sold to the end user.
In the field section, enter the name of your field and choose if you want to make its data unique, if you want to make it a required field, and if you want to make it searchable.
Making a field unique will prevent the field from having duplicate values. For example, I don’t want my products to have duplicate names, so I will toggle the option of the product name field to make it unique.
Now, we need another field for the product type and the last for the number of products left to be sold. If you look at the field for the number of products left to be sold, you will see a dropdown where you can choose the data type of the field.
Select a whole number and enter the minimum and maximum values.
Next, we go to validating data models with Amplication.
The purpose of validating data models is to ensure that the data being stored and manipulated by an application conforms to the rules and constraints that have been set by the developers. This can help to prevent data inconsistencies and errors, and ensure that the application is working with clean and reliable data.
This feature of Amplication helps us validate our fields to prevent storing invalid data. The data type “whole number” we selected makes the stock field accept only whole numbers or digits that do not have a decimal attached to them. This means we can only provide values that are whole numbers.
Now we are ready to sync our code to GitHub
Syncing to GitHub
If you look at the right part of the page, you should see a textbox for adding a commit message and a button below it that says “commit changes & build”.
Add a commit message and click on the button below it when you’re done.
Once you commit your changes, an Amplication bot connected to your project repository pushes the code, creates a new branch, and opens a pull request. Now all you have to do is visit the repository, click on the pull request to open it, and merge it with the base branch.
Testing Project
To test this project locally, you’ll need to have at least NodeJS version 16 installed on your machine, NPM & Docker. Open the code editor of your choice (VS Code is used in this tutorial) and clone the GitHub repository containing your Amplication project. Then, in your terminal, change the current directory to the folder and follow the process below to fire up the server.
npm i
npm run docker:db
npm run db:init
npm startOnce the server has been fired up, you should see something like this on your terminal.
This means we are ready to make a request to our API.
Making First Request
After building your backend service with Amplication, it ships your project with an Admin UI you can use to access the available endpoints of your API. To preview this UI, visit this URL in your browser:
You should see a page like this.
Before we can access our product endpoints, we need to make a request that signs us in and retrieves an access token.
Amplication secures your API with JWT. This means that before we can make a request, we need to have a valid authorization header. Our API cannot be accessed by any API client without a valid authorization header.
To get an access token, click on the Auth tab and click on the button “try it out”. Then, log in with the data; username(admin), password(admin).
If successful, you should see the following response.
Now that we have an access token, we need to include it in the header of any request we make to our product endpoints.
Still, in the Admin UI, we have to authorize requests to the products endpoint using the access token we just retrieved.
To authorize requests, copy the value of the access token (without the strings), then click on “authorize”, and paste in the value you had copied. Once you are done, click on the authorize button and close the modal.
Creating a New Product
Now that we have authorized requests to our products endpoint, we have to make a request to one of them to create a new product.
Navigate to the products tab. You should see an endpoint that accepts a POST request.
To send data to this endpoint, we need to provide the product name, product type, and stock. Click on “try it out”, provide the data, and click on “execute”.
If you see the following, you have successfully added a product.
You can add other products and perform other CRUD operations on them.
Fetch API
Alternatively, you can use the Fetch API in JavaScript to make requests to your endpoint instead of using the Admin UI.
Since the product endpoints are secured with an authorization header, we need to create a function that logs us in to retrieve an access token.
let accessToken = “”
//retrieve access token
async function getToken() {
const res = await fetch(“http://localhost:3000/api/login", {
method: “post”,
headers: {
“mode”: “cors”,
“Content-Type”: “application/json”
},
body: JSON.stringify({
username: “admin”,
password: “admin”
})
})
return await res.json()
}
//call the function
getToken().then(data => {
//set the token
accessToken = data.accessToken
})Now that we have retrieved the access token, we need to make a “GET” request to the endpoint to retrieve the products we had added earlier.
let products = [];
//retrieve access token
async function getProducts() {
const res = await fetch(“http://localhost:3000/api/products", {
method: “get”,
headers: {
“mode”: “cors”,
“Content-Type”: “application/json”,
“Authorization” : `Bearer ${accessToken}`
}
})
return await res.json()
}
//call the function
getProducts().then(data => {
products = data;
console.log(products)
})When you run the code on your browser’s console, you should see the products you added earlier logged on to your console.
You can go ahead and make a request to other endpoints if you want to retrieve, update, or delete a product.
Make sure to take note of their associated HTTP verbs (PATCH, DELETE).
In as much as the endpoints are secured with an authorization header, we can equally create & setup user roles for users in our application. This will prevent unauthorized users from adding or modifying our product.
Wrapping Up
In this article, we discussed front-end development in Node.js, which involves using server-side rendering to generate the initial HTML for a page, and then using JavaScript to add interactivity and dynamic functionality.
Node.js is a popular choice for front-end development because it allows developers to use the same language on the server and the client, which can make the development process more efficient and seamless. I also showed you how to create an application in Node.js using an open-source tool.
Thank you for reading. I hope you found this tutorial easy to follow and instructional.
Bonus: Build Node.js apps with reusable components like Lego
Bit’s open-source tool help 250,000+ devs to build apps with components.
Turn any UI, feature, or page into a reusable component — and share it across your applications. It’s easier to collaborate and build faster.
Split apps into components to make app development easier, and enjoy the best experience for the workflows you want:
Split apps into components to make app development easier, and enjoy the best experience for the workflows you want:
