I have an error when I put the direct url to a component that uses a plugin such as Jquery. (For example: http://localhost:8080/settings) I have the following error ReferenceError: $ is not defined
But when I load the homepage first (http://localhost:8080) and then go to /dashboard, I no longer have the error, could you tell me how to solve the problem.
It seems like plugins are loaded after the component is rendering

ReferenceError: $ is not defined
at Settings.componentWillMount (D:\Miakka_Corporation\Applications\VisionApAdminPanel\tmp\webpack:\src\routes\Settings.js:23:9)
at D:\Miakka_Corporation\Applications\VisionApAdminPanel\tmp\webpack:\~\react-dom\lib\ReactCompositeComponent.js:348:1
at measureLifeCyclePerf (D:\Miakka_Corporation\Applications\VisionApAdminPanel\tmp\webpack:\~\react-dom\lib\ReactCompositeComponent.js:75:1)
at ReactCompositeComponentWrapper.performInitialMount (D:\Miakka_Corporation\Applications\VisionApAdminPanel\tmp\webpack:\~\react-dom\lib\ReactCompositeComponent.js:347:1)
at ReactCompositeComponentWrapper.mountComponent (D:\Miakka_Corporation\Applications\VisionApAdminPanel\tmp\webpack:\~\react-dom\lib\ReactCompositeComponent.js:258:1)
at Object.mountComponent (D:\Miakka_Corporation\Applications\VisionApAdminPanel\tmp\webpack:\~\react-dom\lib\ReactReconciler.js:46:1)
at ReactDOMComponent.mountChildren (D:\Miakka_Corporation\Applications\VisionApAdminPanel\tmp\webpack:\~\react-dom\lib\ReactMultiChild.js:238:1)
at ReactDOMComponent._createContentMarkup (D:\Miakka_Corporation\Applications\VisionApAdminPanel\tmp\webpack:\~\react-dom\lib\ReactDOMComponent.js:653:1)
at ReactDOMComponent.mountComponent (D:\Miakka_Corporation\Applications\VisionApAdminPanel\tmp\webpack:\~\react-dom\lib\ReactDOMComponent.js:520:1)
at Object.mountComponent (D:\Miakka_Corporation\Applications\VisionApAdminPanel\tmp\webpack:\~\react-dom\lib\ReactReconciler.js:46:1)
Hi savigool,

Do you have a separate view created for your settings route? All views share the same views/layout.pug template for loading plugins. If you have created a separate view, please make sure to extend the same views/layout.pug file.

If you haven't created a separate view then make sure you call your jQuery related code within componentDidMount of your React component.
Hi ,

Thank you for your reply. I call the JQuery code in componentWillMount, when I call it on componentDidMount it works, but I still have other errors.

On routes.js, for example i tried to use localStorage, I have the following errors:
ReferenceError: localStorage is not defined
at Object.loggedIn (D:\Miakka_Corporation\Applications\VisionApAdminPanel\tmp\webpack:\src\routes.js:77:14)
at Object.requireAuth [as onEnter] (D:\Miakka_Corporation\Applications\VisionApAdminPanel\tmp\webpack:\src\routes.js:97:13)
at Array.transitionHook (D:\Miakka_Corporation\Applications\VisionApAdminPanel\node_modules\react-router\lib\TransitionUtils.js:49:10)
at D:\Miakka_Corporation\Applications\VisionApAdminPanel\node_modules\react-router\lib\TransitionUtils.js:120:17
at D:\Miakka_Corporation\Applications\VisionApAdminPanel\node_modules\react-router\lib\TransitionUtils.js:90:5
at next (D:\Miakka_Corporation\Applications\VisionApAdminPanel\node_modules\react-router\lib\AsyncUtils.js:39:12)
at loopAsync (D:\Miakka_Corporation\Applications\VisionApAdminPanel\node_modules\react-router\lib\AsyncUtils.js:56:3)
at runTransitionHooks (D:\Miakka_Corporation\Applications\VisionApAdminPanel\node_modules\react-router\lib\TransitionUtils.js:89:29)
at runEnterHooks (D:\Miakka_Corporation\Applications\VisionApAdminPanel\node_modules\react-router\lib\TransitionUtils.js:113:10)
at D:\Miakka_Corporation\Applications\VisionApAdminPanel\node_modules\react-router\lib\createTransitionManager.js:86:42

The same when I try to use other HTML5 components, like new Image(), i have Image is not defined.
Hi savigool,

localStorage is only available within the browser. So if you use localStorage, either make sure you call these browser related functions from within componentDidMount or wrap them within an isBrowser() code block like so:

import { isBrowser } from '@sketchpixy/rubix';

if ( isBrowser() ) {
localStorage.setItem('key', 'value');
When running the Relay example I get the error
"[dev:server] fetchWithRetries(): Failed to get response from server, tried 1 times.".

I've tried on Chrome and Firefox on OSX. Any ideas?

[dev:server] Node.js app is running at http://localhost:8080/
[2] [update:schema] Finished writing data/schema.graphql
[2] [update:schema] Finished writing data/schema.json
[2] [update:schema] [nodemon] clean exit - waiting for changes before restart
[2] [dev:server] fetchWithRetries(): Failed to get response from server, tried 1 times.
'Mongod' wasn't loaded correctly. Issue fixed
There is a bug in SidebarNav when using the search function.
The elements present in collapsed SidebarNavItem submenus are not automatically visible.
Parents menu should be placed in not collapsed state.
The bug is present in your online demo also.
I have to create a very large menu tree and your search function is very useful.

Thank you
Hi stefsava,

Thanks for the report. We intentionally kept it simple enough and did not implement the functionality to keep the parent always visible on search filter. However, the upcoming release will have better search functionality.
Is it possible to disabled a SidebarNavItem ??
Hi saviogool,

No prop to disable in the current release but you can however add a ":disabled" to your SidebarNavItem's href property which will disable the SidebarNavItem:

<SidebarNavItem glyph='icon-fontello-home' name='Todos' href={this.state.disableTodos ? ':disabled' : '/todos'} />
Hello. Is there any documentation on Rubix Charts, especially the one in the Dashboard with the sub-chart thing? I'd really like to customize it , but I'm heaving trouble figuring out the API.
Hi mprates,

Currently we don't have a documentation for the charts but we have provided examples that covers all the functionalities in the demo/src/routes/AreaSeries.js, demo/src/routes/BarColSeries.js, demo/src/routes/MixedSeries.js, demo/src/routes/LineSeries.js, demo/src/routes/PieDonutSeries.js and of course demo/src/routes/Dashboard.js files.
Hi there!

I am starting a project without nodeJS. I am using plain HTML, JQuery and PHP. Would it be possible to implement your template without nodeJS but using Reactjs in my project?

I really want to avoid the package npm system with all the modules structure since I have very little time to finish it and I can't risk to learn this things now :P, will do in the near future though :)
Hi Gazpa,

> I am starting a project without nodeJS. I am using plain HTML, JQuery and PHP. Would it be possible to implement your template without nodeJS but using Reactjs in my project?

Unfortunately no. We rely on the Node ecosystem (Webpack, Babel etc) to generate/compile the App specific JS/CSS and other assets.

I am starting on this theme newly.
Just out of curiosity, do you have the code for the dashboard template?
Hi sathish_govindaraju,

Yes we do. It can be found in the rubix/demo directory.
Hi, I use the latest template with Meteor 1.4.
The code uses WebPack development server ("devServer") with a default port 3500. I would like ALL resources to be handles with the Meteor server.
Can you please advise how to configure the code to do that?

Here is my webpack.json:
"root": ".",
"devServer": {
"host": "myserver.mydomain.com",
"hotMiddleware": {
"reload": true
"externals": {
"react": "React",
"react-dom": "ReactDOM"
"postcss": [
["autoprefixer", { "browsers": ["last 2 versions", "> 1%", "ie 9"]}]
Hi zivbe,

During development, all resources are handled by webpack-dev-server. In production all resources are handled only by the Meteor server and not by webpack-dev-server.

If you want Meteor to handle all resources in both development/production please write us a mail at support@sketchpixy.com. We have a pure Meteor integration of Rubix (which doesn't depend on Webpack) currently in beta and we can provide access to it.

Hope this helps!
Hi, thanks a lot for the quick answer!
Sorry for the stupid question, but how do I work in production mode?

Do you refer to running with the "meteor" command the development mode and building meteor with "meteor build" and running it with node.js the production mode?

Please explain.

I will be happy to get the Beta version as-well
HI zivbe,

> Do you refer to running with the "meteor" command the development mode and building meteor with "meteor build" and running it with node.js the production mode?

Yes. You can either build meteor manually using "meteor build" or use a tool like kadirahq/mup for automating the deployment (read more about it here: https://guide.meteor.com/deployment.html#mup). Or you can simply deploy to Galaxy (we also provide documentation for that here: http://rubix-docs.sketchpixy.com/meteor/deployment).

> I will be happy to get the Beta version as-well

Great! Please send us a mail at support@sketchpixy.com along with the License ID of your purchase and we'll send you the download link.
I'm looking forward to Apollo release. Do you have any ETA on that one?
Hi izeroman,

We are writing documentation for it. It will be released by end of the week. If you want beta access send a mail to support@sketchpixy.com

Hope this helps :)
How is it coming along?
Hi, I use the react redux version. Can you please tell me how "app_stylesheets" got populated in views/index.pug? I would like to customize the value of "app_stylesheets", but I am not able to find the place.
Hi nliu2008,

We define "app_stylesheets" in a middleware called RubixAssetMiddleware. It is found in rubix/rubix-bootstrap/src/node/RubixAssetMiddleware.js. You can copy this file to your project folder, make your own modifications and then import it in server.babel.js.

Any reason why you want to customize "app_stylesheets"?
Hi sketchpixy,
The reason I want to customize "app_stylesheets" is because I keep css with the js file, for example, for pageA.js, I have pageA.css in the same folder, and import "pageA.css" from pageA.js. Webpack will bundle these css files in production mode, and generate the bundle "app.css". So I need to add "app.css" to the "app_stylesheets".
I feel organizing the css this way is better. Do you think if there is any reason I should keep the css/scss files in the "sass" folder?
Hi sketchpixy,
What do you recommend? Should I keep my css/scss files in the "sass" folder or I can keep them with its js files, and let webpack to generate the app.css bundle?

How can I customize initial progression bar visible when dashboard is loading?
If you could just point me to the proper file it would be enough ;)
I am using standard node.js version.

Best regards,
Hi Chris,

You can modify the public/css/pace.css file. Specifically the "body.pace-big" styles. It contains all styles for the initial progress bar when dashboard loads.

Hope this helps :)
Hi! You'v made a nice product! Do you plan to make an Elixir (Phoenix) integration? Elixir is going trendy nowadays ;)
Hi gaztel,

> You'v made a nice product!

Thank you :)

> Do you plan to make an Elixir (Phoenix) integration? Elixir is going trendy nowadays ;)

We already have a few integrations planned for the upcoming releases however we do not have a plan for Elixir (Phoenix) integration as of now. But we will consider it for a future release. Thanks for the feedback! :)
How can use mysql as database ?
Hi blondie63,

You can replace promised-mongo that we already provide with promise-mysql (https://www.npmjs.com/package/promise-mysql) for connecting to your MySQL backend.

Hope this helps :)
I've to start a very simple project to manage 3 mysql tables (customers, sales, sales_types)
I need authentication
to whom seed project you recommended to start?
node-seed, relay-seed or redux-seed?
Hi blondie63,

redux-seed is good to start. However, we also have Apollo integration with Auth0 which might make it easier for you to get going with authentication. Send us a mail to support@sketchpixy.com if you are interested in beta access to the Apollo integration.

I have a couple of presale questions:
1.- What version of Laravel is supported?
2.- Is a full blade template?

1. Laravel 5.3
2. No. It is a React view layer with Laravel backend.

I am using ReactJS template for my project. All setup done and working fine except if I installed some third party plugin and given its js path in plugins.js and css file path in main.scss
like @import "~bower_components/chosen/chosen.css". Plugin is working fine stylesheet included but images for the plugin not coming and giving error:
GET http://bower_components/chosen/chosen-sprite.png 404 (Not found)

FYI: I have changed "publicPath: isProduction ? '/' : publicPath" to "publicPath: isProduction ? '/' : '.'" in tools/webpack.client.js as on server my fonts were not displaying
and their path still coming as http://localhost:8079/assets/fonts/a96eacf834096e2ffe6b44eff64d0b73.woff2 if I used "publicPath: isProduction ? '/' : publicPath".

Please assist me on this as this issue is happening for all third party plugins I am using.
Hi divaa12880,

Why are you trying to import like this?:

@import "~bower_components/chosen/chosen.css"

You can just import directly:

@import "bower_components/chosen/chosen.css"

There is no need to make changes to the tools/webpack.client.js file. If you are running it on the server, you should be running in production mode like so:

$ npm run build:prod -s # run this command in your local machine and then push to server

$ npm start -s # run this command in your server

You shouldn't be running "npm run dev -s" in the server.

If I am trying to import like "@import "bower_components/chosen/chosen.css" this, m getting below error:
Module not found: Error: Cannot resolve 'file' or 'directory' ./bower_components/chosen/chosen.css in C:\xampp\htdocs\rubix\ntgu_Admin_Console\sass
resolve file
C:\xampp\htdocs\rubix\ntgu_Admin_Console\sass\bower_components\chosen\chosen.css doesn't exist
C:\xampp\htdocs\rubix\ntgu_Admin_Console\sass\bower_components\chosen\chosen.css.json doesn't exist
C:\xampp\htdocs\rubix\ntgu_Admin_Console\sass\bower_components\chosen\chosen.css.js doesn't exist
resolve directory
C:\xampp\htdocs\rubix\ntgu_Admin_Console\sass\bower_components\chosen\chosen.css doesn't exist (directory default file)
C:\xampp\htdocs\rubix\ntgu_Admin_Console\sass\bower_components\chosen\chosen.css\package.json doesn't exist (directory description file)
@ ./~/css-loader?-minimize&importLoaders=1&root=../public&!./~/postcss-loader?pack=normalprefixer!./~/sass-loader?!./sass/main.scss 3:10-201
Weird. Can you try this then:

@import "../public/bower_components/chosen/chosen.css";

I am developing using your template, and I'm with the following difficulties:
I'm having trouble creating a specific component for connecting to the back-end using the axios. Can't import normally in any part of the demo version, as for example, in Signup.js.
I need to specify anywhere else imports that used to create a new component?
This is exactly the error:
import axios from 'axios';
[2] ^^^^^^
[2] SyntaxError: Unexpected token import
[2] at Object.exports.runInThisContext (vm.js:76:16)
[2] at Module._compile (module.js:542:28)
[2] at Object.Module._extensions..js (module.js:579:10)
[2] at Module.load (module.js:487:32)
[2] at tryModuleLoad (module.js:446:12)
[2] at Function.Module._load (module.js:438:3)
[2] at Module.runMain (module.js:604:10)
[2] at run (bootstrap_node.js:394:7)
[2] at startup (bootstrap_node.js:149:9)
[2] at bootstrap_node.js:509:3 "

This error only happens in components that I created. It happens in any component that I create.
*I can import normally in any part of the demo version, as for example, in Signup.js.
Hi JulianoGTZ,

Which folder are you creating your components in? Is it the "src" folder? Also, in which file are you importing the said component?
I was trying to implement the component in the bower_components folder, so it didn't work. Implemented in the "src" folder and it worked great. Thank you very much for your help.
Is there any guide on deploying this to aws s3 directly?
After developing your project just run:

$ npm run dist -s

The above command will generate a "distributable" in a dist folder within your project root. Then sync to your S3 bucket like so:

$ aws s3 sync dist s3://yourbucket

And you should be good to go :)

You can read more about distributables here: http://rubix-docs.sketchpixy.com/node/creating-distributables
Hi - love the look of Rubix and am getting familiar with it.

I am able to run the node-seed project from my Windows 10 command line, as described in the documentation. As a .Net developer though I'd like to be able to work with it from my normal IDE, VS 2015, which does provide a Template for pulling in a Node.js project "from existing code" (via VS Tools for Node.js).

When I do that, and run the project (it does then run under Node), I get an error from server.babel.js
"Unexpected token import".

I should note that this is my first real experience running Node.js so I may be missing something obvious to others but it feels like somehow perhaps Webpack is not running to execute Babel properly or something similar. There is however no Webpack.config file in the node-seed project (or any of them that I can find) so I'd like some guidance as to how I can either

- make the necessary adjustments to the startup script, or
- find out what it is that Node.js is doing from the command line that the VS 2015 implementation of Node.js is not doing (if that makes sense).

BTW I did find another reference to the same error in the comments a year or so ago, where the answer was to include the "dot" files in the project. Because I have pulled the existing node-seed project into VS, those files are already there, so that doesn't seem to be the case here.

Any help greatly appreciated :-)

I set the Node.js startup file to /tools/webpack.server.js and hooray, it compiles and runs without error, echoing "Debugger listening on Port 8080", however http://localhost:8080 produces "connection refused" and a ping produces "host not found".

Port 80 is being used by local IIS and runs/pings localhost correctly on the normal port, but to be sure its not interfering I have stopped the service.

I have also made sure that I am running VS 2015 and Chrome as Administrator and just in case have taken the 'readonly" flag off of the node-seed project directory and provided full Admin permissions there.

So, a step further, but still stuck :-)
Hi Serexx,

Haven't tried importing a Node project in VS 2015 yet but from the console message "Debugger listening on Port 8080" it looks like you are starting a Node debugger on Port 8080 instead of launching the Rubix app on Port 8080. This is the message you should be getting in your console and not "Debugger listening on Port 8080":

[2] Waiting for tmp/bundle.js (max 120 seconds)
[1] http://localhost:8079/webpack-dev-server/
[1] webpack result is served from http://localhost:8079/assets/
[1] content is served from http://localhost:8079
[0] Hash: 13217de7ec90b21b0618
[0] Version: webpack 1.14.0
[0] Time: 30697ms
[0] Asset Size Chunks Chunk Names
[0] bundle.js 2.39 MB 0 [emitted] main
[0] bundle.js.map 3.05 MB 0 [emitted] main
[0] [0] multi main 28 bytes {0} [built]
[0] + 671 hidden modules
[2] Ready. tmp/bundle.js added
[2] [dev:server] [nodemon] 1.11.0
[2] [dev:server] Node.js app is running at http://localhost:8080/

However, we'll try it out and get back to you on this.
When will the Apollo implementation be available?
By end of the week. If you want early access just write a mail to support@sketchpixy.com and we'll provide you the ZIP files.

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 $20
  • 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
Tags: admin, bootstrap, dashboard, graphql, laravel, meteor, rails, reactjs, redux, relay
Released:3 years ago
Updated:1 year ago
Sold exclusively on WrapBootstrap


Signed up 3 years ago

Need a front-end theme?

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 9/10/11
  • Latest Opera

Features & includes

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