Add a public folder to host static content within the Toolpad application

[Janpot]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Summary 💡

Would like to be able to host static content within the Toolpad application, just like http://localhost:3000/static/movies.json file. Application frameworks like vite/next.js/remox offer the use of a "public" folder which statically hosts its content on the application

Examples 🌈

allow creating a "public" folder which hosts its content on the Toolpad application.

Open question:

• how do we avoid clashes with Toolpad internal routes (present and future ones)

Motivation 🔦

https://discord.com/channels/1131323012554174485/1173687498308866058/1173687498308866058

[JerryWu1234]

we can add a mark that like "_". such as: /__public

[Janpot]

To not deviate too much from other frameworks, I think we can just host everything from the public folder under the root. e.g. ./toolpad/public/myData.json will be hosted as /myData.json on the Toolpad application.

[JerryWu1234]

• how do we avoid clashes with Toolpad internal routes (present and future ones)

if follow you said, we don't avoid clashes with internal routes.

[Janpot]

if follow you said, we don't avoid clashes with internal routes.

Yes, in hindsight, I think we can live with that

[JerryWu1234]

May I pick this up?

[Janpot]

yes

[JerryWu1234]

@Janpot I have a question. how to handle if there is collision with the toolpad-app directory ?

[Janpot]

public folder takes precedence. We can add a warning in dev mode if we detect a collision

[JerryWu1234]

I have done this issue,please for review

[maya9997]

anyone can help me how to run this repo not created from cli ? @JerryWu1234 @Janpot

[Janpot]

@maya9997 To get started from scratch in an existing project, you can do

yarn add @mui/toolpad

This installs the toolpad library in your project Then add an npm script to your package.json

// package.json
...
  "scripts": {
    "toolpad:dev": "toolpad dev ./my-toolpad-app",
    "toolpad:build": "toolpad build ./my-toolpad-app",
    "toolpad:start": "toolpad start ./my-toolpad-app"
  } 
...

Then run

yarn toolpad:dev

This will create a folder my-toolpad-app which will hold your application configuration and open the editor for it.

Adding a request for documentation