Introduction to Nhost

1. What is Nhost 🙄🙄

Nhost is the open source GraphQL backend (Firebase Alternative) and a development platform. Nhost is doing for the backend, what Netlify and Vercel are doing for the frontend. Nhost provides a modern backend with the general building blocks required to build fantastic digital products. Nhost make it easy to build and deploy this backend using our platform that takes care of configuration, security, and performance.

2. Features of Nhost tool 🎯

It's totally open source
It is automatically manages the backend stuffs like storage, serverless authentication, GraphQL API, Database.
It's also have CLI tool
It support github integration to working in project very easily.
It works with different nice frameworks like React, netlify, flutter etc.
After using Nhost it can automatically crates a database setup using Postgresql, GraphQL API setup using Hazura for some file storage, also it crates authentication setup in 25 sec or less than a minute.

3. Why Nhost 💁🏻‍♂️💁🏻‍♀️

In the development industry developers are basically focus on Frontend and Backend development, also there are lots of tools are present in tech market to manage our application as well. Not only managing but also there are lots of learning, large codebase understanding are present in both area of frontend and backend development. Developers are worry to maintain, manage and balance between frontend and backend development simultaneously also deploy the application in production level is very challenging factor.

In frontend we basically maintain and design our particular websites using popular programing language like React, JS, HTML, CSS, Angular etc. Also maintain these frontend stuff we basically use Netlify and Vercel that makes our task hassle-free. But what if a developer has not a specific knowledge about backend 💁🏻‍♂️. For this reason introducing nhost, the most popular backend development tool. It can easily manage all the backend stuffs like storage, authentication, serverless function and also maintain the security.

Nhost = PostgreSQL + Hasura's GraphQL Engine + Hasura Backend Plus

out of the box backend with a relational database,
user authentication
data storage,
serverless fucntions,
GraphQL API.

4. How to install Nhost ⚙

my-app --template nhost-quickstart

After make your application jump to application directory and start the backend. Or simply Log in to Nhost and sign up for a new account Press the New App button on the console's home page. Choose a name and pick the region closest to your users. You'll be all set with the Default Workspace and the Free plan for now.

Now jump to your created application folder and run this command

cd my-app
npm start

Now we are connected our Nhost to backend as well, so to configure Nhost to React application we will use the React SDK that is provided to us by Nhost. So, it's basically a wrapper around a Nhost java SDK which is a way to interact with the Nhost backend using hooks in React.

npm install @nhost/react graphql

Finally open the application source code in VisualStudio and made changes as well.

5. How to use and deploy an application using Nhost 🚀

Setup Make sure you have Node.js and npm or Yarn installed.

Create a new folder called nhost-todos, initialize a new JavaScript app there, and install the Nhost JavaScript SDK:

npm init -y
npm install @nhost/nhost-js graphql

using Yarn

yarn init -y
yarn add @nhost/nhost-js graphql

You might have to edit the package.json file and add/change the type object to module

("type": "module")

Initialize Nhost In the new directory, create a file called index.js.

Enter the following code into this file. It will initialize a new JavaScript client that will interact with your backend:

import { NhostClient } from '@nhost/nhost-js';

const nhost = new NhostClient({
  backendUrl: 'https://[app-subdomain].nhost.run', // replace this with the backend URL of your app
});

console.log(nhost.graphql.getUrl());

Run the code in your terminal. You should see your app's GraphQL endpoint URL:

➜ node index.js

https://[app-subdomain].nhost.run/v1/graphql

Query todos If you now add the following GraphQL query to the client, let's see what happens when you run the updated version:

import { NhostClient } from '@nhost/nhost-js';

const nhost = new NhostClient({
  backendUrl: 'https://[app-subdomain].nhost.run',
})(async () => {
  // nhost.graphql.request returns a promise, so we use await here
  const todos = await nhost.graphql.request(`
    query {
      todos {
        id
        created_at
        name
        is_completed
      }
    }
  `);

  // Print todos to console
  console.log(JSON.stringify(todos.data, null, 2));
})();

➜ node index.js

null

null is printed because While using the Hasura Console, you could fetch the todos because the admin role is enabled by default but when building your applications with a client, you want to define permissions using roles that your users can assume when making requests.

Unauthenticated users Use the public role in permissions when you want some data to be accessed by anyone without being signed in. The public role is the default role in all unauthenticated requests.

Setting public permissions In Hasura Console, go to the Data tab, click on the todos table, then click Permissions. Add a new role called public and click on select.

Open Hasura Console Hasura generates real-time GraphQL APIs, but it also provides a web console for manipulating the schema and data of your database. Here make sure go to the Data tab on your app's dashboard and select Open Hasura. Remember to copy the admin secret.

Users table You should see all your database tables on the left-hand side of the screen. You should see multiple different schemas displayed as folders:

Insert data Go to the Insert Row tab to add some data to your database.

ezgif.com-gif-maker (1).gif

Authentication In the previous section, you defined select permissions for the public role. You will now add insert and select permissions for authenticated users to secure your app's GraphQL API with authentication.

Insert a test user Manually create a user by going to your app's Users tab (top menu) and clicking on Add User.

ezgif.com-gif-maker.gif

You will now use that newly created user. We'll use this newly created user to make authenticated requests to the GraphQL API.

import { NhostClient } from '@nhost/nhost-js';

const nhost = new NhostClient({
  backendUrl: 'https://[app-subdomain].nhost.run',
})(async () => {
  // Sign in user
  const signInResponse = await nhost.auth.signIn({
    email: 'joe@example.com',
    password: 'securepassword',
  });

  // Handle sign-in error
  if (signInResponse.error) {
    throw signInResponse.error;
  }

  // Get todos
  const todos = await nhost.graphql.request(`
    query {
      todos {
        id
        created_at
        name
        is_completed
      }
    }
  `);

  console.log(JSON.stringify(todos.data, null, 2));
})();

Permissions for signed-in users Let us organize the permissions so it works for signed in users too.

Remove permissions for the public role We won't use the public role anymore, so let's remove all permission for that role.

Insert permission First, we'll set the Insert permission.

Select permission For Select permission, set a custom check so users can only select todos where user_id is the same as their user id. In other words: users are only allowed to select their todos. See the image below.

Now rerun the app. New todos are inserted, and only todos for the user are fetched and displayed. Your backend is successfully secured!

6. Architecture of Nhost

7. Connect with Nhost 🔗

8. Resources 🚩

blog.kubeworld.org/nhost-case-study

=github.com/nhost/nhost

youtu.be/RWVcMEgETS0

nhost.io/blog/nhost-understanding-the-basics

youtu.be/ed8SzALpx1Q

github.com/firebase

github.com/postgres/postgres

github.com/hasura/graphql-engine

Thanks for reading. I hope you will try it out and learn something new. Also incase i have missed something feel free to share your thoughts and feedback.

To reach out to me 👀

Twitter 🖱

LinkedIn 🖱

Github 🖱