1482 comments

nliu2008 PURCHASED
I am trying to integrate this to my existing react/redux project. I got this error in my browser. Please note that the error shows up in the browser window, not the console. Do you know how to make the source map work in this case? I already have source map working on the client side code. In the chrome debugger, I am able to open the individual files.
--------------------------------------------------------------------
TypeError: Cannot read property 'get' of undefined
mapStateToProps
http://localhost:8079/assets/js/app.js:64778:417
ProxyComponent.configureFinalMapState
http://localhost:8079/assets/js/app.js:13119:28
Hi nliu2008,

> I am trying to integrate this to my existing react/redux project. I got this error in my browser. Please note that the error shows up in the browser window, not the console. Do you know how to make the source map work in this case? I already have source map working on the client side code. In the chrome debugger, I am able to open the individual files.

Have you tried with this:

$ SOURCEMAP=true npm run dev -s

? Does it give you the correct source map in the stacktrace on page load with SOURCEMAP enabled? If not, is it possible for you to send your project as a ZIP file to support@sketchpixy.com? We'll take a look at the code and debug the error for you (and also figure out why the sourcemap is not being picked up while displaying the stacktrace).
nliu2008 PURCHASED
Hi Sketchpixy,
I am able to reproduce this problem using the "redux-seed" project.
Just add this line into "src/routes/Home.js" at the beginning of the "render()" method
throw new Error('a big error!');
Then launch the app using
$ SOURCEMAP=true npm run dev -s

You will see the error page without sourcemap.

Please note that the sourcemap on the client side works. The problem is about sourcemap when doing server side rendering.

Could you please help? Thanks!
Hi nilu2008,

Can you please replace your tools/webpack.client.js file with this: https://gist.github.com/sketchpixy/e7ce41935563420a16a99a54ecce6292 and let me know if it fixes the sourcemap issue?
nliu2008 PURCHASED
Which part of the app is using the "fetching" and "routing" properties in the redux state?
We use a fork of redux-fetch-data module (https://npmjs.com/package/@sketchpixy/redux-fetch-data) which utilizes the "fetching" and "routing" properties in the redux state.
nliu2008 PURCHASED
Hi sketchpixy,
According to this source code, https://github.com/nordsoftware/redux-fetch-data/blob/develop/src/fetch-data.js

"redux-fetch-data" only uses "fetching". Who is using routing?

I think the documentation could be better for the redux integration. The user needs to know what setupReducers does. The user can avoid using "fetching", and "routing" as property names in the root level of the reducer. The source code for redux-router.js you provided makes a lot of sense.

export function setupReducers(reducers) {
reducer = combineReducers({
...reducers,
fetching: fetching,
routing: routerReducer,
});
}

Thanks!
> According to this source code, https://github.com/nordsoftware/redux-fetch-data/blob/develop/src/fetch-data.js

> "redux-fetch-data" only uses "fetching". Who is using routing?

"routing" is, as you guessed it, used by "routerReducer" which is part of 'react-router-redux' module.

> I think the documentation could be better for the redux integration. The user needs to know what setupReducers does. The user can avoid using "fetching", and "routing" as property names in the root level of the reducer. The source code for redux-router.js you provided makes a lot of sense.

You are right about the documentation. We need to document setupReducers like we have done for applyMiddleware (http://rubix-docs.sketchpixy.com/redux/custom-middleware). It will be done in the upcoming release.
nliu2008 PURCHASED
I am using ImmutableJS with my redux project. After the state gets serialized into plain JavaScript objects on the server-side, and deserialized on the client-side, the action-reducer gets a non-default state of type Object, not Immutable Map it expects.
Where is the proper place I need to make change to convert the plain object back to a ImmutableMap?
Thanks!
Hi nliu2008,

Please use this file: https://gist.github.com/sketchpixy/44030b1c76a62125fccd116a9284dc60 and store it in your "src" folder and import it directly instead of "@sketchpixy/rubix/lib/node/redux-router". Have modified it to convert the plain object to an ImmutableMap. The changes made are highlighted here: https://gist.github.com/sketchpixy/44030b1c76a62125fccd116a9284dc60#file-redux-router-js-L98

Let us know if this helps! :)
nliu2008 PURCHASED
Hi sketchpixy,
Since this file has dependencies on its local files. Directly importing it won't work. i.e. it has these lines:
-------------------------------------------------------
import onRouterSetup from './onRouterSetup';
import onRouterUpdate from './onRouterUpdate';
import checkScroll from './checkScroll';
-------------------------------------------------------
Is that possible to change the source code to have another export? something like this:
var stateDeserializer;
export function setupStateDeserializer(deserializer) {
stateDeserializer = deserializer
}
......
const initialState = stateDeserializer(getData());

Thanks!
nliu2008 PURCHASED
Just to correct what I posted above,
for this line
const initialState = stateDeserializer(getData());

change to
const initialState = stateDeserializer ? stateDeserializer(getData()) : getData();
Hi nliu2008,

> Since this file has dependencies on its local files. Directly importing it won't work. i.e. it has these lines:
-------------------------------------------------------
import onRouterSetup from './onRouterSetup';
import onRouterUpdate from './onRouterUpdate';
import checkScroll from './checkScroll';
-------------------------------------------------------

Sorry about that. Have updated the gist to fix those import issues: https://gist.github.com/sketchpixy/44030b1c76a62125fccd116a9284dc60

> Is that possible to change the source code to have another export? something like this:
var stateDeserializer;
export function setupStateDeserializer(deserializer) {
stateDeserializer = deserializer
}
......
const initialState = stateDeserializer(getData());

Sure you can make those changes if you like. We initialize the client-side initialState here: https://gist.github.com/sketchpixy/44030b1c76a62125fccd116a9284dc60#file-redux-router-js-L98 and the server-side initialState here: https://gist.github.com/sketchpixy/44030b1c76a62125fccd116a9284dc60#file-redux-router-js-L150
nliu2008 PURCHASED
Hi sketchpixy,
I made the changes I mentioned. I realized these changes are necessary. Just doing "Immutable.fromJS(simpleObject)" is not enough because the root level needs to be simple object. There are some other modules which use "fetching", "routing" properties expect the root level to be simple object.

Everything works now. Thanks.
tgarton PURCHASED
I am considering purchasing this template and I am also considering Neo4J as the database. Can you give me an idea of he porting effort? I am guessing that depends on the exact components I would need? Does the GraphQL/Redux implementation include a MongoDB implementation for the GraphQL resolve functions or do I need to write those if I were using MongoDb?

Is it possible to get the documentation without purchasing the template?

Thanks,

Tim
nliu2008 PURCHASED
For documentation, http://rubix-docs.sketchpixy.com
Hi tgarton,

Like nliu2008 said the documentation for Redux is available here: http://rubix-docs.sketchpixy.com/redux

We already provide a MongoDB implementation for GraphQL/Redux.

For Neo4j you would need to use a promise based connector (like we already do with our Mongo connector). Modules that you can use (or you can always use your own implementation): https://github.com/RangerMauve/cypher-promise or https://www.npmjs.com/package/neo4j-simple
I am trying to debug this template in the browser but the bundle.js and app.js file wraps my defined react components on a single line. This makes it difficult to debug. Is there is a config setting or a way to ensure my react classes are displayed on multiple lines so I can debug with break points, etc.

Thanks,
Neil
nliu2008 PURCHASED
Run the development server with Sourcemaps enabled:
http://rubix-docs.sketchpixy.com/relay/launch-options
Hi bigdaddydfa,

Please launch your development server with sourcemaps enabled. Like so:

$ SOURCEMAP=true npm run dev -s
Does the sourcemap=true command work on windows? I get the following error when I try to run it.

SOURCEMAP=true : The term 'SOURCEMAP=true' is not recognized as the name of a cmdlet, function, script f
operable program. Check the spelling of the name, or if a path was included, verify that the path is cor
again.
At line:1 char:1
+ SOURCEMAP=true npm run dev -s
+ ~~~~~~~~~~~~~~
+ CategoryInfo : ObjectNotFound: (SOURCEMAP=true:String) [], CommandNotFoundException
+ FullyQualifiedErrorId : CommandNotFoundException
Hi bigdaddydfa,

You can do something like this:

> set SOURCEMAP=true
> npm run dev -s

However, a better way to do this is to use a module called "cross-env" (which we bundle with Rubix) like so:

> node_modules\.bin\cross-env SOURCEMAP=true npm run dev -s
Prajeesh PURCHASED
Hi

npm run prod -s is not building client assets when try on ubuntu instance. Assets are built on windows without any problems. Also tried with npm run build:client. It's strange that on local machines build is working. Can you help on this?
Hi Prajeesh,

Make sure to re-install your node modules on your Ubuntu instance (don't deploy the same node modules that you have built locally on windows to your production instance). Incompatibilities in node modules across different platforms can cause this issue. Also make sure to allocate at least 2GB RAM on your Ubuntu instance.
i am creating BPanel inside Accordion each time i click a button
i want the last one created to be open and all of the previous one to be closed once i click the button

need to know what is the options of the Accordion,
Hi scully,

The default behavior of Accordion is to auto-close. You can control this property using the "collapsible" prop. The complete list of options available are detailed here: http://rubix-docs.sketchpixy.com/bootstrap-panels#panels-props-accordion
rtipnis PURCHASED
Hi .. are there plans to update with more / other controls and UI elements? For example, cards layout and be able to change the theme more etc.? What are the new features being worked on - that we can expect for this theme?
Hi rtipnis,

Currently we are working on 2 integrations. New features are being worked on parallelly and are planned for release when Bootstrap 4 matures to beta (especially cards layout and newer UI elements/controls). We are currently waiting for Bootstrap 4 to come out of alpha.
Are we able to get the source for the individual components? I'd personally like to pick and choose rather than depending on the entire Rubix package.
Hi shauntrennery,

Yes we already provide the source. It is available in rubix/rubix-bootstrap folder. We also provide documentation for integrating with existing React projects here: http://rubix-docs.sketchpixy.com/others/custom-integration. We also provide a build system for building your own @sketchpixy/rubix (and link it to your project). The documentation for that is available here: http://rubix-docs.sketchpixy.com/others/rubix-bootstrap
Hello guys!
Great job , i really like your product!
I have a question . I am using the node js version and i cant get the hot reload to work.
Any suggestions?
Hi humanelectric,

Can you please let us know the OS version, Node version and NPM version you are testing the project on? Also, do you get any errors logged to your browser console?
rtipnis PURCHASED
I am trying to use bootstrap deployed in node_modules (that is not rubix one - but a separate one that I've added from package.json) and have included the following in main.scss as follows:

@import "~bootstrap/dist/css/bootstrap.css";

However, (during its use) when I do:

npm run dev -s

I see the following (I was hoping that the same webpack configs would work even for this).

Uncaught Error: Cannot find module "../fonts/glyphicons-halflings-regular.eot"(…)

and then:

/~/css-loader?-minimize&importLoaders=1&root=../public&!./~/postcss-loader?pack=normalprefixer!./~/bootstrap/dist/css/bootstrap.css
Module not found: Error: Cannot resolve module 'file&name=./fonts/[hash].[ext]' in

etc.

So, there is something need to be set up in the tools/web pack config files .. but I haven't had success hacking those files yet ..

It'll be great if I could get some help ...

Thanks in advance.
Hi rtipnis,

This is happening because the Bootstrap file you are using (i'm guessing it is a compiled CSS file) references glyphicons fonts located relative to itself. However, webpack is looking for it in the wrong directory. Can you please send your project as a ZIP file to support@sketchpixy.com so we can make the necessary changes to tools/webpack.client.js files to ensure that the font files resolve correctly to your own Bootstrap fonts directory.
Hello

I am trying to use messenger plugin in my app . I want to change the default "Flat" theme to "air" but by just changing the Messenger options theme is not getting updated. Please assist me on this.
Hi divaa12880,

Have you included the necessary CSS styles for the "air" theme? Import the air theme into your main.scss file like so:

@import "bower_components/messenger/build/css/messenger-theme-air.css";

And it should work!
Thanks.It worked !!
pandeyji PURCHASED
Hi,

I installed the theme and able to run the demo.
I have to customize the theme according to my requirement, but I am unable to do this.
Can you please guide me.

I don't know if I have to modify the demo files itself or you guys are providing any directory structure to build the new project with reference to this theme.

Please help me out..

Thank you
Replied to your email.
stefsava PURCHASED
Any update on use rubix by rails-assets gem.?
I'm a rails developper and this way seem simple, fast and powerfull.
In https://wrapbootstrap.com/theme/rubix-reactjs-powered-admin-template-WB09498FH/comments?page=9#C36829 , 1 year ago, you said you'd try it, I've done? And with what result? Thank you
Hi stefsava,

We are using Webpack itself for bundling assets. Even the Rails team is headed that way: https://github.com/rails/rails/pull/26836#issuecomment-264242030
Hi,

I have through the procedure of Integrating Rubix in existing project. But stuck on how to use "Tablesaw" along with this setup. Please help me out.

Thank you.
Hi mnavadoot,

Just import the plugin in your src/plugins.js file like so:

import "bower_components/filament-tablesaw/dist/tablesaw.js";

and it should work!
Oh and you need to install tablesaw as well:

$ bower install --save filament-tablesaw

Documentation for installing Third party plugins is available here: http://rubix-docs.sketchpixy.com/third-party
nliu2008 PURCHASED
Is there an easy way to view all the icons(fonts) and their corresponding css class name? Are they listed somewhere?
nliu2008 PURCHASED
never mind, found it
wuetrs PURCHASED
Hi. Great product :-)
A question. I try to change webpack publicPath to /static/, that js/css etc urls are like /static/js/etc.
I use Node seed, but changing it in webpack.client.js (publicPath: isProduction ? '/static/' : publicPath,)
doesent work, when i do a npm run dist or any other option.
Any idea, where i have to change this ?
Hi wuetrs,

If you are using distributables, you can just run like so:

$ DIST_PATH=./static npm run dist

Does that help?
wuetrs PURCHASED
yup, tks
Hi there,

I've been running the dev version of Rubix for a while now which is great but I'm now trying to run the production build and webpack is failing with an error.

I've narrowed it down to the actual webpack server build command:

cross-env NO_OUTPUT_PATH=false NODE_ENV=production webpack --progress --colors --display-error-details --config tools/webpack.server.js

This gets to 95% and then crashes with the following error:

95% emitError: EACCES: permission denied, mkdir '/_'
at Error (native)

I can't figure out why this is happening, can you help? The server.js file and server.js.map are being generated but I'm not sure if it's working correctly because of the error.
Replied to your mail.
Hi. I'm facing a problem with Sidebar component.
I want to hide the sidebar in some routes such as: Landing page and Login, and show it in other pages.
I'm using conditional statement to decide whether the Sidebar should be shown as follow:

let returnSidebar = this.props.location.pathname === '/' ? null : <Sidebar />;

It works fine except that a white space appears in the place of sidebar then disappers just after half a second. I think it might be a problem with styles of sidebar or something, but I can't really tell.
So please tell me how can I fix this.
> It works fine except that a white space appears in the place of sidebar then disappers just after half a second. I think it might be a problem with styles of sidebar or something, but I can't really tell.

When you transition from a page containing the Sidebar to a page that doesn't, the CSS animation kicks in for the Body component when the Sidebar is abruptly removed. This causes a flicker (the white space is nothing but the empty background canvas). There is no proper way to fix this because the animation only kicks in after your remove the Sidebar. If you want we can remove the animation so there is no flicker. Just send us your project as a ZIP file to support@sketchpixy.com and we'll make the necessary changes.
Buey PURCHASED
You can do this directly using react-router by wrapping the components you want to have a sidebar with a component that renders the sidebar and any children passed to it. Here's what I'm doing, and App renders the sidebar to the left and props.children (passed from react-router) to the right. Login, Signup, Confirm, etc. do not have a sidebar.

<AppContainer>
<Router history={browserHistory} environment={Relay.Store} render={relayMiddleware}>
<Route path="/" component={RootComponent}>
<IndexRoute component={App} queries={ViewerQueries}>
<Route component={Home} queries={ViewerQueries} />
</IndexRoute>
<Route path="login" component={Login} />
<Route path="signup" component={Signup} />
<Route path="confirm" component={Confirm} />
<Route path="*" component={A404} />
</Route>
</Router>
</AppContainer>,
Can't you just tell me how to turn off the transition??
israelws PURCHASED
Hi,

I want to do something different with the scss. I need to have 2 main scss and load them base on parameter form the client (for example: url param like the rtl,ltr).

So if I would have 'ltr/a/...' it would load main_a.scss and if I would have 'ltr/b/...' it would load main_b.scss.

I saw that url params are making changes in the assets on the assets middleware, should I use this ?

thanks in advanced,
El
Hi israelws,

Currently RubixAssetMiddleware only takes 2 parameters: ltr and rtl for rendering main.scss and main-rtl.scss. The middleware does not check the URL params for rendering the correct CSS file.

However, we have provided the complete source for this middleware in rubix/rubix-bootstrap/src/node/RubixAssetMiddleware.js file. You can copy this file to your project folder and make the necessary changes. The middleware has access to the incoming request object. You can get the URL params from the request object and render the correct CSS file.

Does this help?

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

$20
5045Purchases

Licenses: Details »

Single application $20
Version:4.1.0
Type:
  • HTML Template
Bootstrap: Compatible with 3.3.x
Layouts:
  • Responsive
  • Fluid
  • Fixed-width
Browsers:
  • IE 9, 10, 11
  • Latest Chrome
  • Latest Firefox
  • Latest Safari
Uses Less:No
Uses Sass:Yes
Categories:
Tags: admin, bootstrap, dashboard, graphql, laravel, meteor, rails, reactjs, redux, relay
Item#:WB09498FH
Released:3 years ago
Updated:1 year ago
Sold exclusively on WrapBootstrap
sketchpixy

sketchpixy

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: