Install & Configure the Appwrite Web SDK

Instructor: [0:00] Next up, we want to create our new Appwrite Cloud account, where we can then get started using the Appwrite Web SDK within our project. Starting off, if this is your first time working with Appwrite, it's a back-end platform that's going to give us a wide variety of common services that we can use inside of our project.

[0:15] Typically, you would need to use a variety of separate services in order to get these different features, such as using a separate database and a different authentication layer, where with Appwrite, we can get that all inside of one back-end. Once we're ready to connect to Appwrite, we can use their SDKs, which come in a variety of flavors, making it easy to integrate into whatever tools that we're using inside of our project.

[0:36] Let's get started, where we're going to sign up for a new Appwrite account. Once you're ready, you can either sign up with your email address or you can simply use GitHub to easily connect your account. Once inside, you're going to be prompted to create your first project, where I'm going to go ahead and use the name LiveBeats, where you can use really whatever name you want for this project.

[0:53] Then I'm going to go ahead and click Create Project, where Appwrite will now drop me in right into my project dashboard. Now, depending on what tools you're using, you may select a different option, but if you're following along, we're going to select the Web App option, where now we can register our new web application, where I'm going to name it the same thing of LiveBeat.

[1:11] For the hostname, you're going to want to use the address of wherever you're going to deploy this to. For instance, if I had livebeat.com, I might enter in livebeat.com. Now, I don't have that deployed yet, nor do I even technically own livebeat.com, but for now, I'm just going to replace that with localhost.

[1:27] To be clear, you don't even need to use localhost when we're using this for development mode, but let's just use this as a way to get past the screen, and we can come back and update that later. Once ready, I'm going to hit the Next button, where now I get my options for installing the SDK.

[1:40] Let's first copy this npm install command. I'm going to go ahead and paste it in my terminal, and then we can start to import our Appwrite client. I'm going to go ahead and copy our import statement, and inside of my project code, I'm going to navigate to the source directory.

[1:54] Then I'm going to actually create a new file under lib. I'm going to call that Appwrite.ts, where instead of having to set this up manually, instead of all the different files, I want to just configure my client in one location.

[2:06] I'm going to paste in my import statement. We're back inside of the Appwrite wizard. I'm going to go ahead and go to the next step, and we can see that it gives me the code to initialize my client.

[2:14] I'm going to go ahead and copy that code and paste that into my Appwrite file, where now I want to do two things. First off, I want to make sure to export this client. That way, I can import it from any file that I'd like. Next, I prefer to set my client configuration inside of an environment variable.

[2:30] That way, if I'm working inside of a separate environment, I can configure just that key, but additionally, I don't want to be committing these type of values inside of GitHub or wherever I'm managing my code.

[2:42] Inside of the root of my project, I'm going to create a new file called .env.local, where I'm going to create two variables, ViteAppwriteEndpoint, and I'm also going to create ViteAppwriteProjectId. Next, I want to make sure I copy those values over and set them up inside of my variable's file.

[3:02] Then, I'm going to start to import them into my actual client file using import.meta.env and then the variable name. I want to make sure I do that for both my Endpoint and my Project ID.

[3:13] Now, to wrap things up, if we head back into our Appwrite Project, we can again click Next, but then we can see that we're ready to go. Let's go to the dashboard. We're now ready to get started using Appwrite.

[3:24] Well, so far, we've only created that client code. We're now ready to get started actually creating data inside of our Appwrite account.