RapDv - Creating a Web Framework for Fast and Scalable Development
In a world with countless JavaScript frameworks, I still managed to find a need for another one. RapDv is an attempt at creating a framework that allows for fast and scalable web development.
Reasons for creating RapDv
I’ve been developing software for over a decade now. I used to create mobile apps before getting into web development. One thing that I really like about mobile app development is that tooling, approach, and methodologies are all standardized.
You can create a mobile app, give it to another developer, and they will quickly know what is going on and how it works. On the web, it doesn’t always work like that. The development approach and methodologies used are vastly fragmented. I couldn’t find a single tool that would provide me with a fast, repeatable, and scalable way of creating Node.js web applications. For that reason, I created RapDv.
RapDv is an attempt to create a framework that will allow for fast, reliable, and repeatable development of web apps. An approach where web applications are more standardized, and it’s easy to switch between different RapDv projects, without the need to discover how it all works.
Why development speed matters
Whether you want to build a Minimum Viable Product (MVP) for your startup idea, or a new feature for an existing application, speed of development is crucial. It’s almost certain that you won’t get everything right at the first try. Therefore most likely you will need to talk to your app’s users and change a few things, maybe even pivot completely.
In such situations, speed of development is crucial and it might mean the difference between your project’s life and death, as usually projects have a limited development budget.
Why development scalability is important
As your application grows over time, it gets more and more complicated. Often it leads to a situation where it’s hard to add new features or modify existing functionality without breaking something.
As a result, development speed slows over time. It can significantly hinder your company's growth by not delivering new functionalities that users want and by introducing new bugs.
Therefore it’s crucial for your application to be built in a way that it will be possible to develop it effectively over long stretches of time.
RapDv solves this issue by using modular architecture, where independent modules don’t relate to one another. It also uses the composition pattern, where complex components are composed together via simple definitions, easily allowing us to see the big picture.
Used technologies
RapDv uses well-known and tested technologies:
- TypeScript for both server and client sides
- MongoDB as a database
- React as a template language
- Bootstrap for a front-end UI
Basic RapDv architecture
Architecture wise, RapDv is split into two sections: server and client side.
The server side is responsible for routing, rendering pages and responding to REST endpoint calls. It also handles the database connection.
The client side is quite light by default. It uses Bootstrap for styling, but that's it. There isn’t any built-in UI framework. By default, you can write in vanilla TypeScript.
Server side
All server side code resides in the server folder.
The entry point for the server-side logic is in the server/App.tsx. There you define all the application components and properties.
Let’s go through them one-by-one.
getBasicInfo - Here you define your application’s name, description, and theme color, visible on mobile devices.
initAuth - It’s a function used for initialization of authentication providers, e.g. AuthGoogle.
getPages - You can define here a list of all your app’s pages and REST endpoints.
getLayout - Define your application main layout, using React JSX syntax.
getErrorView - A default view for your application error screen
getRoles - By default, RapDv provides the following roles: Admin and User. If you have a need for more role types, you can define them here.
getStorage - Place for defining your application storage schema in MongoDB. It uses Mongoose types.
startRecurringTasks - Place for starting recurring tasks
addDatabaseEvolutions - Place for adding database evolutions
All remaining components are in folders next to App.tsx. In the pages folder, you can find all the page definitions. Each page is defined as its own independent class.
The template language used is a popular React JSX. It was chosen, because it allows for a modularization of the code. You can define each UI element as an independent component, and reuse them easily.
Base views are located in server/pages/base. You can adapt their ViewLayout and ViewError as needed, to get the desired page layout.
Client side
All client side code resides in the client folder.
The entry point for the client-side logic is in the client/App.tsx. There you define all the client logic, in vanilla TypeScript.
Despite using React on the backend, there is no built-in UI framework on the front-end. It’s done this way, to make the website as lightweight and fast as possible.
If you wish, you can still add React yourself and easily hydrate views generated by the back-end.
There is, however a way to add logic to each page separately, as described below in the Add a client-side logic section.
To build the client-side code in development run npm run build-dev.
The final build will be put in the /dist folder.
Before pushing your code to production, remember to run npm run build-prod for an optimized build.
New application setup
If you are starting a new project, the easiest way is to fork:
If you want, you can also start with a more comprehensive application:
For the development environment setup, the process will look as follows. The commands below are meant to be used in your Linux or macOS terminal window.
1. Clone the chosen repository into your project
git clone git@github.com:RapDv-com/rapdv-starter-app.git my-app
The application uses Node.js. If you don’t have it installed, then you should do it now. How to install Node.js.
2. Go to the app folder and install all dependencies
cd my-app
npm install
3. Initialize RapDv submodule
git submodule init
git submodule update
4. Start a MongoDB database.Â
It’s used for storing the application data. If you use Docker you can start it with:
docker run -d --name mongo -p 27017:27017 mongo:latest
5. Create .env file
cp .env.example .env
Those variables should work with your local MongoDB as they are.
6. Start the application with
npm run start-dev
7. Your app should be running on
http://localhost:3000
How to add a page
Adding a page to your application is a three step process.
1. Add your page content to the back-end
To do this, create a new TypeScript file in server/pages.
For example, file: MyPage.tsx
import React, { ReactNode } from "react"
export class MyPage {
public static render = async (): Promise<ReactNode> => (
<>
<div>My Amazing Page!</div>
</>
)
}2. Define your page route in server/App.tsx, in the getPages method.
For example:
this.addRoute("/my-page", ReqType.Get, MyPage.render, "My Page", "This is my amazing page", [Role.Guest])As seen above, you need to define a request type, your page content, title, description and restrictions on who can visit it.
3. Optional. Add a client-side logic
If you need logic on the client side, you can do it in the following way.
a) Add <PageId>landing-page</PageId> in the back-end view, so that it will be possible to identify when it’s rendered.
b) In client/pages add a new page logic, for example: PageLanding.ts. Make sure to specify the same id in getPageId.
export class PageLanding implements ClientPage {
getPageId = (): string => "landing-page"
execute = (): void => {
alert("Hello world!")
}
onPageClose = (): void => {}
}c) Connect client-side page logic to the app in client/App.tsx. Example:
const pages: Array<ClientPage> = []
pages.push(new PageLanding())
const app = new AppClient()
app.start(pages)
d) Rebuild the client code with npm run build-dev
How to add an endpoint
In a similar fashion to a page, you can add any type of a REST endpoint. To do so, just follow the steps below.
1. Add your endpoint to the back-end
To do this, create a new TypeScript file in server/api.
For example, file: MyApi.tsx
import { Response, NextFunction } from "express"
import { RapDvApp } from "../../submodules/rapdv/server/RapDvApp"
import { Request } from "../../submodules/rapdv/server/server/Request"
import { HttpStatus } from "../../submodules/rapdv/server/network/HttpStatus"
export class MyApi {
public static get = async (req: Request, res: Response, next: NextFunction, app: RapDvApp) => {
res.status(HttpStatus.OK)
res.send("Hello world from API!")
}
}2. Define your endpoint route in server/App.tsx, in the getPages method.
For example:
this.addEndpoint("/my-api", ReqType.Get, MyApi.get)As seen above, you need to define a route, request type and your endpoint logic.
Once you run npm run start-dev, you should be able to test your newly added endpoint.
Start app in the development mode
Once your application is set up, according to the steps above, you can start it with the following command:
npm run start-dev
In order to build client-side code, and rebuild it on any change, run in another window:
npm run build-dev
You can also just use a single command that runs simultaneously the two commands from the above with:
npm start
Deployment to production
There are countless ways to deploy your Node.js application to production. For the purpose of this article, I suggest going with the self-hosted VPS route. Virtual Private Servers are very affordable and available from almost every hosting provider.
The easiest setup would include:
1. Start MongoDB database on the VPS
For this, you can follow the guide: How to Install MongoDB Community Edition
2. Install Node.js environment
The best way to do this is by using nvm, the Node Version Manager.
You can find how to install it in its official documentation
Once you have nvm ready, you can now install the latest long-term support Node.js version with:
nvm install --lts
nvm use --lts
3. Install pm2Â for your app continuous process management.
In order to make sure that your application process is running continuously, we will use pm2. To install it run:
npm install pm2 -g
To always start the application on reboot:
pm2 startup
4. Create a client-side production build
To make sure your client-side files are as small and compact as possible, run in your RapDv project folder:
npm run build-prod
You can then commit created files, so it will be easier to deploy them.
5. Set up your application and start it via pm2
You will need to set up your application on your server, just like you would on your local machine.
a) Clone git repo locally and make sure that you are on the right branch. On Ubuntu the best path to use for your application would be var/www/<my-app>.
cd var/www
git clone <my-application-git-url>.git
b) Install dependencies and RapDv submodule in your project folder
npm install
git submodule init
git submodule update
c) Set correct values in your .env file
d) It’s time to start your application!
You can do this with:
pm2 start 'cd /var/www/<my-app>; npm run start-prod' --name "my-app"
pm2 save
Just make sure to set the correct name and path to your actual project.
At this point your application should be running on the port that you specified in the .env file.
To see your application’s logs run pm2 logs my-app.
6. Run an SSL proxy in front of your application, in order to connect it to your domain
I recommend using Caddy for getting a secure HTTPS connection to your website. It can also provide you with a free SSL certificate for your domain.
You can find the Caddy installation instructions here.
Once you have it installed, you can connect your application to your domain by using Caddyfile below. If you are on Ubuntu, then you should place it in /etc/caddy/Caddyfile
mydomain.com {
reverse_proxy localhost:3000
}Once you set your Caddyfile, on Ubuntu you just need to run:
service caddy reload
7. Connect your domain DNS to your server
To fully finish your website setup, in your DNS provider, add an A record that points to your server’s IP address.
That should conclude your deployment setup!
Summary
When building software, it’s important to iterate quickly and to test your assumptions against real-world usage. RapDv gives you an edge in this regard, by providing you with a modern Node.js framework that structures your application code for faster, more efficient web development.
RapDv uses well-known and tested technologies like Node.js, TypeScript, React for templates and Bootstrap for your application UI. It also stores data in MongoDB.
Your application code gets divided into two sections: server and client sides. Making it clear which logic runs where.
In order to see the application's big picture, you just need to visit the server/App.tsx file. From there you can navigate through all used components in order to dive deeper into the implementation details.
Similarly, to view the main logic on the client side, you just need to visit the client/App.tsx file.
When it comes to starting a new project, currently you can choose from two templates:
A simpler, smaller code-base:
A more advanced initial implementation:
When it comes to running RapDv applications, they follow the common Node.js pattern. In order to start your application in the development mode, just make sure that all dependencies are installed with:
npm install
git submodule init
git submodule update
After that, you can start your app with:
npm start
As for running your application in production, you just need to rebuild your client-side code for optimized size and speed with:
npm run build-prod
After that you can start your application with:
npm run start-prod
I hope that you will enjoy building your applications with RapDv!