Shorten go-live time for Node.js applications with Amplication
Developing any application, in any technology, is a complex process. We have to think about a lot of things like architecture, what technologies to use, which modules, how to properly maintain it, what helper libraries or third parties we need to use, and the list goes on.
Here we’re going to focus specifically on Node.js applications. As we know by now, Node.js uses single-threaded, asynchronous, and non-blocking architecture and due to these characteristics, it offers a lot of flexibility, options, and libraries that we can use out of the box to develop any application that we need. Another benefit is that it can be used for all steps of the development lifecycle of an application, front end, and back end.
With everything that’s said above, we can imagine the huge number of options/tools/libraries and frameworks that we have frontend and backend included. Some of these tools/frameworks are Express.js, NestJS, Fastify, Socket.IO, React, Vue.js, AdminJS, TypeORM, Sequelize, Prisma, EJS, NunJucks, and the list can go on.
With all these options available is so hard and complicated to choose which one is the best for our needs. Also, even when we have chosen the stack of frameworks and libraries that we need, we’ll have to develop our application on top of this stack and this is time that’s not spent on developing our business but actually developing the application to provide features for our business.
This is quite critical, especially in a startup that’s aiming to grow at a fast pace.
Even though all the tools and frameworks mentioned above speed up our development process a lot, it’s important to further reduce this time so that we can serve more to the needs of our business.
This is where Amplication comes into our help. Amplication takes away the burden of choosing our stack and it provides us with a predefined stack with a lot of boilerplate code which is ready to use and adapt to our needs.
What is Amplication?
Amplication is an open-source tool for implementing the frontend as well as the backend, including REST API and GraphQL, of our application in minutes through a user interface. What needs to be done by engineers is to design the data models needed for the application to work from the UI and all the code for our application is generated automatically, fully functional, and with an integrated admin UI.
Amplication also provides us with a Dockerfile for both, admin UI and backend server, which we can already use to deploy our application in any cloud provider of our choice.
Regarding the stack that’s used, frontend uses the following libraries:
- Material UI for icons and everything related to UI guidelines
- React, React Admin, React Dom, and React Scripts for rendering all the data and UI-related components
- Sass to write custom style and compile it according to our needs
- Apollo Client to query the GraphQL API and fetch the necessary data
Everything rendered on React Admin UI is fetched from the server using GraphQL if we have chosen to generate the GraphQL API in the project settings that we’ll see later in this article. If not, it’ll use REST API.
For the backend, the stack is as follows:
- NestJS framework and all the necessary libraries like config, core, graphql, jwt, passport, swagger, etc
- Prisma as an ORM for dealing with the PostgreSQL database layer and migrations
- Passport for authentication and dealing with tokens
- Jest for testing
As we see, all the tools that are used are quite popular and very well maintained in the Node.js community.
One thing that’s worth mentioning is that all the code is generated in TypeScript and is fully customizable in case we want to implement additional features that might not be yet supported by Amplication.
Working with Amplication
We can easily start using Amplication either in the cloud or by cloning the repository and running it locally. Here we’re going to showcase how to work with the cloud version.
First and foremost, we need to log in with our GitHub account.
Once we’re logged in we’ll be presented with the following page where we can choose if we want to generate the REST API and GraphQL API for our backend as well as the Admin UI for the frontend. We also have the option to start a project from scratch or use the already preconfigured order management project.
In our case, for this demo, I’ll choose the order management project and we’ll generate both, GraphQL and REST API as well as Admin UI.
If we disable GraphQL, as mentioned before, the Admin UI will be generated using REST API and we can’t toggle the enable/disable anymore. If we disable also REST API, the Admin UI will be disabled as well and we cannot enable it again until we enable GraphQL.
Once we click the create button, we’ll be introduced to the following UI. I’ll not dive too deep here since you can see the demo in the video that can be found below but I’ll give a short intro, On this UI we can see the tools that are going to be used, the entities section where we can go and manage our entities, the roles section where we can go and manage the roles that our users will have, sync with GitHub section which is very important and we need to connect to a repository where our code will be stored as well as the view code section where we can see our code once we have our first commit on GitHub.
Now the time has come, let’s showcase Amplication in action with our demo video.
Running our APP
Now that we have our app implemented and fully configured with all the features that we need through Amplication UI, it’s time to run it and see it in action.
As shown in the video, we have two folders created in our repository, one called admin-ui that will serve our UI and the other one called server which will run our GraphQL and REST API.
First, we need to run our server so that we have our API available for the UI to consume. There are several ways how to run the server but the easiest one is to go to the server directory and run the npm run compose:up command. This should start our server and make it possible for us to see the Swagger UI docs for REST API in this URL http://localhost:3000/api/ and GraphQL Playground in this URL http://localhost:3000/graphql.
Note: Make sure that the migrations are executed since the container that’s supposed to run the migrations might not work always depending on your local environment setup.
Now that the server is running, we can navigate to the admin-ui directory and run npm run start command to start our fronted and once it’s running we can access it in this URL http://localhost:3001/ if it’s not opened automatically in our browser.
We can log in with our default credentials, which are username admin and password admin, and start managing your data.
You can also refer to this documentation from Amplication itself on how to run the app.
Here is a quick demo of the admin UI and server in action.
Hope that you liked this article and find Amplication as useful as I :-)
If you want to get in touch with me, you can follow or reach out on any of my socials or through the contact form found on my personal site.
