I bought this product based on reviews .... big mistake.

The documentation is horrible.

I will be getting a refund today.
Our documentation is pretty straightforward as we cover installation of Rubix, document all the core components and describe the structure of Rubix. Can you please let me know where the documentation is lacking and how we can make it better?
I agree with @techsupport2000; the documentation is really horrible. To me the documentation is really superficial. I believe having a simple showcase like http://www.primefaces.org/showcase/ will be really helpful or even some video tutorials on Youtube will be a better idea.I am just struggling to use the template.
Hi cdaiga,

This is a 1 year old comment. Do you think this documentation we have provided here: http://rubix-docs.sketchpixy.com is "really horrible"? We revamped the entire documentation for Rubix 4.x. Are you sure you are on Rubix v4.1?
I just bought this product (which is awesome by the way), and am looking to use it within a Django application. I am able to get everything running, but it's loading pretty slowly, it takes around 4 seconds to load the blank app, whereas in the original rubix app it takes less than a second). I'm not sure exactly why this is happening...I suspect it is because I am using the "app.js" file instead of the "bundle.js" file, but I'm not exactly sure. Could you give me some ideas on how I could speed up the load time (I've seen some comments mention using nginx, so maybe that's a potential direction I could take...) ?
Hi diegoc1,

Is the load time after development or while developing your app using gulp? Are you talking about page load time or the time it takes for the bundle to get compiled? There isn't much that has changed between the versions except for a rewrite of the bootstrap core. So page load time should pretty much remain the same. Since you are experiencing load times magnitudes slower than the previous version, can you please explain your setup via our support email so I can help debug the issue?
Hello Diego.
I was wondering if you could give me a sample repository were you connect Rubbix and Django.

Before hand thanks
On the latest rubix version, when a scaffold a new project it gives me error

throw err;
Error: Cannot find module './public/js/newapp/newapp.node.js'
at Function.Module._resolveFilename (module.js:336:15)
at Function.Module._load (module.js:278:25)
at Module.require (module.js:365:17)
at require (module.js:384:17)
at Object.<anonymous> (/Users/vineesv/rubix-3.0/server.js:20:14)
at Module._compile (module.js:460:26)
at Object.Module._extensions..js (module.js:478:10)
at Module.load (module.js:355:32)
at Function.Module._load (module.js:310:12)
at Function.Module.runMain (module.js:501:10)

Such a file does not get created during scaffolding.
The last version had no such issue. What do I need to do differently?
The above error is not while scaffolding but while running
gulp --rtl --name newapp

Also I get this error

ERROR in ./src/jsx/road/main.jsx
Module parse failed: /Users/vineesv/rubix-3.0/src/jsx/newapp/main.jsx Line 3: Unexpected reserved word
You may need an appropriate loader to handle this file type.
| 'use strict';
| import 'preloader';
| import routes from 'routes';
Hi vineesv,

It seems like some NPM modules weren't installed (like babel-loader which is needed to parse main.jsx). Are you able to launch the demo app? If not, I would suggest checking if your npm install completed successfully (you shouldn't have an npm-debug.log in your root folder)

This is a great template/great components.

I'm new to React JS - do you (or anyone else here) have any sample applications, based on this template (and implementing either some of, or all of these components) which actually CRUD and manipulate data in a database/datastore?

Appreciate a response ASAP.

Hi Elton,

Unfortunately we don't have a sample app. But we are planning to provide tutorials for the same. Would you like any specific stack covered in the tutorial?
We are trying to do the same things with flux
I am trying to use the mozilla i20n.
If I use "entity" like you did in the template it work fine. But not when I use "data-l10n-id"

<Entity entity='defaultForm' /> => OK
<p data-l10n-id='defaultForm'></p> => KO

See reference doc: https://github.com/l20n/l20n.js/blob/master/docs/html.md#making-html-elements-localizable

Any idea? How can you translate the navigation in the sidebar without the data-l10n-id tag for example?
Thanks so much

Hi Nicolas,

Entity component is general enough that you can use it anywhere. For Sidebar navigation here is how you would do it:

name={<Entity entity='sidebarDashboard' />}
href='/app/dashboard' />

Hope this helps! :)
That works perfectly! Thanks a lot!!
I just did the npm install . and then ran gulp (I am a js developer and am familiar with gulp and node). However, as soon as I ran gulp, it kept on throwing errors of packages like lodash etc missing. Is this normal?
Hi sylphdesign,

It happens rarely but it looks like your npm installation did not complete. Can you check if you have a npm-debug.log file in your Rubix folder? Also can you remove the node_modules folder and re-run npm install again?
grbspltt PURCHASED
Is there a way to deploy just the public assets to a CDN and not have to use an express server? Perhaps I'm just missing something. Thank you.
Hi grbspltt,

You can always deploy the public assets to a CDN. However the "not having to use an express server" part confuses me. Do you want to deploy a static website? If so, just run: "gulp --rtl --name <app-name> --production" to generate the assets. These assets are stored in the "public" folder. Use an index.html file similar to this: https://gist.github.com/shripadk/798b87a90fb3836c5ac3 and place it inside the public folder. Then deploy the public folder to your server.
grbspltt PURCHASED
My site isn't going to be static, it will consume data via a REST API I'm building to go with the app. I understand the template is designed to be isomorphic, but I'm not very concerned with that. Do you foresee any issues using this template? I understand developing React + Flux applications, but I'm just getting acquainted with the template structure and workflow. It is complicated to say the least.
Hi grbspltt,

You can follow the steps I outlined in the previous reply to use it even with a REST API. Since your code for calling the REST API lies on the client side, the generated assets stored in the "public" folder will contain that code.

Hope this helps! :)
I am using node.js for powering this template. Could you please help me with populating gallery page based on data I receive from API. I am parsing the data and storing it in arrays, but having some difficulties.
Hi darshit92,

You can populate the gallery items first and then call blueimp.Gallery as described in this gist: https://gist.github.com/shripadk/d934f198a579372b25ae

Hope this example helps :)
Thank you :)
Hey, I tried implement it. But I get error saying : this.state.galleryItems.map

Why would this be ?
Figured it out
I forgot to add a return within this.state.galleryItems.map. I just updated the gist. Can you try it out again?
I had a problem launching the application with gulp. The loading bar was going slowly to 99 percent and never reach 100 percent. I tried to launch it without any other services on my computer (Window Safe Mode) and all work fine. I discovered that the service Ad-Aware was stopping browser -sync at some point.

Thank you for having helping me (mail exchange)
Thanks for letting us know the solution! :)
Can you discuss solution here ? I am facing the same problem
How do I run this via SSL / HTTPS? Because I get mixed content errors due to the loading of bundle.js for example...(I'm proxying it through nginx)
Hi lookapanda,

Looks like you are running gulp development server in production. Just compile the assets for production and run the plain node server instead. That way, when you proxy through Nginx you won't get any mixed content errors. To do that run the following command in your development machine:

$ gulp --rtl --name <app-name> --production

Then deploy to production. In your production instance run the following command:

$ NODE_ENV=production APP=<app-name> PORT=80 node server.js
Dear sketchpixy,

Truly, a great looking template...
I got the notification for v3.0.3 and downloaded it and wanted to clarify a few things:

1. I am assuming that the core folder is a ClojureScript implementation and doesn't have anything to do with the core react app, which lives in the 'default' folder - correct?

2. Is there a way for the build script to be able to completely populate the public folder from scratch? Currently, if I build a production version with an empty public folder, I get a whole bunch of 404 file not found errors when using the index file from the jsx folder or from your github gist.
Hi kewlking,

1. Yes. The core folder only contains the Bootstrap core rewritten in clojurescript. We are preparing documentation for it including details on how to build it.

2. Currently no. But we can provide this functionality along-with the scaffolding gulpfile that already exists. Any reason why you want to build a production version with an empty public folder?
Thanks for your prompt response!

RE: the empty Public folder, there is no strict requirement per se; - I spent the whole day today trying to understand the build process and the various config files and I wanted to find what assumptions were being made by the html file and how the various build files were supplying these requirements.

I guess my overarching question is that I find the build process to be rather hard to understand, especially given that I am not a JS tools expert. As I asked in my other question, I am not able to streamline the gulpfile since I don't understand it completely (despite the documentation around the gulpfile).

Would it at all be an option to create a rather simple webpack config file that only does handles the compilation and bundling accompanied by an 'empty' html file that only has a placeholder div and requires the compiled script bundle? I am sure that it would help many more people beyond myself...
As I said earlier the gulpfile is as simple as it can get. Maybe if you can let me know why you want to streamline the gulpfile it would help provide a solution. Do you want to add new plugins? new tasks maybe?
Also, in the gulpfile, can you explain what the WebPackDevServer is doing vs. Express? Is there a reason we need both? Alternatively, is there a barebones gulpfile/webpack file that you can supply that is simpler in terms of its tasks and easier to follow?
The WebpackDevServer is useful for quick rebuilding of JSX files with the result being stored in an in-memory cache (instead of having the file written to disk). This speeds up development time a lot. However, since the default Rubix setup uses Node as a backend we shipped a separate Express server for backend routing and serving server-side rendered HTML. The webpack author himself recommends to use a separate backend server as WebpackDevServer shouldn't be used in production anyways (read: http://webpack.github.io/docs/webpack-dev-server.html#combining-with-an-existing-server)

The gulpfile is mainly for building various things like fonts, css and jsx files. It's the most simplest possible setup and I'm not sure if it can be further simplified. Any reason why you want to tinker with the build file?
sketchpixy: in your JSX files, from where are you getting these following components:
Container, Grid, Row, Col, PanelContainer, Panel, PanelBody

Is it from rubix-bootstrap.js? Is there a documented, un-minified version of it available?
Hi kewlking,

I think I answered this already in your previous comment. Yes it's from rubix-bootstrap.js. The un-minified version is in the "core" folder that you see in your download. It contains the Bootstrap core rewritten in clojurescript. We are preparing documentation for it including details on how to build it.
ah - gotcha, thanks!
I've recently bought this admin template for one of my projects and since I am pretty close to the and I wanted to start integrating this panel in my framework. The problem is I cannot install it on the server. Can you tell me why this errors occure and how to fix them :

1082 error Error: No compatible version found:
[email protected]'shripadk/react-ssr-temp-fix'
1082 error Valid install targets:
1082 error
1082 error at installTargetsError
1082 error at /usr/lib/node_modules/npm/lib/cache.js:638:10
1082 error at saved
1082 error at /usr/lib/node_modules/graceful-fs/polyfills.js:133:7
1082 error at Object.oncomplete (fs.js:108:15)
1083 error If you need help, you may report this log at:
1083 error <http://github.com/isaacs/npm/issues>
1083 error or email it to:
1083 error <[email protected]>
1084 error System Linux 2.6.32-504.12.2.el6.x86_64
1085 error command "node" "/usr/bin/npm" "install" "."
1086 error cwd /root/rubix/shipping copy/default/rubix-3.0
1087 error node -v v0.10.36
1088 error npm -v 1.3.6
1089 verbose exit [ 1, true ]

Also I don't see 0.12.7 in the supported versions which is on their website at the moment.

Best regards,
Hi Vlad777,

Can you let me know the version of NPM you are on?

$ npm --version

Also, if possible, can you please provide the npm-debug.log generated in your Rubix root?
Also as the npm-debug.log is pretty huge it'll be best if you could mail it to us ([email protected]).
npm --version

Log sent by-mail
Thanks for the log. Replied to your email with the solution.
grbspltt PURCHASED
I built the sidenav to be dynamically built based on JSON and each nav item links to a project page = /project/1234 (or whatever id is contained in the JSON). I have the react router be dynamic based on a prop in the path = /project/:projectId

The side nav works, links take the user to the correct page, however if I select a different link, both nav items are marked as active. Not sure if this is related but the router doesn't appear to include the params object in the props. So this.props.params.projectId is undefined. Actually this.props.params is totally undefined. Rubix is using react-router 1.0.0-beta3 so the documentation isn't exactly clear or up to date anymore.
grbspltt PURCHASED
I figured out one thing, I was trying to access this.props.params from a sub component, not the main exported component, so we're all good there, but I do need assistance getting the side nav to show the correct active SidebarNavItem.
Hi grbspltt,

I replied to the mail you sent earlier. Regarding the SidebarNavItem, you are right. This happens when the Sidebar's nav items are constructed dynamically. I have sent you the fix via mail to test. Please let me know if everything works fine. If it does, we'll be pushing this fix by tomorrow.
grbspltt PURCHASED
That did the trick! Thank you!
Thank for your support so far. We need this fix too, its happening the same thing to us. Thank you.
Hi staminaloops,

We pushed the fix yesterday. Please let us know if it fixes your problem. Thanks!
Sorry for late response, I didnt see the your comment. It works! Thank you.
I got it to work and I really like Rubix so far. But I'm pretty new to ReactJS and I read some tutorials and now I want to connect Rubix to my API based on Laravel. How do I do that? I want it to use JWTokens for authenticating.
I read this (https://auth0.com/blog/2015/04/09/adding-authentication-to-your-react-flux-app/) tutorial but the Rubix ReactJS code seems to be very different from the code in the tutorial...can you help me out on where to start?
And I also get this when creating the login page: https://i.lookapanda.de/f/TE7nwyW5.png
Why? I just copied it 1:1 from the demo app :/
Hi lookapanda,

Did you copy the necessary styles for it? Copy _auth.scss from the demo's scss folder. I'll get back to you on Laravel and the tutorial you linked to after going through it. We already have planned Laravel integration for Rubix. No ETA as of yet.
I found out that I had to copy them later on but thanks anyway.

I know that you have planned an integration for Laravel but you announced that integration somewhat over 1 year ago or so...

For the beginning, I would really be happy if I just knew where to start to integrate an authentication in the first place..
grbspltt PURCHASED
Is there a way to enable the js source map? Right now I'm just getting errors like this in the chrome dev tools console: "selected is undefined - app.js:5218"

Thank you.
There should be a way to enable JS source maps in webpack. I'll get back to you on this asap.
grbspltt PURCHASED
Thank you.
grbspltt PURCHASED
Hi grbspltt,

Sorry for the delay.

Replace your gulpfile.js with this: https://gist.github.com/shripadk/3f91bc030a6a1ef9e2c3

Currently, source-maps only works with webpack-dev-server. To load the source map just add a script tag in your index.html pointing to: localhost:8079/scripts/bundle.js.map

We'll include this option in the main release when source-maps is enabled for webpack-stream which Rubix uses to build JSX files (see this issue for more details: https://github.com/shama/webpack-stream/issues/40)
grbspltt PURCHASED
I added the localhost:8079/scripts/bundle.js.map link to index.html, however it looks like the index.html page gets rebuilt whenever gulp reloads. The links to my vendor js and css files also get removed from the index.html file as well. Is there another place I should be adding these files?

I did add the vendor js files to plugins.js but I'm not really sure what this does, as none of the objects from my vendor js files are available. They work just fine when I have the vendor files loaded via the script tags in my index.html, but those get blown away whenever gulp reloads.
Is there a way to remove the controls of Panel components? I found nothing in the document about available properties of Rubix components. If I want to edit default components, which files/folders should I look for?

Thank you!
Yes you can. Just add "plain" prop to Panel component. To edit the core components you have to look at the "core" folder. We are currently simplifying the process of building the core and will be providing more documentation on how to build your own version. If you want to know more about the build process you can mail us and we'll walk you through the steps.
Thank you! Any estimated time of release for the document?
I tried below code but the controls still shows up.
<Panel plain={true}>
<PanelBody className='text-center'>
Hi tdduong,

Sorry for the confusion. The "plain" property is for PanelContainer component. You can also pass in your own controls using the "customControls" property. ETA for the documentation will be by this weekend. We plan to release documentation for this as well as building a custom Bootstrap core along with PHP integration.

Hope this helps!
We have a problem with the installation again. Updated and did all we get in return from you and everything went fine. Now we installed it and there is another problem. When I try to open the Rubix Template - the title is loaded, there are a lot of javascripts loaded but we get blank page. I also want to know how can I install it so I can integrate this admin template in my codeigniter projects. Can I do it like I regulary split my views or should I do something more specific?

Best regards,
Hi Vlad,

Are you accessing Rubix via an external IP? If so you would need to pass in the "whost" option to your gulp command like so:

$ gulp --rtl --name demo --whost
Okay we connected our administrator and he will try to fix it. What can u tell me about my other question. How can I integrate the template in the codeigniter 3. Can I split the views etc. as usual or something special is required.
I'll get back to you on this soon via email. We are working on Codeigniter integration along with Laravel integration for the next release.

Write a comment

This is a great way to give the seller feedback and ask them questions about their item.

You must sign in to write a comment

Sign in or sign up to make a purchase


Licenses: Details »

Single application $24
  • HTML Template
Bootstrap: Compatible with 3.3.x
  • Responsive
  • Fluid
  • Fixed-width
  • IE 9, 10, 11
  • Latest Chrome
  • Latest Firefox
  • Latest Safari
Uses Less:No
Uses Sass:Yes
Labels: admin, bootstrap, dashboard, graphql, laravel, meteor, rails, reactjs, redux, relay
Released:4 years ago
Updated:2 years ago
Sold exclusively on WrapBootstrap


Signed up 4 years ago

Need a front-end template?

About Bootstrap

Bootstrap is designed to help people of all skill levels – designer or developer, huge nerd or early beginner. Use it as a complete kit or use it to start something more complex.

Unlike other front-end toolkits, Bootstrap was designed first and foremost as a styleguide to document not only its features, but best practices and living, coded examples.

Built to support new HTML5 elements and syntax with progressively enhanced components.

Browser support

Bootstrap is tested and supported in major modern browsers like Chrome, Firefox, and Internet Explorer.

Tested and supported in Chrome, Safari, Firefox, Internet Explorer, and Opera.
  • Latest Chrome
  • Latest Firefox
  • Latest Safari
  • Latest Edge
  • Internet Explorer 10/11
  • Latest Opera

Features & includes

Bootstrap provides an unparalleled array of features and reusable components that let you hit the ground running:

  • Responsive 12-column grid
  • 12 custom, modular jQuery plugins
  • CSS styles for forms, navigation & more
  • Dozens of reusable components
  • Components are scaled according to a range of resolutions and devices
  • Built with Sass (CSS included)
  • Complete styleguide documentation