If you ever tried any vibe-coding tool on the market you know they are mostly supercharged NodeJS code editor, full of pre-made components and often unable to really understand your existing code base.

We created AppJet for a simple reason: AI is now at a maturity point where it can realistic to use it as a real coding companion. Not just for crafting beautiful landing pages with Vue (AppJet still can do that) but as a real coding expert working alongside you to deliver clean and efficient code, no matter what you want to build or fix.

We are introducing today AppJet.ai: a vibe-coding expert integrated with GitHub with extended context searching capabilities, code understanding and deployment capabilities.

Our roadmap creating AppJet was simple:

• it has to be full-stack: we are extensively using Rust and Python and we wanted an agent able to work on that, manage databases and understand it,
• directly integrated with GitHub with an efficient code editor: no more commits, the agent works directly on a specific appjet branch,
• directly integrated with Qoddi: Of course we wanted our agent to be able to automatically deploy on our infrastructure,
• Easy to scale: with Supabase integration, your app and your database can scale to millions of users without breaking a sweat... or the bank,
• without any vendor lock-in: Since the beginning of Qoddi we are focused on making our solutions open to multi-cloud and making sure our clients can leave at any time: that's why they don't. We keep the same mantra with AppJet: your code is in your GitHub repository, you keep full ownership of it and can migrate to any other hosting solution at any time.

AppJet ships today with a Free tier including 15 messages with the conversational agent and unlimited deployments. Starter plan includes 150 messages starting a $20 USD per month with unlimited deployments, custom domain names etc..

Give AppJet a try and tell what you think! We hope you'll love it as much as we loved making it!

We're thrilled to announce the launch of our new lineup of GPU-powered instances, specifically tailored for researchers, developers, and the public interested in training and using large language models (LLMs) and chatbots. At Qoddi, we're committed to making AI and LLM research more accessible and affordable, and our new instances are designed to empower you without breaking the bank.

Why GPU-powered instances?

Artificial intelligence (AI) and machine learning (ML) technologies have made tremendous advancements in recent years. One of the most exciting areas of research is in natural language processing (NLP), specifically LLMs and chatbots, which have become increasingly sophisticated and capable of understanding and generating human-like text. However, training and deploying these models typically require significant GPU resources, which can be expensive and beyond the reach of many researchers, developers, and enthusiasts.

To help bridge this gap, our new lineup of GPU-powered instances delivers the computational power required to train, deploy, and utilize state-of-the-art LLMs and chatbots, all at a fraction of the cost of big cloud providers. Our instances come in a variety of sizes and capabilities to suit your specific needs, ensuring you can access the tools and resources you need without overpaying for unnecessary capacity.

Key benefits of Qoddi's GPU-powered instances

1. Affordability: Our goal is to democratize AI and LLM research by providing cost-effective access to powerful GPU resources. By offering competitive pricing, we are enabling individuals, academic researchers, and small businesses to leverage advanced AI capabilities without the financial burden associated with major cloud providers.
2. Scalability: Our new instances come in various sizes, ensuring you have the right resources to meet your needs. Whether you're starting with a small-scale project or diving into more extensive research, you can easily scale up or down as required.
3. Performance: Qoddi's GPU-powered instances are equipped with the latest NVIDIA Tesla A100 GPUs, which deliver outstanding performance in AI and ML workloads. With our high-performance infrastructure, you can rest assured that your projects will run smoothly and efficiently.
4. All Qoddi's features: GPU-powered instances are created inside the Qoddi's infrastructure with instant access to all your other apps inside the same project using our local secured network. You can choose to completely isolate your GPU-app from the Internet while keeping the connectivity with other apps (databases, management tools and more). Like any other Qoddi app, your GPU app launch and deploy in seconds and use dedicated builders and CI/CD tools.
5. Ease of use: Qoddi's platform is user-friendly and provides an intuitive interface for managing and deploying your instances. You can easily launch, monitor, and manage your GPU instances, allowing you to focus on your research and development instead of dealing with complex infrastructure issues.

Get started today!

We're excited to see how our GPU-powered instances will empower researchers and developers to create cutting-edge AI applications, LLMs, and chatbots. To get started, login to your Qoddi account and create your first GPU-powered app!

Visit our pricing page for more informations about Qoddi's GPU lineup.

Let's build the future of AI together!

There are numerous instances where a single buildpack falls short in app building, for instance when working on a NodeJS app with a PHP backend.

We are thrilled to announce the global and immediate availability of Multi-Buildpacks for all app sizes, including our Free tier.

The Multi-Buildpack feature allows you to:

• Combine multiple languages within a single final release,
• Specify and enforce the usage of a single buildpack over Qoddi's autodetection,
• Expedite the development process and deploy more intricate apps by merging web and worker apps into one release.

Alongside the introduction of multi-buildpacks, we're expanding support for Add-on buildpacks (such as APT, Static, or the newly introduced FFmpeg buildpacks). These buildpacks are designed to be compatible with the multi-buildpack feature, further enhancing your app's functionality.

In today's fast-paced development landscape, it is crucial for developers to have the right tools and resources at their disposal. Qoddi stands out as the ultimate solution for quickly and efficiently building code, ultimately saving both time and money when deploying apps and app features.

Here's why Qoddi is your top choice for app development:

1. Streamlined workflow: Qoddi offers a seamless experience by integrating with your existing development pipeline. This integration enables you to focus on writing code without worrying about managing infrastructure or other deployment complexities.
2. Scalable resources: Qoddi provides scalable resources that can be easily adjusted according to your app's needs. Whether you're just starting out or managing a high-traffic application, Qoddi ensures that you have the appropriate resources at your disposal.
3. Cost-effective: By offering a Free tier and a variety of affordable pricing options, Qoddi ensures that developers can access its powerful tools and services without breaking the bank. This cost-effectiveness allows you to invest more in other aspects of your business.
4. Continuous innovation: Qoddi is constantly evolving and improving its features, such as the newly released Multi-Buildpacks, to keep up with the ever-changing development landscape. This commitment to innovation ensures that you always have access to the latest tools and technologies.
5. Expert support: Qoddi's team of experts is available to assist you with any questions or concerns you may have, ensuring a smooth and trouble-free development experience.

We believe you'll appreciate our new Multi-Buildpack feature and welcome your feedback!

Environment variables are the best way to store variables like API keys, secrets and databases URLs. Until today you had to create and update Env. Variable manually for each app even if they are inside the same project and share the same credentials.

Today, we are launching Project-level Variables:

Project-level Variables are environment variables created at the project-level. You can create and consume an unlimited number of environment variable directly from your project main page. Project variables remain persistent after an app (or all apps) is deleted and can be shared to all apps inside the same project.

Let us know what you think about this new feature and if we can make it even better!

Mastodon recently became a popular decentralized alternative to Twitter and, more importantly, a way to own your part of a global social network.

Mastodon servers can interact with all other fediverse servers (including other Mastodon server). You don't have to own your Mastodon server to get started, you can even join the Mastodon of Qoddi. But, if you want to own your data or simply create a new community where you can decide on your own data governance and moderation, launching your own Mastodon server is the way to go.

Until now, deploying a Mastodon server seemed very complicated, requiring several servers, adjusting the configuration, and knowing about load balancing, SSL certificates, and more. Some one-click deploy solutions exist but are pretty much not scalable, meaning your Mastodon server will never be able to grow outside of the tiny VPS you installed it on at the beginning (you never know, you may have the next Twitter on your hands!).

Today, we're proud to launch a simple and automated way to deploy a complete Mastodon stack on Qoddi. The minimum cost for the complete stack is $30 per month (5 instances at $6 per month), and your stack can scale infinitely, thanks to Qoddi's exclusive technology.

Included with your Mastodon Stack

For $30 per month, you will get a complete Mastodon stack ready to be used in production:

• A complete Mastodon stack (5 apps including Postgres and Redis databases),
• Unlimited bandwidth (don't pay for Internet traffic!),
• Out of Site, Daily Backups (compliant with Mastodon covenant),
• SSL Certificate for your Mastodon domain provided by Let's Encrypt,
• Complete scalability option to grow your stack up to millions of daily users.

First month free?

For a limited time, you will get $100 free credits (valid one month) when you verify your Qoddi account with a valid credit card: more than enough to run a complete Mastodon stack for free during a whole month!

Check out our documentation and start your Mastodon account today!

Online resources of code teaching, tutorials, and e-learning program are invaluable resources for the tech community and needs to be recognized as a critical part of the future of tech.

In addition to that, specific programs or institutions like #WomenWhoCode or #100DaysofCode make a real difference in their communities and, through code, offers a better future to millions of people worldwide.

At Qoddi, we know that the infrastructure is a critical part of the learning process, and infrastructure must be accessible to everyone at the same pace as learning new technologies and programming languages.

Today we are launching a new program, similar to our student program, destined to help people currently learning code via a pre-approved structure or institution to use Qoddi's infrastructure for free without having to use a credit card to validate their account.

This new program includes:

• A $200 yearly credit, renewable up to 3 times, to use any of Qoddi's production services, including datastores, apps, and add-ons,
• No need to have a valid credit card on file to use Qoddi's services,

How to apply

To apply for this credit, please contact your code-teaching program or institution. They have a direct enrollment system provided by Qoddi to activate your account using a specific flow.

If the program or code-teaching structure doesn't participate in this program yet, please ask them to contact us to get started: it's completely free and quick.

At Qoddi, we are strong advocates and sponsors of open-source projects, and with the recent decision from Heroku to stop offering free plans (used by a lot of open-source developers), we felt the importance of having an alternative ready to keep those projects running.

Qoddi's infrastructure is compatible with most of Heroku's buildpacks and we wrote a guide to migrate a project from Heroku.

We understand that open source developers need features and options that may not be available in our generous free plan like:

• Custom domain names with SSL,
• Production-ready infrastructure to sustain the growth of the project,
• Ability to deploy Docker containers or apps that require more resources than our free plan.

If you are the developer of an open source project, you are eligible for a $500 credit, available for 12 months and renewable every year the project remains active.

$500 for 12 months is enough to deploy a complete infrastructure to promote and manage an open source project with moderate/heavy traffic, including front-end, documentation, and test environments.

To request the open-source credit:

• Open a dedicated Qoddi account with GitHub login using the same account as your open source project on GitHub,
• Send us a message to request the credit,
• The account must be exclusively used to host resources related to your open-source, or the credit will be voided,
• A credit card is not required to activate this account.

To be eligible under this program:

• You must be the creator or the owner of the project,
• It must be completely open-sourced and available on GitHub,
• Have at least 50 stars or 100 forks on its main repository,
• Mention Qoddi as the hosting solution inside the project README

If you have any questions about this program, feel free to contact us!

For the last several weeks, we all have been shocked and concerned about the situation in Ukraine and the need for Ukraine-based Internet companies to protect their infrastructure against digital threats.
At the same time, we've seen an exponential increase in the number of attacks coming from Russia and Belarus. Our team of engineers and infrastructure specialists works around the clock to make sure Apps and Services hosted on Qoddi stay protected from any type of threats.

Below we outlined Qoddi's position on this matter and the steps we took to make sure we help the most we can.

Digital relief for Ukraine-based customers

Since March 8th, 2022, Ukraine-based customers have been eligible for a $1500 credit (valid for 1 year) to cover the cost of any pending, past due or current invoice for Ukraine-based customers. We recognize that processing payments in Ukraine can be challenging at this time, and our sales teams can offer additional relief if needed.

Our team is also available to provide additional customer support, including priority support for Free apps.

Currently, we are lifting all restrictions on commercial content that can be hosted on free apps (Dev size) if the service hosted provides support, information, or connectivity for the Ukrainian people.

Russia and Belarus based customers

Starting March 8th, 2022, Qoddi stopped allowing signups for customers based in Russia and Belarus, and we actively monitor current accounts from this country. In the following weeks, while the situation evolves, we will reassess our position on closing current accounts for customers based in Russia and Belarus.

Qoddi's terms and conditions are clear on hosting a service that threatens people, encourages violence or terrorism, or poses a threat to other digital assets is not permitted. All accounts that are not compliant with this policy will be immediately banned, with all apps deleted.  

Qoddi's presence in Russia and relation to Russian Government

Unlike other cloud providers, Qoddi doesn't have any datacenter, offices, or infrastructure in Russia or Belarus. Since the creation of Qoddi, we have had an internal policy to not do any business with the Russian Government.

We will continue to update this page in the future as the situation evolves and we work to offering more solutions for people based in Ukraine and needs our help.

You have many options when it comes to choosing a platform to deploy your app. In this article, we will compare AWS, Heroku, and Qoddi.

Heroku is hosted on AWS, making Heroku, like Qovery for instance, nothing more than a management platform for AWS services. You can do everything you do on Heroku (or Qovery) directly with AWS for a lesser price but Heroku removes all the infrastructure management layer (or DevOps) you still need to have with AWS or any other cloud providers.

What is Amazon Web Services (AWS)?

As a subsidiary of the e-commerce giant Amazon.com, AWS is an IaaS service (Infrastructure as a Service), meaning you are basically renting compute power from them. The main advantage of AWS against its competitor is the multitude of products services derived from that simple abstract: renting compute power.
Of course, you can rent VPS on AWS, a virtual instance with just an operating system installed called EC2 but AWS also offers databases (RDS), Block Storage (S3 and Glacier), even AWS Lambda to run code directly without managing infrastructure.

Using AWS still requires installing and managing infrastructure: servers, load balancers, databases etc... While AWS is a powerful infrastructure provider it's not a "one-click" process to deploy infrastructure, scale, and maintain it.

AWS pricing can become a friction point at scale since all services are billed independently. Bandwidth (internet traffic also called egress fees) costs $90 per TB and that alone can bring your monthly invoice to a very high amount of money even for small traffic apps or websites.

What is Heroku?

Heroku, part of the Salesforce group, is a PaaS (Platform as a Service) created on top of the AWS infrastructure. Using Heroku, you can deploy apps directly from code, add add-ons and packages like databases or log auditing services, and manage everything from a simple, easy-to-use dashboard. Heroku does all the work in the background and sets up everything your app needs.
The main inconvenience of using Heroku is the enormous cost at scale. Since Heroku is created on top of AWS's infrastructure the cost of AWS is passed to you as a Heroku customer. Heroku also adds a Premium to AWS costs (since it needs to make money for its platform) and a basic production app with Heroku costs $250 per month minimum to run on a limited performance instance.

Another point of friction using Heroku is the need to use overpriced add-ons even for small apps. All databases are managed and needs to run on Heroku infrastructure and the ability to launch Docker containers on Heroku, while possible is not offered directly from the web platform and requires additional steps and configuration files.

Qoddi: a complete infrastructure solution for startups

Qoddi is a PaaS (like Heroku) but also maintains its own infrastructure like AWS. Since the whole system is custom-created for Qoddi this leverages a lot of savings that can be passed to the customer.

As a startup you need reliable infrastructure, allowing for fast and simple deployment at moderate costs.

The main advantage of Qoddi are:

• Deploy code directly from any repository, all the infrastructure (servers, load balancers, etc...) are created and managed automatically by Qoddi,
• Launch Docker containers, databases (like Postgres or Redis), and developers tools directly from the marketplace at the same costs of other apps,
• Free DEV apps for developers,
• Pipelines with Free preview apps to verify every pull request before sending it to staging and production,
• Tier 1 Infrastructure: Qoddi relies on its own clusters located in North America, Europe, and Singapour with an optimized network to improve delivery times and makes your app reachable everywhere in the world.
• No egress fees: Unlimited traffic is included with all apps,
• All included: Load balancers, backups, bandwidth, build time are included in the price of your app.
• Qoddi Startup Program with generous credits packages for bootstrapped and more advanced startups.
• Included support by email with premium 24/7 support for larger apps.

The idea behind Qoddi is to offer an alternative to Heroku and AWS for startups and SMBs around the world that need premium app hosting services at an affordable price.  

If you are starting a new company or looking for a reliable alternative to Heroku, feel free to contact our sales team to see how Qoddi can help you save a lot of time and money by moving your apps to Qoddi.

Avoid Writing a Lot of Try Catch by Catching The ‘catch()’ Just Once.

Deploy your code in seconds, with no infrastructure to manage. Qoddi App Platform is free for developers! Create an account today.

How annoying it is to write a lot of try-catch for each async function in an express app? What if you never need to write a try catch block for all async functions and still be able to handle the errors?

Prerequisites

1. You need to know how node, express, middleware, routes and controller functions work together.
2. You need to have an understanding of the err and next handlers of express.
3. Understanding basic git and SSH.
4. Understanding of NextJS

Try Catch

When you write an async function that can throw an error, you need to have the try-catch-finally blocks to handle the errors. Let’s say, you write a database query and it fails - the error would come in the catch.

async function(req, res, next){
Try{
		//something to try
}catch(err){
		//when trying to do something in try fails
}
}

If you don’t write a try-catch block in an async function, express would not be able to handle the error. You can read more about express error handling here.

The Solution

We are going to write a function called catchAsyncFunction(asyncFunction) that will take an async function as a parameter. Then it will catch the catch(err) of the async function. Then pass the error to express using next. Now the error will be available to handle in any middleware after the async function finishes.

We will be able to write it like this:

catchAsyncFunction(async function(req, res, next){
Try{
		//something to try
}catch(err){
		//when trying to do something in try fails
}
})

The catchAsyncFunction

So, this catchAsyncFunction is gonna be a little function. It is just 3 lines of code you need to have.

function catchAsyncFunction(asyncFunction){
	return (req, res, next) => {
	asyncFunction(req, res, next).catch(next)
}
}

Understanding this is a little confusing. But if you check the express error doc, express error handling - You can pass the catch block of a promise with the next handler.

If you call an async function and then catch the error, you can pass the error to express middleware using next.

The catchAsyncFunction takes an asyncFunction as a parameter. Then returns a callback that calls the asyncFunction, catches the error, and passes to the next middleware to use.

Handling the Passed Error

Now it is easy to handle the error. You can use a middleware at the bottom of all the route middleware. The middleware must have a new handler called err.

When a middleware function takes (err, req, res, next) this four, express thinks of it as an error middleware and passes the error to it. If you don’t have an err in any of your functions after the route, it will halt and throw an unhandled raw error.

const express = require(‘express’)
const app = express();

//your route middleware here

//error catch middleware after all routes
app.use((err, req, res, next)=>{
	console.log(err.stack)
})

If no error happens, this middleware will be automatically skipped by express.

The Implementation

Start project
Let’s start locally with a folder named catchAsyncFunction and run:

npm init -y
npm i express
npm i -D nodemon

To start a node project, install the express framework and install nodemon as devDependency to automate server start on file change.

Paste this code in index.js:

const express = require("express");
const app = express();
 
//create catchAsyncFunction
function catchAsyncFunction(asyncFunction) {
   return (req, res, next) => {
       asyncFunction(req, res, next).catch(next);
   };
}
 
//define your route here
const homeController = catchAsyncFunction(async (req, res, next) => {
   //const data = await
   //res.json({ msg: "no err" });
 
   throw new Error("Error happened");
   //this code will automatically go to error catch middleware
   //no need next() because it passes to the next middleware defined after the route
});
 
//your route middleware here
app.get("/", homeController);
 
//catch error here
app.use((err, req, res, next) => {
   console.log(err.stack);
   res.status(400).json({
       message: err.message,
   });
});
 
//start server
app.listen(5000, () => {
   console.log("Server started @5000");
});

Replace package.json script section with this code:

"scripts": { 
"dev": "nodemon index.js",
"start": "node index.js"
 },

Source code:

GitHub - qoddiapps/catchAsync

Contribute to qoddiapps/catchAsync development by creating an account on GitHub.

GitHubqoddiapps

In the end, we will connect this to a front-end.

Avoiding try catch in frontend - NextJS

Again annoyingly, for each async function that fetches or sends server data, you have to write try catch blocks in the front-end too.

On top of that, In NextJS we have getServerSideProps or getStaticProps that can’t be used in child components. Only to use in root page components. Sometimes, useEffect is the best choice. So, I am going to use useEffect here.

Sometimes, you have to write a lot of useEffect hooks and have to write fetch(), try and catch multiple times. To avoid this, you can write a function that can handle all fetch() requests from all components.

The Solution

Instead of writing each time the try catch block like this:

useEffect(()=>{
	const bringData = async ()=>{

		try{
			const data = await fetch(URL, 
{
         		method: 'GET',         
credentials: 'include',
headers: {           
Accept: 'application/json',           
'Content-Type': 'application/json',         
},       
});
}
catch(err){
		//handle error
}
}

bringData();
})

you can create a function called apiRequest() that can handle all the try-catch of all components and requests types. Usually, each of your fetch requests will have api URL, data, http method type. So, let’s make sure the function can accept them.

const apiRequest = (url, method, formData )=>{
	if(method === ‘GET’){
	// handle get request
}else{
// handle other request
}
}

Since, except GET requests POST, PATCH, DELETE can have a body property, we have to create an if else section to handle these two types of situations.

It's just two blocks that will handle all your requests. Let’s add an async keyword to it and add try catch once for all.

const apiRequest = async (url, method, formData )=>{
	try{
		if(method === ‘GET’){
		// handle get request
		
	
}else{
// handle other request
}
}catch(err){
	return err
}
	
}

The try can return data. Catch can return err.
Now in this code, you can add your fetch() to handle all requests like this:

const apiRequest = async (url, method, formData )=>{
	try{
		if(method === ‘GET’){
		// handle get request
		const response = await fetch(url, 
{
         				method: 'GET',         
credentials: 'include',
headers: {           
Accept: 'application/json',           
'Content-Type': 'application/json',         
},       
});

const data = await response.json();
return data

	
}else{
// handle other request
		const response = await fetch(url, 
{
         				method: 'GET',         
credentials: 'include',
headers: {           
Accept: 'application/json',           
'Content-Type': 'application/json',         
},       
body: JSON.stringify(formData)
});

const data = await response.json();
return data
}
}catch(err){
	return err
}
	
}

The only difference between get and other http requests is the use of a body key. We use JSON.stringify(formData) to make a data object to a JSON object.

Since we are returning data and returning error in the catch block, the useEffect hook in the component level can get the data without throwing an error.

So no need to have a catch block there.

If we send a request to our backend, we will have a code like this:

useEffect(() => { 
const fetchData = async () => { 
const data = await apiRequest("backend url", "GET"); 
console.log(data); 
}
fetchData(); 
});

Implement The Front End and Test It By Connecting to Our Previous Backend on Qoddi

To create a next app, in your project folder create a new directory called ‘lessAsync’. Inside the directory open a terminal and run:

npx create-next-app ./ -y

Now, you will see all the files and folders.
Inside index.js, remove everything and paste this code:

import Head from "next/head";
import { useEffect, useState } from "react";
import { apiRequest } from "../utils/apiRequest";

export default function Home() {
    const [errData, errDataSet] = useState("");
    useEffect(() => {
        const fetchData = async () => {
            const data = await apiRequest("http://localhost:5000", "GET");
            errDataSet(data.message);
        };
        fetchData();
    }, []);
    return (
        <div>
            <Head>
                <title>Less Async</title>
            </Head>
            <h1> Test frontend error handling</h1>
            <h2>{errData}</h2>
        </div>
    );
}

Outside the pages folder, create a utils folder and create a file called apiRequest.js and then paste the code in it:

export const apiRequest = async (url, method, formData) => {
    try {
        if (method === "GET") {
            console.log("ji");
            // handle get request
            const response = await fetch(url, {
                method: "GET",
                headers: {
                    Accept: "application/json",
                    "Content-Type": "application/json",
                },
            });

            const data = await response.json();
            return data;
        } else {
            // handle other request
            const response = await fetch(url, {
                method: method,
                headers: {
                    Accept: "application/json",
                    "Content-Type": "application/json",
                },
                body: JSON.stringify(formData),
            });

            const data = await response.json();
            return data;
        }
    } catch (err) {
        return err;
    }
};

Start the app and test it

Qoddi is a web server deployment service that updates your codebase on git push. Qoddi builds your code and starts the server following your package.json directives.

On top of that, Qoddi supports nodeJS out of the box. No extra Procfile needed.

Let’s deploy and test it in qoddi.com:

1. Configure your package.json for specific node and npm version,
2. Add cors and process.env.PORT,
3. Set your build script and start script,
4. Add your code to a github repository,
5. Connect the repo from flashdrive dashboard,
6. That’s it. The server will be built and started.
   

You will get a live server link and an internal link to test. But first, we need to update our package.json.

Update Backend and Frontend package.json

In package.json we need to specify node and npm version. Open a terminal and check your version with node -v and npm -v.
Open both package.json files in your catchAsync and lessAsync folder and add an ‘engines’ property:

“engines”: {
	“node”: “16.13.x”,
	“npm”: “8.1.x”
}

Also, we need to add the cors package to the backend to accept requests from the frontend. Install cors with

npm i cors

In the index.js file, after the line const app = express() add these two lines to add cors:

const app = express();
const cors = require(‘cors’);
app.use(cors)

In app.listen method, instead of 5000 as port, let’s add a PORT variable:

const PORT = process.env.PORT || 5000
app.listen(PORT, ()=>{
	console.log(`Server started @${PORT}`)
})

Similar to Heroku, Qoddi uses a port number from process.env

Since we already have our start and build script, we just need to update them. In the backend, add a build script with “npm install” init.

”scripts”: {
	“build”: “”npm install”,
	“dev”: “nodemon index.js”,
	”start”: “node index.js”
}

In the frontend, update the start script with:

“start”: “npm install && next start”

So, let’s create two git repos and push our code to them:

GitHub - qoddiapps/catchAsync

Contribute to qoddiapps/catchAsync development by creating an account on GitHub.

GitHubqoddiapps

GitHub - qoddiapps/lessAsync

Contribute to qoddiapps/lessAsync development by creating an account on GitHub.

GitHubqoddiapps

Let’s deploy

Create an account on https://qoddi.com and log in to your dashboard. Now click on the new app menu. Let’s create the backend first and then create the front-end.

Dev Apps are Free (up to 3 apps) on Qoddi.com, no credit card is required.

Worried that your app will not have enough resources as you grow?

All apps on Qoddi can scale at any time and as part of Qoddi's new interface launch early this week, we made auto-scaling available for everyone after more than 6 months in Beta.

Auto-Scaling, like Auto-Heal (another feature included with all Qoddi apps), is the guardian angel of your apps and will make sure your app continues to run whatever happens.

Note: Auto-scaling, like any other scaling feature, is only available to apps created in a production environment.

Auto-Scaling can be enabled directly from your app settings page and consist on only one simple setting:

What happens then?

All apps deployed on Qoddi are monitored 24/7 to make sure they work as intended and we send you an email each time your app needs more resources.

With Auto-Scaling enabled, Qoddi will automatically scale your app by adding more nodes (exact replicas of your app, distributed inside the same Qoddi clusters but on different physical machines).

To determine if your app needs scaling we monitor CPU, RAM, and Network usage in real-time and add 1 more node every minute your app needs it until the limit is reached or your app doesn't need more nodes to perform adequately.

When traffic or usage slows down, we automatically reduce the number of nodes accordingly.

Auto-Scaling is a free feature (except additional nodes usages of course), available to all production apps starting today!

Scaling strategy

When your app is scaled up or down, there is no service interruption and your app keeps running continuously. But it's important to plan in advance and apply correct settings to your app depending on the workload you expect your app to receives. Even if auto-scaling proved to be extremely reliable and act fast to increase your app capacity you can also use a scaling strategy:

• Select an app size consistent with the planned usage. Using the smallest app size with auto-scaling making the app scale permanently to its limit is not recommended because it will be more costly in the long term: Set an app size consistent with the habitual traffic your app receives and use Auto-Scaling as a fail-safe feature only.
• Check your app monitoring page: you'll be able to see when your app needs more resources and plan accordingly.
• Datastores cannot scale with Auto-Scaling and set a higher instance size in advance if you expect an increase in traffic on your main app.
• Auto-Scaling is suitable to take care of your app whether it's a worker (doing background tasks) or a web-facing app.
• Feel free to reach out to our Support Team if you need help creating your scaling strategy or are worried about your app availability in case of a surge of traffic/workload.

Meilisearch is an open-source search engine database alternative to Elastic Search or Algolia. It gives fast autocomplete with under 50ms database query performance.

How Meilisearch Works

After installing, Meilisearch provides an API endpoint using the ‘[your-domain]/indexes/’ link. If we have a database of movies, the endpoint will be ‘[your-domain]/indexes/movies’. To have a database of movies we need to create a movies document and insert movie data in it.

Finally, we can fetch the movie data from a React frontend at a super-fast speed while the user types in a form field searching for movies.

Installing Meilisearch On Qoddi

Note: MeiliSearch requires a production instance to run correctly, hence it's not available for free DEV apps.

Qoddi provides a one-click install of Meilisearch from our marketplace section. Just go to the marketplace and launch the Meilisearch app.

This will create a new app with Meilisearch API setup. Get the link and API Key,

Frontend Project Setup

To fetch the data, we need to set up a frontend with React and NextJS. Start a project with your terminal:

npx create-next-app meilisearch
npm i meilisearch

We install the Meilisearch npm SDK too.

Populating The Database

Since we don’t have a movies document created yet, let’s create it. Add this code to addmovies.js

const { MeiliSearch } = require("meilisearch");
const movies = require("./movies.json");
 
client = new MeiliSearch({
   host: "http://<your_meilisearch_qoddi_url>/",
   headers: {
       Authorization: `Bearer ${MEILI_API_KEY}`,
       "Content-Type": "application/json",
   },
});
 
//delete movies and jobs index
// client
//     .index("movies")
//     .delete()
//     .then(() => {
//         console.log("movies index deleted");
//     });
 
client.index("movies").addDocuments(movies);

>> movies.json can be found here

Run this file locally with node command to add movies document to the Meilisearch database:

node addmovies.js

This command will use the addmovies.js script and will add every object in movies.json to our Meilisearch document database.

Search Feature

In your index.js of your NextJS project replace the code with:

import { MeiliSearch } from "meilisearch";
import { useEffect, useState } from "react";
 
const client = new MeiliSearch({
   host: "http://hvlrjtupcw.us05.qoddiapp.com/",
   headers: {
       Authorization: `Bearer ${process.env.MEILI_API_KEY}`,
       "Content-Type": "application/json",
   },
});
 
const App = () => {
   const [movies, setMovies] = useState([]);
   const [search, setSearch] = useState("");
 
   useEffect(() => {
       //search movie index based on search value
       client
           .index("movies")
           .search(search)
           .then((results) => {
               setMovies(results.hits);
           });
   }, [search]);
 
   return (
       <div className="App">
           <div className="search">
               <input
                   type="text"
                   value={search}
                   onChange={(e) => setSearch(e.target.value)}
               />
           </div>
 
           <div className="movies">
               {movies?.map((movie) => (
                   <div className="movie" key={movie.id}>
                       <div className="movie-info">
                           <p>{movie.id}</p>
                           <h2>{movie.name}</h2>
                           <p>{movie.year}</p>
                       </div>
                   </div>
               ))}
           </div>
       </div>
   );
};
 
export default App;

Run npm run dev and test the search functionality by typing in the search box.

Deploy the NextJS app to Qoddi

Create a new Qoddi app from code inside the same stack as your MeiliSearch app. After deployment, create an environment variable called MEILI_MASTER_KEY and update your Next config file accordingly:

env: {
MEILI_MASTER_KEY: process.env.MEILI_MASTER_KEY,
},

Accessing the NextJS app from your web browser will give you access and search to your MeiliSearch database with lightning-fast responses times.

In this tutorial, we will look into the newest NextJS 12 features and use them in a simple project. NextJS 12 comes with a few exciting features. The most intriguing one would be the Rust SWC compiler. Faster compile, faster refresh.

Compiling JS/TS With Rust - SWC

It’s pretty awesome how NextJS has changed how websites are built and deployed and still improve everytime to make our life easier.
Especially using the new SWC rust compiler that I don’t even notice compiling on hot reload.
SWC replaces Babel and Terser, a TS/JS compiler and a minify tool.

Thanks to SWC, build comes from 500ms to 10ms and minifying 250ms -30ms. Also, they made a CSS parsing tool using Rust. So, this is the most exciting feature, using a Rust-based compiler.

Middleware

Middleware is another new exciting feature that I can’t wait to use. Basically create a _middleware.js in any directory inside pages and it will go through each request in that directory. You can manipulate your request traffic with one file. We will be creating middleware later on this tutorial.

React.suspense and React.lazy

These two are available since Next 11 as Beta. Now, NextJS12 supports both completely. React suspense is a conditional loading tool: You can load a part of a page or component after the page loads and also you can add a condition that needs to be fulfilled before loading a component.
React.Suspense re-renders the page with new data. It triggers React.lazy to import the component. For a large page, it really helps to load only what is required for the visitor and then load content based on visitor's events. Before that we would have to pre-load everything and show them according to the visitor's behavior.
React suspense solves this problem better.

React lazy is a new way to import components inside components after the page is already loaded.

const TextField = lazy(() => import('./formFields/TextField'));

Another thing, React Suspense can show a loader while the lazy loading is working.

Plan the Simple Project

1. We will create our NextJS project.
2. Edit the home component
3. Create a component that we will load with lazy loading
4. Create a loader that will show on screen while loading
5. A middleware to test how middleware works.
   
   

Create a NextJS project with this command and edit the index.js

npx create-next-app ./

Paste this code in index.js :

//import lazy and Suspense from react
import React, { Suspense, lazy } from "react";
import Head from "next/head";
import styles from "../styles/Home.module.css";
//load loader component
import IAmALoader from "../component/IAmALoader";
//the component to load with lazy load
const ILoadWithLazy = lazy(() => import("../component/ILoadWithLazy"));
export default function Home() {
//check if next server loading finishes and if window object initializes
const isServer = typeof window === "undefined";
return (
<div className={styles.container}>
<Head>
<title>Next 12 features</title>
<meta
name="description"
content="Generated by create next app"
/>
<link rel="icon" href="/favicon.ico" />
</Head>
<main className={styles.main}>
<h1 className={styles.title}>Let's load the lazy one</h1>
{
//start suspense code if window object available
!isServer && (
<Suspense fallback={<IAmALoader />}>
<ILoadWithLazy />
</Suspense>
)
}
</main>
</div>
);
}

Follow the comments in the above code. We loaded React, lazy, and Suspense from React. Then we loaded the loader component, ‘IAmLoader’ and we used React.lazy and loaded the component ‘ILoadWithLazy’.

Then, inside our component, we checked if NextJS has finished loading the page and window object is available with the isServer variable.

Now, inside our return component:

{
//start suspense code if window object available
!isServer && (
<Suspense fallback={<IAmALoader />}>
<ILoadWithLazy />
</Suspense>
)
}

We checked if the window object is available and we started Suspense. Suspense takes a fallback component which runs until the page loading finishes. Inside Suspense, we put our components that need to be rendered with lazy loading.

Let’s create a component folder outside of our pages folder and create two files,

IAmLoader.js, paste this code in it:

const IAmALoader = () => {
return <p>Loading</p>;
};
export default IAmALoader;

ILoadWithLazy.js, use this code in it:

const ILoadWithLazy = () => {
return (
<div className="loaded-comp">
<h1>I loaded last because I am lazy.</h1>
</div>
);
};
export default ILoadWithLazy;

We just used React.lazy and React.Suspense. But in a local environment, it will be too fast to be noticed. We may not see if it’s loading lazily on a local server. So, let’s quickly start a server on Qoddi app platform and test our code. For more information on how Qoddi deploys NodeJS apps, visit: https://devcenter.qoddi.com/node-js/

Deploy to Qoddi

Qoddi supports Next 12 out of the box.
Go to your Qoddi dashboard and create a new app.

Next, click on the GitHub button, and select your repository from the dropdown. Go next and select the branch name.

And finally, launch your app. Now, while Qoddi builds your app, let’s add the middleware features.

Next 12 Middleware

Add a _middleware.js in your pages folder, this will run on each request to the website because it is on the main pages directory. You can also have middlewares in other directories that will run only on pages placed under that same directory. That means middleware in NextJS follows the top-down rule. It runs for each request below the folder, not above.

const FirstMiddleware = (req, ev) => {
const checkNothing = true;
if (!checkNothing) {
return new Response("Hello World");
}
return console.log("hi");
};
export default FirstMiddleware;

Now, also push this code to git. Q0ddi will detect the change, and rebuild your app with your new code without you doing anything.
This will log to the console on each request. But, if you have checkNothing to false, it will return Hello World to the browser and won’t show any page on any route.

Sometimes, managing several input fields gets crazy complex. You may need to recreate the same thing for each form and that’s can be really time-consuming.

With a reusable Text Input in React, you can create just one input element in just one component and reuse it everywhere in any form. Let’s do this.

Prerequisites

1. Understanding of React and how forms work in React
2. A free Qoddi.com account to deploy your code
   

React form Handle

You must have seen this code:

//The useState Hook
const [textValue, textValueSet] = useState(‘’)

//onChange Handler
const handleForm = (event)=>{
	textValueSet(event.target.value)
}

return(
	//input field
<input type=”text” name=”textField” onChange={handleForm} value={textValue} >
 ) 

First, we create a useState hook to store input value. Next, we set the input field value to the useState hook.

Then, in the input form a onChange handler sets the typed text to useState hook.

React Hook Form

React Hook form is a great library to handle forms. Install it with:

npm i react-hook-form 

Import react-hook-form at the top of your code:

import {useForm} from ‘react-hook-form

In your App component, call and destruct useForm like this:

const App = ()=>{
	const {register} = useForm()
} 

Now, use register in your component’s return statement:

return(
	//input field
<input {...register(‘textField’)}>
 ) 

No need to have any more extra data there. Super cool, huh!

Inside the register call, the argument is the name of the input name. React hook form will build everything with this one single data.

You can add extra features. Ex - to make a required field, you need to do this:

return(
	//input field
<input {...register(‘textField’, {required: true})}>
 ) 

Let’s add a placeholder, max, and min length:

return(
	//input field
<input placeholder=”Text Field” {...register(‘textField’, {required: true, maxLength: 20, minLength: 2})}>

 ) 

Error Handling

To handle errors, we use the useFormState custom hooks from React Hook Form. formState subscribes to different form states of the plugin. We can subscribe to errors state like this:

const {register, formState : {errors} } = useForm()

Let’s fill our input with error messages:

return(
	//input field
<div className=”form-field”>
<input placeholder=”Text Field” {...register(‘textField’, {
required: {
value: true,
message: “This is required”
}, 
maxLength: {
value: 20,
message: “Value must be maximum 20”
}, 
minLength: {
value: 2,
message: “Value must be minimum 2”
},
})}>
<p>{
//If error exists in the textField
errors.[textField] && errors[textField].message
}</p> 
</div>


 ) 

First, we added value and message property to our validators. Error state checks for the value and message property, if the value doesn’t match it shows an error message.

Then we show the error message under the input field. It will show only if any error exists for the field name.

Reusable Input Component

To create an error message, let's create a TextInput.js component.

Each time this component gets used in a form, it may have different maxLength, minLength, message, required property value.

So, we will let the component receive some props - fieldName (name of the input field), errors from the useForm, placeHolder, isRequired, maximLength and minimLength:

const TextInput = ({fieldName, register, errors, placeHolder, isRequired, maximLength, minimLength })=>{
	return(
	//input field
	
<div className=”field-name”>
<input placeholder= {placeHolder} {...register(fieldName, {
required: {
value: isRequired,
message: “This is required”
}, 
maxLength: {
value: maximLength,
message: `Value must be maximum ${maximLength}`
}, 
minLength: {
value: minimLength,
message: `Value must be minimum ${minimLength}`
},
})}>

<p>{
//If error exists in the textField
errors[fieldName] && errors[fieldName].message}</p>
<div>

 ) 
} 

Now, we can import this component and use it in our APP component. Let’s implement this.

Implement, Design, and Deploy

First, let’s create a NextJS React server. Open a folder and open a terminal window. Run:

npx create-next-app ./ -y  
npm i react-hook-form@latest
code .

In your code editor, remove everything from index.js

//Import files in App.js
import Head from "next/head"; 
import styles from "../styles/Home.module.css"; 
import { useForm } from "react-hook-form"; 
import TextInput from "../utils/TextInput"; 

//Define App here
export default function App() { 
//destruct useForm of react hook form
const { register, handleSubmit, formState: { errors }, } = useForm(); 

//This runs on submit
const onSubmit = (data) => { 
console.log(data); 
}; 

//returns the App component
return ( 
	//Form element
<form onSubmit={handleSubmit(onSubmit)}> 

	{//Write TextInput component here and give value to all props
}
<TextInput 
fieldName="textField" 
register={register} 
errors={errors} 
placeHolder="Text Field" 
isRequired={true} 
maximLength={20} 
minimLength={2} 
/> 

	//Submit the form
<input type="submit" value="Submit to Console" /> 
</form> 
);
 }

Create a utils folder in your root project directory and create a TextInput.js in it. Paste this code in this file:

const TextInput = (
{ fieldName, register, errors, placeHolder, isRequired, maximLength, minimLength }
) => { 

return ( 

//Input field
<div className="form-field"> 
<input 
placeholder={placeHolder} {...register(fieldName, { 
required: { 
value: isRequired, 
message: "This is required", 
}, 
maxLength: { 
value: maximLength, 
message: `Value must be maximum ${maximLength}`, 
}, 
minLength: { 
value: minimLength, 
message: `Value must be minimum ${minimLength}`, 
}, 
}
)} 
/> 

<p> { 

//Shows if error exist
errors[fieldName] && errors[fieldName].message 

} </p> 
</div> ); 
}; 

export default TextInput;

Now, build the code and check the input field and its error handling.

We quickly created a reusable Text Input we can use anywhere we want inside our React.JS app.

The easiest way to deploy your code on a live platform is with Qoddi.com: Qoddi is free for developers and can scale indefinitely for production apps!

Qoddi apps can communicate with each other inside the same stack using Qoddi's internal network capabilities: an ultra-fast internal network between apps installed inside the same cluster. In this tutorial, we will learn how to connect a Rust app to a Postgres database using Actix with Diesel

This post describes the creation of a Qoddi app along with a Postgres SQL, you can use an external database (like an AWS RDS database or a database located on another Qoddi cluster) using its web address.

This tutorial uses ENV variables to set and uses the database, you can connect to an external database by setting the DATABASE_URL ENV variable :

DATABASE_URL=postgres://[user]:[password]@[internal_name or URL]/database

Actix is a great RUST framework used to increase the capabilities of apps built on Rust.

Creating a REST API using RUST is simple. In this tutorial, we will use Diesel, an ORM, and Query builder, that simplifies the uses of databases inside a Rust project.

Prepare your app locally

You need to have Rust installed locally. Check this tutorial to install rustup to do that easily.
It will also install cargo, a package manager to manage rust projects. Simply run:

cargo new rust-actix-diesel-connect

This will create a new project called rust-actix-diesel-connect. Let’s update our Cargo.toml, add some dependencies:

[package]
name = "rust-actix-diesel-connect"
version = "0.1.0"
edition = "2018"
 
# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
 
[dependencies]
actix-web = "3"
diesel = { version = "1.4.8", features = ["postgres", "r2d2",] }
dotenv = "0.15.0"
r2d2 = "0.8.9"

We are using Diesel ORM with postgres with the r2d2 feature enabled.

R2d2 has a ConnectionManager that can create a connection to a postgres database along with a database pool.

Now let's update src/main.rs with this code:

use actix_web::{ web, App, HttpServer, HttpResponse, Responder};
use dotenv::dotenv;
use std::env;
 
mod postgres;
 
async fn home() -> impl Responder {
   HttpResponse::Ok().body("PostgreSQL connected")
}
 
#[actix_web::main]
async fn main() -> std::io::Result<()> {
   dotenv().ok();
   env::set_var("RUST_LOG", "actix_web=debug");
   let host = env::var("HOST").expect("Host not set");
   let port = env::var("PORT").expect("Port not set");
 
   let pool = postgres::get_pool();
   HttpServer::new(move || {
       App::new()
       .data(pool.clone())
           .route("/", web::get().to(home))
          
   })
   .bind(format!("{}:{}", host, port))?
   .run()
   .await
}

Here we are using Actix, dotenv, and standard env library. We are also importing a module called Postgres and we will write our Postgres configuration there.

In the main function, we created a pool from the Postgres config and inserted that in our actix server data method.

Now, let’s create a postgres.rs file and write our postgres connection:

use diesel::pg::PgConnection;
use diesel::r2d2::ConnectionManager;
use dotenv::dotenv;
use r2d2::Pool;
use std::env;
 
// The Postgres-specific connection pool managing all database connections.
pub type PostgresPool = Pool<ConnectionManager<PgConnection>>;
 
pub fn get_pool() -> PostgresPool {
   // it from the environment within this function
   dotenv().ok();
   let url = env::var("DATABASE_URL").expect("no DB URL");
   let migr = ConnectionManager::<PgConnection>::new(url);
   r2d2::Pool::builder()
       .build(migr)
       .expect("could not build connection pool")
}

From r2d2 we import ConnectionManager and Pool and create a PostgresPool with it. Our get_pool function simply uses our environment variable DATABASE_URL and creates a new connection to our database.

Install diesel_cli locally with this command:

cargo install diesel_cli --no-default-features --features postgres

Add a Procfile to your project

Procfile is used to let the Qoddi orchestrator how to start and manage your app.  Check this tutorial for a more detailed Rust deployment.

For this app we simply need to add a Procfile to our root app folder with this command:

web: /workspace/bin/rust-actix-diesel-connect

Once it's done, push your code to GitHub or any Git software.

Qoddi App with Postgres

Create a new Qoddi app and select Postgres as a datastore:

Connect your repository to Qoddi using the automatic or manual method. Check this tutorial for more information.

Once your app is built, the connection to the app is made automatically by the builder:

You can edit the DATABASE_URL env variable to connect to another database (external or internal to the same stack).

Code related to this tutorial can be found here.