---
tagName: 9.5.0
name: examples.serverside.gridContainer
publishedAt: '2025-05-25T19:08:51Z'
isPrerelease: false
isDraft: false
---
# examples.serverside.gridContainer

* Added a new example to fully load a grid container configuration per remote
* Added `container.Base: loadItems()` with support for all environments

Online Demos:
https://neomjs.com/dist/production/examples/serverside/gridContainer/
https://neomjs.com/examples/serverside/gridContainer/

<img width="849" alt="Screenshot 2025-05-25 at 19 50 46" src="https://github.com/user-attachments/assets/e2a8a596-6be9-4eae-b031-1b4673f3a29a" />

<img width="1703" alt="Screenshot 2025-05-25 at 21 27 57" src="https://github.com/user-attachments/assets/eb18dd23-7c76-4d50-9a91-9c9858c2e3f3" />

Most important files:
https://github.com/neomjs/neo/blob/dev/examples/serverside/gridContainer/Viewport.mjs
https://github.com/neomjs/neo/blob/dev/examples/serverside/gridContainer/resources/data/grid-container.json

The JSON file contains:
```json
{
    "modules": [
        "src/grid/Container.mjs"
    ],
    
    "items": [/**/]
}
```

This does get consumed by:
```
async loadItems(url) {
    let response   = await fetch(url),
        remoteData = await response.json();

    if (remoteData.modules?.length > 0) {
        await Promise.all(remoteData.modules.map(modulePath => {
            // Adjust relative URLs
            if (!modulePath.startsWith('http')) {
                modulePath = (Neo.config.environment === 'development' ? '../../' : '../../../../') + modulePath
            }

            return import(/* webpackIgnore: true */ modulePath)
        }))
    }

    return remoteData.items
}
```

Meaning:
* Devs need to specify related modules which have to be there.
* This works perfectly fine the the development mode
* For `dist/production`, it is impossible to let Webpack bundle the dynamic modules, since it could be anything.
* Neo.mjs provides the ability to run multiple environments inside the same app, which comes to the rescue => We can and have to combine the `development` and `dist/production` environments for this specific use case.

Feedback from Google Gemini:
<img width="853" alt="Screenshot 2025-05-25 at 20 46 29" src="https://github.com/user-attachments/assets/6b0c8ba0-c28d-4b7c-ba49-89f9cf44ebed" />
<img width="803" alt="Screenshot 2025-05-25 at 20 46 40" src="https://github.com/user-attachments/assets/474dfcb7-ba80-46ab-9067-1fb688aa8466" />
