Building with Appwrite and Netlify

Let us start with an introduction of Appwrite first. Appwrite is a popular backend as a service provider. It is a docker containerized self-hosted environment which lets you build applications with a variety of secure, flexible APIs. It provides solutions through sustainable databases, user management, location, privacy, storage, and functions with easy integration with any platform, and any language.

Netlify is an all-in-one platform for automating modern web projects. Replace your hosting infrastructure, continuous integration, and deployment pipeline with a single workflow. Integrate dynamic functionality like serverless functions, user authentication, and form handling as your projects grow.

In this article, we will create a to-do app with React and Appwrite and then we will proceed to deployment via Netlify.

Step 1: Installation

Install the Appwrite via Gitpod like this. It will make you install Gitpod and a few steps of authorization. If you choose to open the IDE in the browser, it will configure and show up like the below image.

Click on the Simple Browser in the workspace.

Step 2: A new project.

Sign in and create a new project. For creating a todo app, add a new Web App in Appwrite.

Enter the endpoint of your website according to your choice. (<project-name>, <project-name>.netlify.app)

Step 3: Databases

Create a new Database. Create a new collection with the following properties.

Add the following permissions to your collections. These permissions ensure that only registered users can access the collection.

Step 4: Frontend

Create a new folder on the desktop (or any other favorite spot) to set the front end. Fork and git clone this repo in this new folder.

Follow these instructions to run the demo app locally:

$ git clone https://github.com/appwrite/todo-with-react
$ cd todo-with-react

Run the following command to generate your .env vars

$ cp .env.example .env

Now fill in the environment variables in your .env file as below:

• REACT_APP_ENDPOINT — Your Appwrite endpoint.
• REACT_APP_PROJECT — Your Appwrite project ID.
• REACT_APP_COLLECTION_ID — Your Appwrite collection ID.
• REACT_APP_DATABASE_ID — Your Appwrite database ID.

Now run the following commands and you should be good to go:

$ npm install
$ npm start

Step 5: Deploy

To deploy it, head over to https://www.netlify.com and set up your account if not already.

Click add a new site → import an existing project.

Select GitHub and then your forked repo.

In a few minutes, the website will be ready and the URL will be available on the dashboard. By default, Netlify creates websites with URLs ending by .netlify.app.

Check out my website here: React App (stalwart-syrniki-c71317.netlify.app)

Happy coding.