Administration UI

LightNet enables you to manage your content using JSON files. This is great for developers, but not so much for non-technical users. That’s why LightNet provides a Administration UI to manage your content with a user interface. The interface will allow you to create, update, and delete media items and media collections. We use a tool called Decap CMS to provide the Administration UI. It is a headless CMS that we configure to work with LightNet.

All changes made will be written to your file system or to your git repository if the user interface is used online.

Add the Administration UI to your project

This is how you add the Administration UI to your LightNet project:

Add Integration: Add the LightNet Decap CMS integration using Astro’s add command:
Terminal window
```
npm run astro add @lightnet/decap-admin
```
Confirm the questions with y to install required dependencies and add the integration to your astro.config.mjs file.
Adjust Configuration: Add your Administration UI configuration to Astro’s astro.config.mjs file. This is a minimal example:
astro.config.mjs
```
const languages = [{
  code: "en",
  label: "English",
  translations: {
    //...
  }
}];

export default defineConfig({
  integrations: [
    lightnet({
        languages: languages,
        //...
    }),
    lightnetDecapAdmin({
        languages: languages,
    })
  ]
});
```
This adds a shared languages configuration to both the LightNet and the Administration UI. The Administration UI will use the languages configuration to fill the language selection dropdowns for media items.

Run the Administration UI

The Administration UI can write its changes to your local file system or to a Git Host like (GitLab or GitHub).

Accessing your Local File System

Run your Administration UI on your local computer using npm scripts.

In your Terminal execute this command from your project’s root folder.
Terminal window
```
npm run dev
```
This will start the LightNet development server.
Open a new Terminal at the same location and execute:
Terminal window
```
npx decap-server
```
This will start a application that enables Decap CMS to access your file system.
Navigate your browser to localhost:4321/admin. You should see the Administration UI showing you a list of your media items.

Accessing a Git Host

The Administration UI also supports connecting to a Git Host like GitLab or GitHub. A Administrator can access the UI on your website, all requests will be send to the Git Host’s API. Every change done on the Administration UI will change files inside your project using Git commits. Authentication also will be handled by the Git Host, so only Persons you give access will be able to edit your page’s content.

This architecture brings several advantages:

No need for you to deploy and maintain a running server backend API.
Security is handled by Git Host (with support for 2FA and more).
Git History enables rollback and gives overview what has changed.
Git repositories can be free of charge.

LightNet supports different Git Hosts. We highly recommend using GitLab as it supports Authentication from the user’s browser.

Connect to GitLab

To connect your Administration UI to a GitLab repository, follow this steps.

Make sure your LightNet site is hosted on GitLab. If this is not the case, check the guide on hosting on how to setup a GitLab repository for your project.
On GitLab.com navigate to Groups and select the group that hosts the repository. Open the Settings of this group.
Open the Application settings and select to Add a new Application.
In the Add new Application dialog:
- Name: Choose any name for your website
- Redirect URI: Give the final address of your LightNet site followed by /admin/. Eg. https://your-library.com/admin/. ⚠️ Don’t forget the trailing slash! ⚠️
- Confidential: Unselect this option.
- Scopes: Select the api scope.
Save the new Application. GitLab will present you with a Application ID. Copy and store this ID to use it later.
Go back to your project on your computer and open astro.config.mjs.

Add the GitLab backend config for your repository

// ...
export default defineConfig({
  integrations: [
    // ...
    lightnetDecapAdmin({
        languages: languages,
        backend: {
            name: "gitlab",
            repo: "<Group>/<Repository Name>",
            appId: "<Application ID>",
        },
    })
  ]
});

Make sure to set repo with the GitLab path of your repository. Set the appId to the Application ID you have copied in step 5.

Deploy your changes, then open your website on /admin. Press the Login Button and allow LightNet to access your GitLab account. You now can edit your media items online. 🎉 If Content Administrators need access, add their accounts to the GitLab repository.