> ## Documentation Index
> Fetch the complete documentation index at: https://docs.assistantscenter.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Quickstart

> Let's start building a quick, easy, and awesome dashboard in 5 minutes!

## Setup your environment

Learn how to develop your Dashboard

<Steps>
  <Step title="Installing Node.js">
    To use discord-dashboard, you'll need to install [Node.js](https://nodejs.org/).

    <Tip>
      To check if you already have Node installed, run `node -v` in your terminal.
    </Tip>
  </Step>

  <Step title="Setting up your project">
    To use discord-dashboard, you'll need to install it via `npm` (which comes pre-installed with Node).

    If you want to use a different package manager like [pnpm](https://pnpm.io/), [yarn](https://yarnpkg.com/) or [bun](https://bun.sh/) you can replace the commands with the proper command name.

    Navigate to a suitable directory on your machine and create your project's folder.
  </Step>

  <Step title="Opening the terminal">
    <Tip>
      If you use [Visual Studio Code](https://code.visualstudio.com/), you can press{" "}
      <code>Ctrl + \`</code> (backtick) to open its integrated terminal.
    </Tip>

    On Microsoft Windows, either:

    * `Shift + Right-click` inside your project directory and choose the "Open command window here" option
    * Press `Win + R` and run `cmd.exe` then `cd` into your project directory

    On Apple macOS, either:

    * Open Launchpad or Spotlight and search for "Terminal"
    * In your "Applications" folder, under "Utilities", open the Terminal app

    On Linux, you can quickly open the terminal with `Ctrl + Alt + T`.
  </Step>

  <Step title="Verifying Node is installed">
    With the terminal open, run `node -v` to ensure you've successfully installed Node.js.
  </Step>

  <Step title="Initiating a project folder">
    <CodeGroup>
      ```bash npm theme={null}
      npm init
      ```

      ```bash yarn theme={null}
      yarn init
      ```

      ```bash pnpm theme={null}
      pnpm init
      ```

      ```bash bun theme={null}
      bun init
      ```
    </CodeGroup>

    This next command creates a `package.json` file for you, which keeps track of dependencies of your project as well as some other stuff!

    It will ask you a sequence of questions, you should answer them as you see fit. If you're not sure on something or want to skip it; leave it blank and press enter.

    Once you're done answering the questions, you're ready to install discord-dashboard!
  </Step>

  <Step title="Installing modules">
    Now that you've installed Node.js and know how to open your console and run commands, you can finally install discord-dashboard and Soft-UI!
    Run the following command in your terminal:

    <CodeGroup>
      ```javascript npm theme={null}
      npm install discord-dashboard dbd-soft-ui discord.js
      ```

      ```javascript yarn theme={null}
      yarn add discord-dashboard dbd-soft-ui discord.js
      ```

      ```javascript pnpm theme={null}
      pnpm add discord-dashboard dbd-soft-ui discord.js
      ```

      ```javascript bun theme={null}
      bun add discord-dashboard dbd-soft-ui discord.js
      ```
    </CodeGroup>

    And now that we've installed the required modules, we can start setting up the dashboard!
  </Step>
</Steps>

## Setup the project

<Steps>
  <Step title="Creating config.json">
    We will be creating a new file, `config.json`, which will house all our
    important (and secret) settings! Paste the following code into the file and
    replace as necessary:

    ```json config.json theme={null}
    {
    "discord": {
        "token": "discordToken",
        "client": {
            "id": "clientId",
            "secret": "clientSecret"
        }
    },
    "dbd": {
        "port": 80,
        // Keep this for local development or add in yout domain
        "domain": "http://localhost",
        // Do not Change the redirectUri
        "redirectUri": "/discord/callback",
        "license": "dbdLicense",
        "ownerIDs": ["Dashboard Admin Discord User IDs"]
    }

    }

    ```

    The configuration above will not work unless you change the values of the properties.

    Please also add the callback URL to your [App](https://discord.com/developers/applications) in the Discord Developer Portal. (e.g. "[http://localhost/discord/callback](http://localhost/discord/callback)")
  </Step>

  <Step title="Creating index.js">
    Create a new file, `index.js` (or anything you'd like) and paste the discord-dashboard handler into it.

    ```javascript index.js theme={null}
    // Define Packages
    const { Client, GatewayIntentBits } = require('discord.js');
    const SoftUI = require('dbd-soft-ui');
    const config = require('./config.json');
    let DBD = require('discord-dashboard');

    const client = new Client({ intents: [GatewayIntentBits.Guilds] });
    client.login(config.discord.token);

    const Handler = new DBD.Handler(
      /*
              Keyv storage instance
              Example: { store: new KeyvMongo('mongodb://user:pass@localhost:27017/dbname') }

              Can be left empty to use the default storage (Keyv with SQLite)
          */
    );

    (async ()=>{
      await DBD.useLicense(config.dbd.license);
      DBD.Dashboard = DBD.UpdatedClass();

      const Dashboard = new DBD.Dashboard({
          port: config.dbd.port,
          client: config.discord.client,
          redirectUri: `${config.dbd.domain}${config.dbd.redirectUri}`,
          domain: config.dbd.domain,
          ownerIDs: config.dbd.ownerIDs,
          useThemeMaintenance: true,
          useTheme404: true,
          bot: client,
          theme: SoftUI({
              storage: Handler,
              customThemeOptions: {
                  index: async ({ req, res, config }) => {
                      return {
                          values: [],
                          graph: {},
                          cards: [],
                      }
                  },
              },
              websiteName: "Assistants",
              colorScheme: "pink",
              supporteMail: "support@support.com",
              icons: {
                  favicon: 'https://assistantscenter.com/wp-content/uploads/2021/11/cropped-cropped-logov6.png',
                  noGuildIcon: "https://static-00.iconduck.com/assets.00/discord-icon-2048x2048-nnt62s2u.png",
                  sidebar: {
                      darkUrl: 'https://assistantscenter.com/img/logo.png',
                      lightUrl: 'https://assistanscenter.com/img/logo.png',
                      hideName: true,
                      borderRadius: false,
                      alignCenter: true
                  },
              },
              index: {
                  graph: {
                      enabled: true,
                      lineGraph: false,
                      title: 'Memory Usage',
                      tag: 'Memory (MB)',
                      max: 100
                  },
              },
              sweetalert: {
                  errors: {},
                  success: {
                      login: "Successfully logged in.",
                  }
              },
              preloader: {
                  image: "/img/soft-ui.webp",
                  spinner: false,
                  text: "Page is loading",
              },
              admin: {
                  pterodactyl: {
                      enabled: false,
                      apiKey: "apiKey",
                      panelLink: "https://panel.website.com",
                      serverUUIDs: []
                  }
              },
              commands: [],
          }),
          settings: []
      });
      Dashboard.init();
    })();
    ```
  </Step>

  <Step title="Generating a license">
    Before you can use discord-dashboard, you need to generate a [license](https://store.assistantscenter.com/).
    Once you've generated a license, add it to the configuration file.
  </Step>
</Steps>

## Having issues?

Join our Discord server if you're encountering any issues!
Make sure to give us detailed information on how to reproduce this error and any logs/errors you see in the console.

## What's next?

<CardGroup>
  <Card title="Change Images and Texts" icon="paintbrush" href="/soft-ui/docs/locales">
    Change any text or image to your own.
  </Card>

  <Card title="Add API Endpoints" icon="square-code" href="/api-playground/configuration">
    Implement your OpenAPI spec and enable API user interaction.
  </Card>

  <Card title="Integrate Analytics" icon="chart-mixed" href="/analytics/supported-integrations">
    Draw insights from user interactions with your documentation.
  </Card>

  <Card title="Host on a Custom Domain" icon="browser" href="/settings/custom-domain/subdomain">
    Keep your docs on your own website's subdomain.
  </Card>
</CardGroup>