currently to install and run material-ui docs locally, it requires two npm install, one within material-ui, another within material-ui/docs.
cd <project folder>/material-ui
npm install
cd <project folder>/material-ui/docs
npm install
But I want to use the docs site as a starting point to create my own app. How can I install the docs without installing the whole material-ui? I've tried adding "material-ui": "^0.14.4",, and ALL dependencies in material-ui/package.json to the material-ui/docs/package.json.
With that, npm install doesn't complain anything, but when I do npm run start or npm run browser:development, it doesn't work. Instead, it spits out whole bunch of error message (see below for part of it).
ERROR in ../src/table/table-header-column.jsx
Module build failed: ReferenceError: Unknown plugin "transform-replace-object-assign" specified in "/home/ubuntu/repos/tutorials/mui/.babelrc" at 0, attempted to resolve relative to "/home/ubuntu/repos/tutorials/mui"
.....
Please advise! Thanks.
I have teased the MUI-Docs site from parent MUI here in this repo: https://github.com/lmaccherone/material-ui-template.
In addition to removing the dependency upon parent material-ui, it has these advantages:
DRY and n-levels of left nav menu. To add/modify the left nav of the original MUI docs, you had to modify no
less than three different source files. This template will automatically adjust the left-nav based upon app-routes.js
including n-levels deep.
Custom theme in the project. MUI is designed to be themable and comes with two nice themes, but it's not
immediately obvious how to activate a custom theme in context for all components. The Themes page now has three
themes and it defaults to the custom one, so if you remove the Themes page, it will start up with your theme rather
than one of the prebuilt ones. Just modify customBaseTheme.js. I also modified many components and pages to use the theme. There were many places where inline settings didn't honor theme colors and spacing.
Highcharts. There is an example chart page that uses Highcharts and react-highcharts.
Advanced Table. It includes a component that renders a table where you can click on the columns to accomplish sorting.
Note, that repo has two pages specific to Pendo (a company I'm working with). They won't render correctly unless you have permissions for Pendo, but you can easily remove those two page by removing the folder by that name and removing it's routes from app-routes.js. I plan to clean that up and move Pendo specific stuff into it's own repo, but it was just easier to have it here as examples.
Related
Background
I often use "React Developer Tools" to understand the component structure of various website that I like and take inspiration from. Though, lot of websites have random names for the components, few websites have distinguishable names which can be helpful for aspiring React Developers or hobbyists. One such website is https://www.joshwcomeau.com. Below is a screenshot from one of the pages in his website. The name of few of the components explains itself what it is going to render. And since this is his blog, where he talks about various tips and tricks for React Development, it becomes helpful to have a look at this.
Question
Now when I develop a website using create-react-app(CRA), all my component names are minified to a couple of random letters by Webpack. How can I control this behavior?
Note: My main question is - How to control this behavior in any React application (not just CRA). I know that Josh uses Next.js for his blog, so does any framework like Gatsby, Next etc... provide control over this?.
Note:
I'm aware that the component names are visible in development mode, but I would like it to be visible in production too (for the reason explained above in "Background").
I'm aware that webpack can generate "sourcemap" but doing that would expose my entire code structure. So I prefer not to use sourcemaps
Screenshot of Josh's Website
Screenshot of My Website
You can achieve this with a third party library:
From webpack-react-component-name documentation:
Normally React component names are minified during compilation. This plugin makes these component names available in production bundles by hooking into Webpack's compilation process, traversing the AST looking for React component definitions and updating the emitted source code to populate the displayName property. This is the property that, when populated, is used by the React Dev Tools extension to determine the name of a component.
So you can install this webpack plugin with:
npm install webpack-react-component-name -save-dev
once it is installed, add the plugin to the plugins list in webpack configs:
plugins: [
new WebpackReactComponentNamePlugin()
],
I have an application (let's call it frontend) importing a custom library of React components (design-system) that's Material UI based.
In the frontend app, I have a ShadowDOM-contained component (using react-shadow) that I want to import a Button component from design-system to. I wrapped the whole tree inside ShadowDOM with StylesProvider that I passed a custom instance of jss to (with different injectionPoint, so the styles from inside that tree are attached not at the head of the document, but inside the ShadowDOM.
The issue I have is, that frontend uses its own copy of StylesProvider from #material-ui/styles package (I have no need to install the whole #material-ui/core as all components should be imported from design-system instead) and design-system uses its own copy of StylesProvider from #material-ui/core, resulting in a situation, where the Button is being wrapped with another StylesProvider by MUI because it doesn't detect any styles context available (and it doesn't, because MUI creates the context in global scope of StylesProvider.js file - so there are two different contexts that do the same), resulting in Button having access to default JSS instance where the insertionPoint is pointing to document head.
What I'd like to achieve is, have MUI not create another styles context for every single component imported from design-system but use the one I defined in frontend - without passing it as a prop manually to every component imported. I considered adding #material-ui/styles on top of #material-ui/core to design-system and adding it to webpack's "externals" (so, theoretically, only one StylesProvider.js would be used and in turn - one context), but I was hoping there's a better solution.
TLDR:
Just adding #material-ui/styles to externals in design-system's webpack config was enough (even if you don't add it explicitly as dependency, #material-ui/core depends on it and will use it anyway, so it works).
Long answer:
My setup is such that the "main" entrypoint in package.json of design-system points to dist/index.js (so, already bundled/minified version of the library). Without adding #material-ui/styles to "externals" in webpack config, it was bundled along the whole library, so at this point, whatever I did there would always be two copies of StylesProvider.js:
One solution is to mark #material-ui/styles as external - this way, it won't be bundled in dist/index.js and instead, expected to be available during runtime (and it is):
Besides the aforementioned solution, there's also another one that worked - pointing "main" entry in package.json to "src/index.ts" instead. It made the frontend webpack treat it as a part of frontend code, instead of separate library:
As a bonus, it ended up with the final bundle being smaller (as common dependencies weren't duplicated). One minus of this approach was, however, that each frontend build had to also rebuild design-system, which increased the total build time.
I am trying to customize the theme when using Semantic-UI-React, there are detailed instructions on how to customize themes in Semantic-UI, like we can override variables to change their styles.
But I didn't find any way to customize themes with Semantic-UI-React, since there is no semantic/src/themes and semantic/src/site folders for us to make changes, what comes with Semantic-UI-React is just the default CSS file (the file we import in our index.js file "semantic-ui-css/semantic.min.css").
Is there any way we can customize the theme in Semantic-UI-React? Thanks in advance!
This link may also help in addition to the theming page on the docs site.
https://jsramblings.com/how-to-use-semantic-ui-with-a-custom-theme-in-your-cra-app/
It has a setup script after you run
npm install --save-dev semantic-ui
Yes there is a way to customize themes and create your own
https://react.semantic-ui.com/theming/
Basically just follow instructions from the docs link, install semantic-ui-less, which are not compiled Less files for the Semantic-ui CSS, craco-less which is just a path plugin for CRA configured Webpack so your Less compiler can find files properly without ejecting your CRA, move the files to created folder, modify theme.config, start app and you are ready to customize your own theme, although I didn't find some kind of API for variables on Semantic-ui docs, so I had to browse semantic-ui-less package files for them.
One problem I encountered was that I tried changing the theme for all components in theme.config and it was throwing errors about missing fonts and variables. Don't do this, it's not gonna work, check the Semantic-ui docs about theming, there is a note about it
Themes are per component, so although, for example, material themes are available for menu, button, and site, changing all values to "material" will produce an error for components which are not included in that theme.
https://semantic-ui.com/usage/theming.html#browsing-for-themes
Context
New electron user here. I just cloned and installed the recommended React + Electron repo: https://github.com/electron-react-boilerplate/electron-react-boilerplate
Now I want to use Material-UI. So I thought I just follow the instructions here:
https://material-ui.com/getting-started/installation/
After I did this, the app doesn't show me anything from Material-UI. I created a Component with a simple App Bar. But it does show nothing.
So I found out that there is another package.json in the folder /app/package.json
I cd'd into it and redid the installation. Restart the dev server but still nothing shows up (no appbar, just white screen).
Here is a screenshot:
Also according to the docs I should add a link for the roboto font to the html file. Where is this supposed to go? I put it into the only html file I found in app/app.html.
How can one set up Material-UI with Electron or rather this specific boilerplate?
I couldn't find anything up to date for this question.
I found the error. Turns out I imported MenuIcon but material doesn't export it. So when I get rid of it, the appbar renders correctly.
I'm missing up information about deployment. After running npm run build to my react project - i do get a build folder.
Unlike the example in React.org "like button" here: https://reactjs.org/docs/add-react-to-a-website.html, My component now is bigger,with many sub-components, with fetch calls... etc - it's a whole project.
In my other project, i would like to use this app, as a another part in a bigger app, to share this project between other of my projects.
is this possible?
if yes? how? if no? why? any other way?
Thank you !
--- Edit ---
Some of the other projects are not written in React. some are single page applications with jQuery. some with Backbonejs. which also does not use npm.
The option for submodule is applying only to the other react projects
It's certainly possible.
I think what you're looking for is to publish package to a private npm registry.
However if your project is small enough it might be easier to use github submodules.
For the most part it depends on the size and the scope for re-usability of your project. If your project is just meant to be exporting some Components/utilities that you want to use in other projects you might want to use the private npm registry but if you want access to the source code of the project and want it as a subset of your bigger project's repository, you might want to make use of github submodules.
I figured out a way to do this. for the whole project.
Many pages such as React add to a website, reffer only to a single component. not to the whole project.
Now i know.
While developing, on the index.js we have something like this:
ReactDOM.render(
<MyMainComponent
someParam="something"
/>
, document.getElementById('root'));
This code, made it running on my page. Now, to have it General, that i could use it everywhere i wrap it in a global function:
window.reactMyMainComponent = (params, elm) => {
ReactDOM.render(
<MyMainComponent
{...params}
/>
, elm);
}
Then, i run yarn build
Then copy the js folder from /build/static/
Then take it to any other project, adding the 3 javascript files that are inside
Then i can call my new function reactMyMainComponent Anywhere, and use it when i want wherever i want :)
such as :
var statsBox = $(".someComp")
reactWordCloud({
width:statsBox.width(),
height: statsBox.height(),
infoId:9260
}, statsBox[0])
Tada, now everywhere can use this :) All projects.