n-HOST

The Open-Source Firebase alternative with GraphQL

ยท

3 min read

NHost is an open source Firebase alternative with GraphQL, built with the following things in mind:

  • Open Source
  • Graph-QL
  • SQL
  • Great Developer Experience

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. It is an open-source tool which basically take cares of all the backend stuffs such as databases, scaling, authentication etc. All we have to do is to focus on our code part & business map. Nhost consists of various open source software such as-

  • Database: PostgreSQL
  • Instant GraphQL API: Hasura
  • Authentication: Hasura Auth
  • Storage: Hasura Storage
  • Serverless Functions: Node.js (JavaScript and TypeScript)
  • Nhost CLI for local development

Getting started with NHOST:

NHost dashboard

Nhost_ The Open Source Firebase Alternative with GraphQL - Brave 8_17_2022 11_50_25 PM.png

As we are going to build a React project, let's get started with setting up the project-

  • First of all, we need to sign up with nHost and set up our account, i will suggest you all to go with your github id.

  • Provide details & Set-up your project:

Nhost_ The Open Source Firebase Alternative with GraphQL - Brave 8_17_2022 11_56_09 PM.png

We will start with creating a React Web-Application. when we created this project, the nHost provided us database setup using PostgreSQL, GraphQL API setup using Hasura and an authentication setup using Hasura Auth.

Set-up the react app in your local pc using: command: "npx create-react-app demoapp --template nhost-quickstart"

It will contain few predefined templates when you launch it which basically contains React components.

We will setup nhost-react sdk using command: npm install @nhost/react graphql and then configure it in our App.js file. The nhost react sdk hooks will help us to set up the authentication procedure.

We will be importing nhost-react modules in our project and provide the sub domain details as given in our created demo project on nhost protal

demo-project - Nhost - Brave 8_18_2022 12_39_44 AM.png

Next, we will set up the signup process using nhost-react sdk. For that, we have to import some modules from the react sdk as shown below: Editing _n-HOST_ - Brave 8_18_2022 12_49_19 AM.png

We will create Signup function to access it with email & password:

(584) (Giveaway ๐ŸŽ‰) Introduction to Nhost - the Firebase Alternative_ React Tutorial - YouTube - Brave 8_18_2022 12_56_19 AM.png

After setting up the SignUp process, We will setup our sign-in process of our project by importing react sdk hooks and then implementing it in our code as below-

(584) (Giveaway ๐ŸŽ‰) Introduction to Nhost - the Firebase Alternative_ React Tutorial - YouTube - Brave 8_18_2022 1_07_03 AM.png

Next, we will setup the Signout process for our project, we will doing the same thing as we did previously by importing the react components & implementing them in our code-

SignIn.js - nHost - Visual Studio Code 8_18_2022 1_29_43 AM.png

After setting up the login & signup part, we will have to give it the access through "HASURA" backend service

Permissions - users - Data _ Hasura - Brave 8_19_2022 1_02_54 PM.png

We will have to give the access for selection & updates of data for users, as shown below:

Permissions - users - Data _ Hasura - Brave 8_19_2022 1_04_41 PM.png

Now, after setting up all the modules in out code part, we will launch our project & we can use it for authentication.

Conclusion

We can use nhost for our personal projects, as its completely free because it's an open source. With time, more and more people will get familiar to this platform & it might bring a drastic change in development industry.

ย