strapi/docs/3.x.x/en/advanced/customize-admin.md

Admin panel

One of Strapi's main feature is its fully extendable and customizable admin panel. This section explains how the admin panel section is structured and how to customize it.

See the Contributing Guide for informations on how to develop the Strapi's admin interface.

Files structure

The entire logic of the admin panel is located in a single folder named ./admin/. This directory contains the following structure:

/admin
└─── admin
|   └─── build // Webpack generated build of the front-end
|   └─── src // Front-end directory
|        └─── app.js // Entry point of the Reacr application
|        └─── assets // Assets directory containing images,...
|        └─── components // Admin's React components directory
|        └─── containers // Admin's high level components directory
|        └─── favicon.ico // Favicon displayed in web browser
|        └─── i18n.js // Internalization logic
|        └─── index.html // Basic html file in which are injected necessary styles and scripts
|        └─── reducers.js // Redux reducers logic
|        └─── store.js // Redux store logic
|        └─── styles // Directory containing the global styles. Specific styles are defined at the component level
|        └─── translations  // Directory containing text messages for each supported languages
└─── config
|    └─── routes.json // Admin's API routes
|    └─── admin.json // Admin's specific settings
└─── controllers // Admin's API controllers
└─── services // Admin's API services
└─── packages.json // Admin's npm dependencies

---

Customization

The administration panel can be customised according to your needs, so you can make it reflects your identity: colors, fonts, logo, etc.

Change access URL

By default, the administration panel is exposed via http://localhost:1337/admin. However, for security reasons, you can easily update this path.

Path — ./config/environment/**/server.json.

{
  "host": "localhost",
  "port": 1337,
  "autoReload": {
    "enabled": true
  },
  "cron": {
    "enabled": false
  },
  "admin": {
    "path": "/dashboard"
  }
}

The panel will be available through http://localhost:1337/dashboard with the configurations above.

Development mode

#1 — Install its own dependencies

Run npm install from the ./admin folder.

#2 — Launch the development server

Run npm start from the ./admin folder. That's all.

#3 — Go to the browser

You should be able to see the admin at http://localhost:4000/admin.

Note: In development, all the plugins of your app are mounted in the same build as the administration panel.

Colors

Admin's styles use PostCSS, and more precisely PostCSS-SCSS. In this way, colors are stored in variables. The values of these variables can be easily changed in files located in ./admin/admin/src/styles/variables/.

The changes should be automatically visible.

Fonts

Fonts can also be overridden:

• Add the fonts files you need in ./admin/admin/src/styles/fonts.
• Import them from ./admin/admin/src/styles/base/fonts.scss.
• Use them by replacing the variables' values in ./admin/admin/src/styles/variables/variables.bootstrap.scss.

Logo

To change the top-right displayed admin panel's logo, replace the image located at ./admin/admin/src/assets/images/logo-strapi.png.

Note: make sure the size of your image is the same as the existing one (434px x 120px).

---

Build

To build the administration, run the following command from the ./admin folder:

npm run build

This will replace the folder's content located at ./admin/admin/build. Visit http://localhost:1337/admin/ to make sure your updates have been taken in account.

---

Deployment

There is three cases to deploy the administration panel:

1. On the same server as the API.
2. Without the plugins on another server (AWS S3, Azure, etc) as the API.
3. With the plugins on different servers as the API.

Let's dive into the build configurations. The file should look like this:

Path — ./config/environment/**/server.json.

{
  "admin": {
    "build": {
      "host": "https://admin.myapp.com",
      "backend": "https://api.myapp.com:8080",
      "plugins": {
        "source":  "host",
        "folder": "/plugins"
      }
    }
  }
}

On the same server as the API

You don't need to touch anything in your configuration file. This is the default behaviour and the build configurations will be automatically set.

Without the plugins on another server

Path — ./config/environment/**/server.json.

{
  "admin": {
    "build": {
      "host": "https://admin.myapp.com",
      "backend": "https://api.myapp.com:8080",
      "plugins": {
        "source":  "origin"
      }
    }
  }
}

The administration URL will be https://admin.myapp.com and every request from the panel will hit the backend at https://api.myapp.com:8080. The plugins will be injected through the origin (means the API itself). In other words, the plugins URLs will be https://api.myapp.com:8080/admin/content-manager/main.js.

Path — ./admin/admin/build/index.html.

<html>
  <head></head>
  <body>
    <div id="app"></div>
    <script type="text/javascript" src="https://admin.myapp.com/admin/vendor.dll.js"></script>
    <script type="text/javascript" src="https://admin.myapp.com/admin/main.js"></script>
    <script src="https://api.myapp.com:8080/admin/content-manager/main.js"></script>
    <script src="https://api.myapp.com:8080/admin/settings-manager/main.js"></script>
    <script src="https://api.myapp.com:8080/admin/content-type-builder/main.js"></script>
  </body>
</html>

Note: The plugins are injected using the ./admin/admin/build/config/plugins.json. To see the plugins URLs in the index.html, you need to launch the administration panel in the browser.

With the plugins on another server

In this case, we suppose that you decided to put your administration and the plugins on the same server but on a different server as the API.

Path — ./config/environment/**/server.json.

{
  "admin": {
    "build": {
      "host": "https://admin.myapp.com",
      "backend": "https://api.myapp.com:8080",
      "plugins": {
        "source":  "host",
        "folder": "plugins"
      }
    }
  }
}

The administration URL will be https://admin.myapp.com and every request from the panel will hit the backend at https://api.myapp.com:8080. The plugins will be injected through the host. It means that the plugins URLs will use the host URL as the origin. So the plugins URLs will be https://admin.myapp.com/plugins/content-manager/main.js.

We also added a folder setting to separate the plugins from the administration build. In your server, the files structure should look like this:

- src/
  - 0bd35bad03d09ca61ac6cce225112e36.svg
  - 1d51d8767683a24635702f720cda4e26.svg
  - af3aefd0529349e40e4817c87c620836.png
  - config/
    - plugins.json
  - main.js
  - main.js.map
  - plugins/
    - content-type-builder/
      - 0bd35bad03d09ca61ac6cce225112e36.svg
      - 1d51d8767683a24635702f720cda4e26.svg
      - af3aefd0529349e40e4817c87c620836.png
      - main.js
      - main.js.map
    - content-manager/
      - ...
      - main.js
      - main.js.map
    - settings-manager/
      - ...
      - main.js
      - main.js.map
  - vendor.dll.js
  - vendor.dll.js.map

The generated index.html will look like this:

Path — ./admin/admin/build/index.html.

<html>
  <head></head>
  <body>
    <div id="app"></div>
    <script type="text/javascript" src="https://admin.myapp.com/admin/vendor.dll.js"></script>
    <script type="text/javascript" src="https://admin.myapp.com/admin/main.js"></script>
    <script src="https://admin.myapp.com/plugins/content-manager/main.js"></script>
    <script src="https://admin.myapp.com/plugins/settings-manager/main.js"></script>
    <script src="https://admin.myapp.com/plugins/content-type-builder/main.js"></script>
  </body>
</html>

Note: The plugins are injected using the ./admin/admin/build/config/plugins.json. To see the plugins URLs in the index.html, you need to launch the administration panel in the browser.