Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

how to switch between demo of examples without restarting npm #778

Closed
be-a-bee opened this issue Jul 18, 2019 · 5 comments · Fixed by #863
Closed

how to switch between demo of examples without restarting npm #778

be-a-bee opened this issue Jul 18, 2019 · 5 comments · Fixed by #863

Comments

@be-a-bee
Copy link

How can I switch between the demo of examples like expandable-rows, serverside-options, etc without having to change webpack.config.js and restart?

I have checked out mui-datatables code and want to see different examples live and possibly change them and see the changes.

I figured out that by changing webpack.config.js:

module.exports = {
entry: {
app: "./examples/customize-filter/index.js"
}

and restarting the app I could accomplish this.

But is there a way to do it without restarting? and without changing the webpack?

One solution I'm hoping for is that there should be direct urls like :
http://localhost:5050/expandable-rows
http://localhost:5050/serverside-options

to see the respective examples.

Expected Behavior

Current Behavior

Steps to Reproduce (for bugs)

Your Environment

Tech Version
Material-UI
MUI-datatables
React
browser
etc
@be-a-bee be-a-bee changed the title switch examples how to switch between demo of examples without restarting npm Jul 18, 2019
@gabrielliwerant
Copy link
Collaborator

There is no way to do this at the moment. I agree it would be nice to have something like this, especially a whole documentation/examples website, but it's not something I'm focused on in the short term.

@be-a-bee
Copy link
Author

Thank you for the prompt reply. I can understand your prioritization.

Something you may want to consider while adding this enhancement :
See react-bootstrap-table2 storybook. https://react-bootstrap-table.github.io/react-bootstrap-table2/storybook/index.html

@alielkhateeb
Copy link
Contributor

My suggestion:

  1. Having examples/index.js as the entry point in webpack.config.js
  2. examples/index.js should have a router to all the examples by folder name
    • Accessing localhost:5050 should take you to examples/simple
    • Accessing localhost:5050/specific-example should take you to examples/specific-example

@gabrielliwerant if you agree on this solution I can start working on it.

@gabrielliwerant
Copy link
Collaborator

@alielkhateeb That's a great start, I would accept that PR! Even better would be to have a simple list of links at examples/index.js or whatever the default page is, but either way is a big improvement.

@alielkhateeb
Copy link
Contributor

@gabrielliwerant Cool, I'll start working on that tonight

alielkhateeb added a commit to alielkhateeb/mui-datatables that referenced this issue Aug 24, 2019
…th router)

Added router cards and started adding routes.
alielkhateeb added a commit to alielkhateeb/mui-datatables that referenced this issue Aug 24, 2019
gabrielliwerant pushed a commit that referenced this issue Sep 12, 2019
* [Enhancement] working on issue #778 (Switch between examples with router)
Added router cards and started adding routes.

* Added all the examples to examples.js
exported all examples components

* Fixed some exports
Listed the number of examples

* Added noslash type to remove the extra slash after the # from the URL (#778)
lalong13 pushed a commit to lalong13/mui-datatables that referenced this issue Jan 15, 2020
* [Enhancement] working on issue gregnb#778 (Switch between examples with router)
Added router cards and started adding routes.

* Added all the examples to examples.js
exported all examples components

* Fixed some exports
Listed the number of examples

* Added noslash type to remove the extra slash after the # from the URL (gregnb#778)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants