125 comments found.
Hi! I need to integrate Semantic-ui-react to the template, is that possible? If “true”, can you help me doing that? (ps. sorry for my english :/ )
Hello,
Yes, it is possible but that will change completely this template and can take a lot of work. The css framework we use is material-ui:
http://www.material-ui.com/#/components/app-barThanks for de quick answer. I don’t want to get rid of material-ui, the template is just fine (congrats by the way), but the components of material-ui are really big, just want to use the grid system and the components of semantic-ui inside the template, some components of semantic-ui works well, but others have some issues, like Dropdowns. What can I do to material-ui not interfere with the components of semantic-ui? Again, sorry about my english. Thanks.
Ok,
Please send us a private email so we can guide you on how to acomplish this implementation. You can go to the author page here in envato in order to send the private email.
Can i use it for a Saas solution ? Can the Tabs on to be fixed so i know all the tabs that i have and not to have to scroll left or right ?
Hello,
Sass is not implemented in our template, but since is based on the React Boilerplate 3.4 you can easily add it:
https://github.com/react-boilerplate/react-boilerplate/blob/c28e1539cefb3957fb4cfd848bf1efd34a0725d8/docs/css/README.md#sassThere is an openViews array that you can initialize and will render the tabs you need to be fixed and also disable to open more or remove. But is something that needs custom code.
HI There,
I’m trying to inject both the parent Reducer and a child container Reducer. I can only seem to inject one default reducer per container in the routes.js file. When I inject as seen below it shows up as two state tree nodes processContents: {...} and stepContents: {...} and stepContents is showling the state of the processContents reducer not its own. How do I initialise and access the stepContents reducer by injecting it at the route level?
importModules.then(([reducer, sagas, component]) => { injectReducer(‘processContents’, reducer.default); injectReducer(‘stepContents’, reducer.default); injectSagas(sagas.default); renderRoute(component); });
Hello,
Try it like this:
{ path: ‘child-page’, name: ‘childPage’, getComponent(nextState, cb) { const importModules = Promise.all([ System.import(‘containers/ParentPage/reducer’), System.import(‘containers/ChildPage/reducer’), System.import(‘containers/ParentPage/sagas’), System.import(‘containers/ChildPage/sagas’), System.import(‘containers/ChildPage’), ]); const renderRoute = loadModule(cb); importModules.then(([reducer1, reducer2, sagas1, sagas2, component]) => { injectReducer(‘parentReducer’, reducer1.default); injectReducer(‘childReducer’, reducer2.default); injectSagas(sagas1.default); injectSagas(sagas2.default); renderRoute(component); }); importModules.catch(errorLoading); }, }
Hi. I am interested in this theme. In my scenario, I am developing a business productivity apps. I intend to use this theme to create a backend dashboard web site that let my client that subscribes to my apps to modify certain contents, view report etc. My client that pay for the apps will be logging to this admin panel to view his/her info, made some changes and reflected in apps. May I know does this require extended license for it?
Hello,
Regular license works fine for your plans. Sound like the app you will build is a single license for your clients to use no for them to sell.
Hi Fortress, Nice Template. I’ve one question. How to add/integrate data tables in this template. If you give the solution for this, It would be greatful for us..
Hello,
Yes, we can guide you on how to integrate datatables into our template.
Can you provide us the url for the datatable component you want to implement?
We did a quick search and found a few: https://react.rocks/tag/DataTable
Thanks for your reply. I want to integrate two different types of tables.
Can you checkout the below links:
https://react.rocks/example/react-structured-filter https://www.npmjs.com/package/material-ui-table-editI want these two tables into our template. Please give me the solution for this. Thanks.
Hello,
Any suggestions? Did you check the url what I gave to you? Can we integrate these tables into our templates? Advice us to proceed further. Thanks
Hello,
Please send us a private email so we can give you our skype to help you implementing either of the data tables you mentioned.
Ya sure, our mail id: saravanarajan@teambeehive.com
any suggestions on setting up this theme with electron. I’ve been getting an “not allowed to load local resource:” error upon rendering in an electron window.
Hello,
We haven’t tried our template with electron yet, we will give it a try and let you know. In the meantime:
There is a post in github/electron issues related with your question (not sure if you posted it).
https://github.com/electron/electron/issues/11407There are some boilerplates for electron using react that you can try:
https://github.com/chentsulin/electron-react-boilerplate https://github.com/pastahito/electron-react-webpackThanks for the reply. I would love to be in the know about this admin template working in electron. Yes, I did add the git issue. Please let me know when you test it out.
Ok, we got it working in Electron following recommendations from here:
https://github.com/react-boilerplate/react-boilerplate/issues/488Follow these steps:
1) git clone https://github.com/electron/electron-quick-start
cd electron-quick-start
npm install
npm start
2) In your template change these settings in webpack.base.babel.js:
publicPath: ’’
target: ‘electron-renderer’
3) starting in app.js and other files find and replace browserHistory with hashHistory:
import { browserHistory } from ‘react-router’;
import { hashHistory } from ‘react-router’;
4) npm run build
5) copy all files (index.html and .js) generated into a folder inside electron-quick-start, you can call it admin (electron-quick-start/admin)
6) change electron main.js so electron can find index.html in the admin folder.
mainWindow.loadURL(url.format({
pathname: path.join(__dirname, '/admin/index.html'),
protocol: 'file:',
slashes: true
}));
7) run electron .
thank you for your help. I’ve followed your directions and when I use electron ./admin/index.html in the electron window the id = app will not render in the index.html. The loading spinner animation is all that can be seen. otherwise, the rest of the app is not loading. I wonder where I could be going wrong in all this? Could you show me what the file directory should look like? This is mine: -electron-quickstart-master -admin index.html main.js renderer.js package.json -node_modules -internals -build -app package-lock.json package.json -server index.html
Hello,
If you toggle the devtools in electron you will see the error in the console. If is related with no finding the main.x.js file check your webpack.base.babel.js file and make sure the publicPath is equal to empty string (line 13), also target: ‘electron-renderer’ (line 95). Then build your react template again and copy the files to electron folder.
Hello, I’ve checked the dev tools in electron and I don’t get an error in the console. All the mark up comes up but none of the UI elements of the theme. I’m not sure what I’m doing wrong here. I will continue to plug away at this
webpack:
const path = require(‘path’); const webpack = require(‘webpack’); const CompressionPlugin = require(‘compression-webpack-plugin’);
module.exports = (options) => ({ entry: options.entry, output: Object.assign({ // Compile into js/build.js path: path.resolve(process.cwd(), ‘build’), publicPath: ’’, }, options.output), // Merge with env dependent settings module: { loaders: [{ test: /\.js$/, // Transform all .js files required somewhere with Babel loader: ‘babel-loader’, exclude: /node_modules/, query: options.babelQuery, }, { // Do not transform vendor’s CSS with CSS-modules // The point is that they remain in global scope. // Since we require these CSS files in our JS or CSS files, // they will be a part of our compilation either way. // So, no need for ExtractTextPlugin here. test: /\.css$/, include: /node_modules/, loaders: [‘style-loader’, ‘css-loader’], }, { test: /\.(eot|svg|ttf|woff|woff2)$/, loader: ‘file-loader’, }, { test: /\.(jpg|png|gif)$/, loaders: [ ‘file-loader’, { loader: ‘image-webpack-loader’, query: { progressive: true, optimizationLevel: 7, interlaced: false, pngquant: { quality: ‘65-90’, speed: 4, }, }, }, ], }, { test: /\.html$/, loader: ‘html-loader’, }, { test: /\.json$/, loader: ‘json-loader’, }, { test: /\.(mp4|webm)$/, loader: ‘url-loader’, query: { limit: 10000, }, }], }, plugins: options.plugins.concat([ new webpack.ProvidePlugin({ // make fetch available fetch: ‘exports-loader?self.fetch!whatwg-fetch’, }), });
// Always expose NODE_ENV to webpack, in order to use `process.env.NODE_ENV`
// inside your code for any environment checks; UglifyJS will automatically
// drop any unreachable code.
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(process.env.NODE_ENV),
},
}),
new webpack.NamedModulesPlugin(),
new CompressionPlugin(),
]),
resolve: {
modules: ['app', 'node_modules'],
extensions: [
'.js',
'.jsx',
'.react.js',
],
mainFields: [
'browser',
'jsnext:main',
'main',
],
},
devtool: options.devtool,
target: 'electron-renderer', // Make web variables accessible to webpack, e.g. window
performance: options.performance || {},
main.js ), protocol: ‘file:’, slashes: true })) app.js
// and load the index.html of the app.
mainWindow.loadURL(url.format({
pathname: path.join(__dirname, '/admin/index.html'
import { applyRouterMiddleware, Router, hashHistory } from ‘react-router’;
// Create redux store with history // this uses the singleton browserHistory provided by react-router // Optionally, this could be changed to leverage a created history // e.g. `const browserHistory = useRouterHistory(createBrowserHistory)();` const initialState = {}; const store = configureStore(initialState, hashHistory);
// Sync history and store, as the react-router-redux reducer // is under the non-default key (“routing”), selectLocationState // must be provided for resolving how to retrieve the “route” in the state const history = syncHistoryWithStore(hashHistory, store, { selectLocationState: makeSelectLocationState(), });
We can send you our test project with electron implementation so you can compare with your code. Just send us a private email through envato and we will give you a link to download it.
that would be wonderful fjames0578@gmail.com is my email
Hi! I’m about tu buy your theme… but would need to know how it works with Internet Explorer that many of my clients use it. Thanks!
Hello,
We have tested our template with the latest Microsoft Edge browser on a Win10 and it behaves as expected. We recommend you to do your tests before buying this template.
http://preview.themeforest.net/item/fortress-react-admin-template/full_screen_preview/19568479Hi, I just purchased the template and I see 2 main folders in the zip file – fortress-react-admin and fortress-react-admin-clean.
Can you explain the difference between the two?
Thanks.
Hello,
fortress-react-admin is the complete template as is presented here in envato.
fortress-react-admin-clean is a seed template, without all the examples pages. You can start your project from this one.
Thanks!! that was quick!
Hye thanks for the respond before, This is a really nice theme package. i have 1 more question, currently im redirecting using “this.props.router.push(’/test’);” inside componentWillReceiveProps. The problem is i cant figure out how to highlight sidebar menu, and show tab in header.(The behaviour if we click on the menu itself)
FYI, i also have tried “browserHistory.push(’/example’);” But when the page is redirected to ”/example”, the menu is not highlighted and menu tab does not appear on header.
Hello,
The menu needs to have the same structure as app/data.js
Once the app starts the menu is loaded into containers/App/reducer.js
Sorry, i dont get it. Btw, im new in react,redux. I already go through the tutorial for react,react-redux,redux-saga. My problem is: I’ve already added the “example” menu in app/data.js What i am intend to do is programmatically redirect to another page by using “browserHistory.push(’/example’)”. I would like to highlight “Example” in left drawer and create menu tab in header, because right now the page is successfully redirected to ”/example” but the “Example” label in left drawer is not highlighted and there is no “Example” tab in header
To open tabs or select left drawer menu items you need to implement some logic like the handleClickMenu() in the LeftDrawer component.
Thanks !!! Its working now.
Hye, how can i integrate this template with loopback?
Hello,
Using sagas you can call any restful API, you can find an example in this path inside the template:
app\containers\ComponentDemos\ApidemoPage\sagas.js
thank you so much
Thank you for a good product.
Small wishes:
- move the babel configuration from package.json> .babelrc;
- Update dependencies (react, webpack, etc);
- Do not use a semicolon (ES6 +).
And I have a question.
I’m using the developer mode (npm run start).
How and where in this mode should I specify a folder with static files (for example, I want to use my test API ./api)?
Hello,
Those are great features, we are building a new version and we will consider them. Thank you!
Check this discussion for static files (last comment):
https://github.com/react-boilerplate/react-boilerplate/issues/1610Hello, I have a question. Fortress is based on material-ui 0.18.7 but soon Material-ui v1 will be released. Do you have plans to migrate Fortress or to make an update to the new M-ui v1? Should I start to use m-ui 1 beta, or to stick with 0.18-0.19 versions. I’m in the middle of developing my app base with Fortress so I’m not sure what to expect on the future.
Hello,
Yes, we are aware of the new version. They now have a layout grid integrated which is very cool. There is also a new version of react boilerplate with new updates.
We already started developing integrating both frameworks, but this will take a couple of months to be finished. We will let know our customers when this new version is ready and we will include both version in the downloads. We also will give support for both version.
Hi, I bought the package and use it to build a project, it good to use!. I am wondering could I upload the project to Github to share my project, or I have to add something in my project code. Or, It is not allowed?
Hello,
It is not allowed, you bought a licence for you or one client, in a single end product which end users.
If you publish in github it will become public and it will be against the standard license of envato market.
https://themeforest.net/licenses/standardThank you! So even I build it with webpack and put result into my public folder without source code is forbidden either? And how about the extended license?
We think it is not possible either with extended licence. You can submit a question to envato team and select licences category here:
https://help.market.envato.com/hc/en-us/requests/new?ticket_form_id=170923Hello!
I use Windows 10 & Node 8.6.0.
npm run setup && npm start
> react-boilerplate@3.4.0 setup C:\Project\fortress-react-admin > node ./internals/scripts/setup.js
module.js:473 throw err; ^
Error: Cannot find module ‘C:\Project\fortress-react-admin\internals\scripts\setup.js’ at Function.Module._resolveFilename (module.js:527:15)
at Function.Module._load (module.js:453:25)
at Function.Module.runMain (module.js:665:10)
at startup (bootstrap_node.js:187:16)
at bootstrap_node.js:607:3
Please give instructions on Windows.
I re-copy files. All ok!
great! 
Are there plans to update this to the latest version of React? Are there any issues with this not being updated to the latest? Thanks!
Hello,
Yes, we will be updating soon the latest version of react and other libraries like material-ui v1.
Once we have our new template version you will be notified.
Hi,
I have 3 TextField components: price, taxRate and totalPrice. I want to modify totalPrice when the price was change by applying the formula totalPrice = price * (1+taxRate/100). I tried to change the value of totalPrice inside the OnChange function by changing this.state.selectedInvoice.totalPrice but the totalPrice Text field don’t show the new value. I figure out that the render function is not called after on change and i force calling with this.forceUpdate(). Nothing happen. I don’t have any idea of what I can do to change the value of the totalPrice.
Thank you in advice Bogdan
Hi, I solve the issue. The solution is to use value instead defaultValue. Mention . I have to call this.forceUpdate() to update the values. Bogdan
great! 
Hi, I am trying to put a link on a MenuItem . In the Menu in that is Sign Out option i added more options like Settings and i want when i click that MenuItem to go to /settings. I google it first but until now i don’t have any valid solution. Can you tell me how can I put a link on MenuItem? Thank you. Bogdan
This is the solution and work <MenuItem primaryText = “Settings” leftIcon = {<Settings />} containerElement = { <Link to=’/settings’ /> } />
yes, you can also navigate on the click event using
browserHistory.push(’/settings’);
It is not actually an error. The this.props.appStore is rewrite and it value is something like : ” map “{ size: 16,...} (See image https://ibb.co/i3qrMv ). I print the appStore to console and i saw the appStore value is correct on App component, but not on child components. Any idea why happen?
It could be due to selectors,
v2 import { selectGlobal } from ’../App/selectors’;
v3 import { makeSelectGlobal } from ’../App/selectors’;
Thanks . the solution is correct. makeSelectGLobal instead select Global. Do you think it is possible to pun in documentaton folder a node in that explain what steps we have to do for update the app ? In the past i propose to improving the themes by adding more components for ecommerce, message, ... Can you tell me if you intend to do that?
Yes, we will update the documentation with tips on migration between versions.
We consider adding components like ecommerce, but not for now. We are focus in other tasks. In case we start working on those components we will let you know.
Hi, I update my app from 2.0 to 3.0 .. Now i figure out that the appStore , store a strange value and app crashing because the properties from app stores are not accessible. I am trying to figure out what I do wrong when i update the theme. It is any short way to update from 2.0 to 3.0. Thank you Bogdan
Hello,
The short way you can migrate is to move your containers, components and routes to the new version. Also install any library you have added.
What is the error you are getting?
Hi, I’ve been trying to setup & deploy to Heroku by following all the instructions in docs/general/deployment.md (create Procfile, install buildpack, edit package.json, edit heroku:config).
The app was deployed successfully to Heroku, but it can’t run and turned out error H10 https://devcenter.heroku.com/articles/error-codes#h10-app-crashed.
2017-08-31T14:32:54.092769+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=admin-react-atmago.herokuapp.com request_id=e2ade07b-50c9-4b69-af3a-c30307456d2e fwd="36.73.52.178" dyno= connect= service= status=503 bytes= protocol=https
Is there anything else I should modify?
Currently my Heroku app framework is set to PHP, should I change it? (Rails? NodeJS? Something else?)
And lastly, is it possible to just deploy the app to Heroku as static files? (eg. index.php containing 1 line: <?php header( 'Location: /build/index.html' ) ; ?>)—I did it with Angular1 web app before.
Thanks!
Hello,
We don’t have experience with Heroku, but we have deployed with node and ASP.Net, in case of ASP.Net we basically add all from index.html to a Shared and Home page cshtml. You can do the same for PHP.
I just bought the theme (100 lolll), one of the main reasons was the great support, always very quick to answer any questions
thank you!!! 