Create an address 🔗

info

Client-side files that belongs to an address should go into the client/addresses/ folder
Server-side files that belongs to an address should go into the server/addresses/ folder

For this guide, let's assume that the new address that we want to create is "guide.com"

• Add the new address to the app_config.lua file in the AppConfig.Addresses dictionnary

AppConfig = {
    -- ...
    Addresses = {
        -- ...
        "guide.com"
    },
    -- ...
}

• Create a folder in nui/addresses/ with the same address name: nui/addresses/guide.com/
• Add app.js and app.css to the folder
• The app.js file should contain an event listener with the address name and we have to replace the inner HTML of the addresses-content element by our address HTML

document.addEventListener("guide.com", () => {
    document.getElementById("addresses-content").innerHTML = `
<div id="guide">
    <p>Following guide!</p>
</div>
`;
});

• Then in the app.css file you can create all the style that you want to apply to your address HTMl

#guide {
    display: flex;
    justify-content: center;
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
    width: 400px;
}

#guide p {
    font-weight: 800;
}

listening to the address being closed

You can listen to addressesApplicationClose:guide.com and do your things when the address is closed.

document.addEventListener("addressesApplicationClose:guide.com", () => {
    console.log("guide.com has been closed")
});

don't include this event listener in the other listener, they should be separate