[material-ui][docs] Make the free premium templates easier to use

[askpatrickw]

I'm looking through the Onepirate landing page example as a launching point and I'm not understanding how the links in AppAppBar and AppFooter are working.

The Source for the onepirate example is here:
https://github.com/mui-org/material-ui/tree/master/docs/src/pages/premium-themes/onepirate

Expected:
Download the example and have it work.

Observed:

• 404 to Terms, Privacy, Sign-In, etc...
• Many other files not within the example folder such as (all images, and some other components.)

I've gathered up the files not in the source directory, but I'm looking for a straight-forward way to fix the 404s.

For example this link to the terms in ./modules/views/AppFooter.js

<li className={classes.listItem}>
    <Link href="/premium-themes/onepirate/terms">Terms</Link>
</li>

You will note two things:

1. The link is to /premium-themes/ not to files in the source directory linked to from the Premium Themes library
2. There is not router in the example

I've tried moving the Terms.js from my src into into /src/modules and putting the terms.js into src and
changed the href to '/terms' but I still get 404s.

It seems as though this example is not really reusable as-is, but I'm not sure. Do I need to re-work the example using react-router-dom or is there some other more straight-forward approach I'm not seeing.

I'm dropping this into a vanilla create-react-app project and serving it up with AWS Amplify hosting.

Module Versions: 
+-- @material-ui/[email protected]
+-- @material-ui/[email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
`-- [email protected]

[askpatrickw]

@oliviertassinari I see you created the onepirate example. Can you suggest a path forward? I'd be happy to provide additional documentation for the next person who wants to use the example. tx!

[askpatrickw]

I decided to use material-kit instead.

[joshwooding]

Links are a wrapper around an anchor element that applies Material UI styling. The router we use is built in to Next (next/router)

[askpatrickw]

Ah.. so there are other dependencies needed to make this work, but there's no package.json specific to the example.

My $.02 is these examples should be in their own repos and work independently not be based on the documentation app.

Also, there's a general comment in the docs that you can drop the themes into the sample applications, but again there are dependencies which would not be specified in the theme or the sample.

I hope that's helpful feedback.

[oliviertassinari]

@askpatrickw Thank you for raising the problem. You are right, we should make our "theme" better isolated!

• Fixed. The first issue I can find is

  https://github.com/mui-org/material-ui/blob/6bb9231175b14d41d2255c267df0f39dd4c971fe/docs/src/pages/premium-themes/onepirate/SignIn.js#L16

• The link issue is a good one too! https://github.com/mui-org/material-ui/blob/6bb9231175b14d41d2255c267df0f39dd4c971fe/docs/src/pages/premium-themes/onepirate/SignIn.js#L65

• We miss a README

[askpatrickw]

I suggest you move themes to their own repro with folders for each theme, and you can link to other repos as well.

See https://github.com/getpelican/pelican-themes

[kpennell]

@oliviertassinari Thank you for working on this. Would love to have solid theme starting points

[neilpalima]

Is this done? I encounter this problem as well. I would love to use this with create-react-app.

[gregsifr]

As a beginner I would also appreciate the theme working out of the box

[ehartford]

I have same problem, as an experienced web developer learning material-ui, I would like to have a starting point to build from that works out of the box with no modification. This one, I had to track down all the static files, and still have problems with getting the markdown to generate with webpack.

[tobiaspfuetze]

Since this seems still to be an open issue, I created a version with create-react-app and added 'react-router-dom' as one of the dependencies. All credit to @oliviertassinari who created the template in the first place. Feel free to git clone https://github.com/tobiaspfuetze/material-ui-onepirate.git && cd material-ui-onepirate && npm install && npm start

[mariabohorquez]

Since this seems still to be an open issue, I created a version with create-react-app and added 'react-router-dom' as one of the dependencies. All credit to @oliviertassinari who created the template in the first place. Feel free to git clone https://github.com/tobiaspfuetze/material-ui-onepirate.git && cd material-ui-onepirate && npm install && npm start

Thank you a lot for making it a separated repo! It's a lot easier to work with. Small comment, would you happen to know why your version has all the button text underlined? Seems a style is missing somewhere.

[yukihirai0505]

FYI

I found a repository that uses the Typescript for the onepirate theme.
https://github.com/rothbart/onepirate-typescript

[kriscoleman]

FYI

I found a repository that uses the Typescript for the onepirate theme. https://github.com/rothbart/onepirate-typescript

this was actually super helpful and enough for it to click so I could start using this in a gatsby app. thanks.

[samuelsycamore]

Revisiting this in Q4 '23—it seems that these two free "premium" themes each need a package.json and a README.md to explain how to use them. They should "just work" after you npm install.

• https://github.com/mui/material-ui/tree/master/docs/src/pages/premium-themes/paperbase
• https://github.com/mui/material-ui/tree/master/docs/src/pages/premium-themes/onepirate

The rothbart/onepirate-typescript repo linked above is a good example, but I'd much prefer to see Vite or Next.js in place of create-react-app for these.

[ehartford]

thanks

[siriwatknp]

The templates are now easier to use with CodeSandbox/Stackblitz, so I am closing this issue.

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@askpatrickw How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.