config to make npm package

[romannep]

Minimal config to solve #16 (may also partially cover #15 and #13 ).

To build a package:

npm run build-package

Script will make a dist folder. After that there will be two ways:

1. Publish as is.
   Components from npm package will be accessed as:

import 'material-kit-react/dist/material-kit-react.css';
import Button from 'material-kit-react/dist/components/CustomButtons/Button';

2. Add package.json at dist folder and publish package from dist folder.
   Components from npm package will be accessed as:

import 'material-kit-react/material-kit-react.css';
import Button from 'material-kit-react/components/CustomButtons/Button';

[einazare]

Hello @romannep ,

Thank you for this.
I am going to add it on our next update (we need to keep on creative-tim, github and npmjs the same versions).

Best,
Manu

[romannep]

Ok. It will be greate. Now is difficult to use because of ablusote imports - you have to copy folders directly to your src folder.

I've tested on production build and make some changes to babel config.

[bgongre]

@romannep I'm new to importing libraries in to React. When you are building the package are you building it in the node_modules/material-kit-react dir? Or are you building a package from the main project folder? I've been working on trying to import this material-kit for two days now and have been unable to get it to display.

[romannep]

@bgongre
With my PR I'm just run npm run build-package, then, from project's folder where I need to use this material kit I'm installing it with npm (you can provide a path instead of package name):

npm install ./path/to/material-kit-react

then I use components as

import 'material-kit-react/dist/material-kit-react.css';
import Button from 'material-kit-react/dist/components/CustomButtons/Button';

[arzke]

You probably meant "compiled"

[romannep]

yes, thanks

[gvbkr]

@romannep @einazare I tried these steps but my project fails with the following errors

Failed to compile.

(undefined) ./src/client/common/App.js
Module build failed: TypeError: Cannot read property 'type' of undefined
at Array.some ()
at Array.forEach ()

I tried different variations and couldn't get it working, any tips on what can be done to fix it?

[einazare]

Hello @gvbkr ,

You can install our product using npmjs.
No need to follow this steps anymore.

Best,
Manu

[gvbkr]

@einazare Does this apply to the pro packages too. (sorry I was not clear in my question earlier I guess) Specifically can you please share instructions to install /material-dashboard-pro-react and Material Kit PRO React. I got both of them and would like to use them in different projects.

[einazare]

Hello again @gvbkr ,

The PRO versions are not on NPM as of moment.

Best,
Manu

[kevinlim605]

I'm having trouble using the components after using npm i material-kit-react. I can't seem to get the components to load. I'm using create-react-app to initialize my project. Are there any extra steps that I need to do to get this to work and how would I go importing a component?

ex.) import Badge from 'material-kit-react/src/components/Badge/Badge.js'

doesn't seem to work for me.