---
layout: article
title: Start with Solid
description: Build Solid apps with Appwrite and learn how to use our powerful backend to add authentication, user management, file storage, and more.
difficulty: beginner
readtime: 3
back: /docs/quick-starts
---

Learn how to setup your first Solid project powered by Appwrite.

## 1. Create project

Head to the [Appwrite Console](https://cloud.appwrite.io/console).

![Create project screen](/images/docs/quick-starts/create-project.avif)

If this is your first time using Appwrite, create an account and create your first project.

Then, under **Add a platform**, add a **Web app**. The **Hostname** should be `localhost`.

**Cross-Origin Resource Sharing (CORS)**

Adding `localhost` as a platform lets your local app talk to Appwrite. For production, add your live domain to avoid CORS errors.

Learn more in our [CORS error guide](/blog/post/cors-error).

![Add a platform](/images/docs/quick-starts/add-platform.avif)

You can skip optional steps.

## 2. Create Solid project

Create a Vite project.

```sh
npm create vite@latest my-app -- --template solid && cd my-app
```

## 3. Install Appwrite

Install the JavaScript Appwrite SDK.

```sh
npm install appwrite
```

## 4. Import Appwrite

Find your project's ID in the **Settings** page.

![Project settings screen](/images/docs/quick-starts/project-id.avif)

Create a new file `src/lib/appwrite.js` and add the following code to it, replace `<PROJECT_ID>` with your project ID.

```client-web
import { Client, Account } from 'appwrite';

export const client = new Client();

client
    .setEndpoint('https://<REGION>.cloud.appwrite.io/v1')
    .setProject('<PROJECT_ID>'); // Replace with your project ID

export const account = new Account(client);
export { ID } from 'appwrite';
```

## 5. Create a login page

Add the following code to `src/App.jsx`.

```client-web
import { createSignal } from 'solid-js'
import { account, ID } from './lib/appwrite';

const App = () => {
    const [loggedInUser, setLoggedInUser] = createSignal(null);
    const [email, setEmail] = createSignal('');
    const [password, setPassword] = createSignal('');
    const [name, setName] = createSignal('');

    async function login(email, password) {
        await account.createEmailPasswordSession({
            email,
            password
        });
        setLoggedInUser(await account.get());
    }

    async function register(email, password, name) {
        await account.create({
            userId: ID.unique(),
            email,
            password,
            name
        });
        login(email, password);
    }

    async function logout() {
        await account.deleteSession({ sessionId: 'current' });
        setLoggedInUser(null);
    }

    if (loggedInUser()) {
        return (
            <div>
                <p>Logged in as {loggedInUser().name}</p>
                <button onClick={logout}>Logout</button>
            </div>
        );
    }

    return (
        <div>
            <p>Not logged in</p>
            <form>
                <input type="email" placeholder="Email" value={email()} onChange={e => setEmail(e.target.value)} />
                <input type="password" placeholder="Password" value={password()} onChange={e => setPassword(e.target.value)} />
                <input type="text" placeholder="Name" value={name()} onChange={e => setName(e.target.value)} />
                <button type="button" onClick={() => login(email(), password())}>
                    Login
                </button>
                <button type="button" onClick={() => register(email(), password(), name())}>
                    Register
                </button>
            </form>
        </div>
    );
};

export default App;
```

## 6. All set

Run your project with `npm run dev -- --open --port 3000` and open [Localhost on Port 3000](http://localhost:3000) in your browser.