Documentation about how to use

[andymac4182]

Hi,

I looked at dropping this into my application but it wasn't immediately obvious how to load this into webpack and react.

It would be great if there was some examples.

Cheers, Andrew

[booleanhunter]

Hi,

There's documentation on how to use some of the widgets here.

There's still lot of undocumented code, I'll be covering them soon. Does this help, or do you need anything more specific?

[hakimkal]

I agree with this, I found this yesterday and I asked myself how am I suppose to use this in an existing project?

If I do npm install --save-dev adminlte-reactjs

Can I do import adminLte from 'adminlte' or do require('adminlte'); And start using widgets? I wasnt sure the answer and hence I decided this cool tool may not be usable for me right now.

So a basic tutorial using it in an existing react project will ba awesome. Good job though.

[jafri]

Hi,

I am more confused about creating custom app logic, and how to talk between the server and client in this setup.

[benwiley4000]

It doesn't make much sense to be using this as an npm dependency at the moment since most modules can't just be pulled out and used independently - last I checked.

[booleanhunter]

@andymac4182 @hakimkal @nmsz97 @benwiley4000 - I'll try addressing the points you raised -

• Right now you can't do something like var reactadmin = require('adminlte-reactjs)`. I'll need to work on this, to make the components modular enough to be imported in this manner.
• This project uses a node server. You may use any backend of your choice, it would still work - as long as you include the stylesheets and the bundles from the public/dist folder. vendors.js and chartVendors.bundle.js are dependencies that these components need - like JQuery, Velocity, Raphael, etc. You can refer the webpack.config.js file to know about them.

To use them in your existing app -

Let's say that you need to use the widgets from here. To do that -

• Copy the js folder from here to wherever you have your JavaScript files in your folder
• Then you could use any widget by requiring them, refer this file - widgets.js - the first 20 or so lines show how I've included them into a component.
• Then later after writing your app logic; if you bundle your source code into app.bundle.js, you could include vendors.js and app.bundle.js in your index.html and also include the stylesheets from the public/dist folder. It would then work once you load it in a browser. You can see how I've done it for the widgets page.

I understand that it's not the ideal way of using these components (Maybe even painful! :sweat_smile: )- there's still lot of work need to be done. It's been more of a learn-as-you-go process! But I really really appreciate the feedback (the mentioned steps are only temporary), will certainly work towards making this much simpler.

Will also write a tutorial on this, thanks for the suggestion!

[andymac4182]

Thanks for replying @booleanhunter. I appreciate all the work you have put in to port away from jQuery and work on this project. I ended up using the admin-lte npm package and react-bootstrap.

It would be great if the client side of this was split out. I use dotnet as a backend and use react for the front end so didn't want to pull in express and some of the other server side packages. It would be great if this was split into two client vs server and used the admin-lte package for the CSS since it allows us to easily see the CSS used.

[hakimkal]

Thanks for your reply @booleanhunter. I admire your generous spirit. What you are doing is going to help alot of people. @andymac4182 great point raised. my use case for react is also majorly frontend. I use dotnet and django and really haven't seen the need to use all round javascript :)

[jafri]

@booleanhunter , with web pack enabled, my route exports linked to app.gets from the server.js file do not function properly. How am I supposed to serve an api with webpack.

If I try to start the server using mode server.js , I get the error that 'define is not defined', which is from the lack of an AMD loader I believe. So how should I approach this.

On Jun 19, 2016, at 4:50 AM, Abdulhakim Haliru [email protected] wrote:

Thanks for your reply @booleanhunter. I admire your generous spirit. What you are doing is going to help alot of people. @andymac4182 great point raised. my use case for react is also majorly frontend. I use dotnet and django and really haven't seen the need to use all round javascript :)

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[booleanhunter]

@nmsz97 Could you list the steps that you took to install the project?

[jafri]

Hi Ashwin,

I wonder if you were to refactor the code to work with mega boilerplate, it would be useful for a lot more people.

On Jun 19, 2016, at 10:40 AM, Ashwin Hariharan [email protected] wrote:

@nmsz97 Could you list the steps that you took to install the project?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[aumayr]

I ended up using the admin-lte npm package and react-bootstrap.

@andymac4182 Could you give some hints how you got this to work?

[andymac4182]

@aumayr I just included the CSS and used the correct classes for now. React bootstrap I am using to get nice support for bootstrap.

[aumayr]

Ahh ok I see, thanks for the hint @andymac4182!