React + Appwrite = 🔥

Integrate Appwrite — the open-source Backend Server, with React!

💡 What is Appwrite?

Appwrite is an open-source backend server for web and mobile applications. It is similar to Firebase, AWS Amplify, and Supabase in terms of features and APIs, including Authentication (User management), Database Management, Storage, and Cloud Functions.
It is a self-hosted solution that provides developers with a set of easy-to-use and integrates REST APIs to manage their core backend needs.

✨ Amazing Features!

It can run on any operating system and the Console User Interface provides you with a great variety of services you can use with your project!

1. Database -Store, query and manage access control to your app documents
2. Storage — Upload, download and preview your app and users files and media
3. Users — Authenticate, confirm and manage your users using multiple sign in methods
4. GEO & Localization — Detect your user's location, locale and fetch GEO related data
5. Functions — Run your backend code in a secure and isolated environment to customize your app
6. Console — Track your backend API usage and manage your project resources from a modern UI
7. Privacy - Own your data. Easily setup Appwrite self-hosted solution on your infrastructure
8. Security — Built-in the end to end security for your backend API both in transit and at rest

🤔 Why Appwrite is better?

• No Cost
  Appwrite is open-source, so we can expect everything for free here. Other options by companies like Microsoft, Amazon, etc. can get expensive as you scale your product up. Appwrite has an upper edge here.
• Usage Statistics
  Using the usage statistics provided by AppWrite, you can easily get to know which projects — take up the most space, use more CPU time, you can even see the bandwidth usage on each project separately ….. and many more stats.
• API support
  Due to the amount of APIs that Appwrite provides to a user, building projects is much easier with having to do the difficult task of bundling API servers together.
• Task Manager
  Using Appwrite, you can schedule an automatic function execution using cron syntax. This function can do anything from sending newsletter emails to buying you a pizza. No limitations at all.
• Community Support
  AppWrite has great community support that is ready to help you all the time. If you have any doubts or queries, you can have a chat on their discord server, and you will get your query resolved faster than any other forums.

Now, when we know what is Appwrite and what can it do, let's get hands-on and see how can we integrate it with React.

📩 Installation

The easiest way to start running your Appwrite server is by running our Docker installer tool from your terminal.
Before running the installation command, make sure you have Docker CLI installed on your host machine.

For Unix

docker run -it --rm \
    --volume /var/run/docker.sock:/var/run/docker.sock \
    --volume "$(pwd)"/appwrite:/usr/src/code/appwrite:rw \
    --entrypoint="install" \
    appwrite/appwrite:0.11.0

For Windows

docker run -it --rm ^
    --volume //var/run/docker.sock:/var/run/docker.sock ^
    --volume "%cd%"/appwrite:/usr/src/code/appwrite:rw ^
    --entrypoint="install" ^
    appwrite/appwrite:0.11.0

Note :

• Hyper-V and Containers Windows features must be enabled to run Appwrite on Windows with Docker.
• If you don’t have these features available, you can install Docker Toolbox that uses Virtualbox to run Appwrite on a Virtual Machine.

💻 Creating a Project

When the installation is done, you are all set to access the Appwrite console. For that, you need to open the localhost. You will see something similar to the following image.

Next step will be to create an account and log-in to it.

The next step is to create a database. This database will store the details of all the users that will sign on to your product or use resources on your product. To create a database, click the Database button.

The final screen will look like the following image :

In the next step, click on the Add Collection and give your collection a name. Then, click on Create button, and your collection is created!

You can also manage permissions and setup some roles for your collection.

We are almost done with the Appwrite app, now before we move on to React, we need to note down some important information from Appwrite console.

Go to the settings of your project by clicking the button for settings. You will find information like, Collection ID, Project ID and API Endpoint. These things will come in handy while setting up React.

Now we are done with the Appwrite setup, lets move to React now.

🔧 Setting Up React

Install node and npm in your system if not already.

For installing Node visit here

For installing NPM visit here

Now when you have everything installed. Run the following command to create the react app.

npx create-react-app my-app

For our React app to interact with the Appwrite, we need to have Appwrite dependency installed in our React App. This library comes with various methods that have great utility and you don't need to redefine anything or writing methods from scratch.

For installing this dependency, run the following command in your terminal/ command prompt.

npm i appwrite

We will also need react-router-dom, This would help us to redirect the user to the success page if the information provided by the reaches to the Appwrite backend service and to the failure page if API Call gets failed.

For installing react-router-dom a dependency, run the following command in your terminal/command prompt.

npm i react-router-dom

Now, at this point, everything is successfully installed in your project. Now you can open your favorite code editor and start building your app.

Let’s have a look at how to initialize Appwrite web SDK

And that is pretty much it. After this point, everything is similar to what we do elsewhere.

Appwrite makes life a lot easier and it serves the purpose very well. Not just with React, Appwrite works with Vue, Angular, Svelte, Flutter, Android, Apple and what not.

Visit the official Appwrite Website for information here

You can check out some more tutorials on their official documentation, where they have explained each process and step in detail, official documentation.

Appwrite has got a great community support, if you have any query, react out on the discord server ❤️

Give a thumbs up 👍 , if you got to learn something new! Share your thoughts on Appwrite or your experience with Appwrite in the comment section 💬