Discussion on Dandelion Pro - React Admin Dashboard Template

Discussion on Dandelion Pro - React Admin Dashboard Template

Cart 1,492 sales
Well Documented

ilhammeidi supports this item

Supported

This author's response time can be up to 1 business day.

443 comments found.

Does Dandelion-Pro use Redux-Saga ? Which one of your theme is more advanced? Enlite Prime or Dandelion-Pro? Also do you use react-hooks in any of the themes?

Hi vmundhra,

Thanks for visiting our portfolio.

The Enlite Prime is more advanced than Dandelion Pro, and has already implemented redux-saga. For react hook template we only have Luxiren landing page collection https://themeforest.net/item/luxiren-react-js-landing-page-collection/25087071 For the rest react templates are migrated to hooks yet.

Regards

Hi There,

When we refresh app, it download 35MB of data. Please refer this screenshot: https://share.getcloudapp.com/wbu0Y68X

How can be distribution build to be generate for production build?

Hi ervishu83,

Don’t worry about that, The 35mb files only in local dev only. Thats is react boilerplate.dll to increase startup up development time. After you run npm run build and start the production it will not be used.

Regards.

Hello I have a problem, my component is loading and does not show it, I make a change to a saved text and load the component, what can I do? so it charges components well and doesn’t stay in an infinite charge cycle

I want to Dandelion Pro theme can use with Angular

If can not use with Angular. I can refund ?

Hi moveon-solutions,

Thanks for purchasing, As the product description this is react.js template. If want to use with angular it need to migrate whole configuration and components. Here’s tutorial to migrate react to angular https://www.lynda.com/Angular-tutorials/Migrating-from-React-Angular/625945-2.html

And for refund policies detail please take a look this link https://themeforest.net/page/customer_refund_policy

Hope this can help. Feel free if you have any further queries.

Regards.

Hello Team -

Thanks for the great theme. Is there any way I can get CSS files instead of jss files? At least one big file with all styles included?

Thanks Pramod.

Hi Pramod,

Thanks for purchasing and appreciation

This template use jss (css in javascript), so it doesn’t have css file. The styling generated inside <head> as <style> tag depend on routing or loaded page.

You can copy the each styling, from developer tools(right click > inspect element) or save as the page.

Note: Each page may generate different style.

Feel free of you have any further queries.

Regards.

Hi I like your both Templates (Dandelion and Enlite prime.) I have 3 questions before purchasing any of one.

1- Both templates seems similar, I in terms of features and technologies. Can you please explain the difference between the features and technologies between these two?

2- I don’t need firebase as backend server. I will use express as backend. Does this template have support for express integration?

3- Is this template Class based or Functions (hooks)?

Hi XEBsoft_Technologies,

Thanks for visiting our portfolio and the appreciation. Here’s our answer bellow

1. Enlite has sample crud apps and auth with firebase. Also support for multilanguage. Then Dandelion has more variant layout, sample pages, static crud apps and ui components.

2. Enlite prime is using express for handling server. Enlite has static and dynamic sample apps and auth, Which is the Static apps not connected to firebase, just redux.

3. Both templates written in React Class. We haven’t migrate to hooks yet.

If you’d like, you can try with starter version dandelion-starter and enlite-starter in https://github.com/ilhammeidi

Regards.

Hi,

Thanks for the reply. I tried to npm install on dandelion-starter. There are couple of warnings of outdated packages and one error of node sass which is expecting python2. Do you have any near plan to update the packages for dandelion?

Hi there,

We update this template every 2-3 month. For sass error you can remove the node-sass modules, then install it manually after npm install.

Regards.

Hello Author.. Great Job…. Please i will like to add paginations to the Tracking table sample provided.

Hi seedu,

Thanks for purchasing and the appreciation.

For table pagination you can use component from material-ui https://material-ui.com/api/table-pagination/#tablepagination-api and demo: https://material-ui.com/components/tables/#custom-pagination-actions

About eslint, it seem’s onliy happen in windows os. You can try to use autofix option in eslint config /internals/webpack/webpack.base.babel.js

options: {
          fix: true,
        },

Hope this can help. Feel free if you have any further queries.

Regards.

Hello Author.. Great Job…. Please i will like to add paginations to the Tracking table sample provided.

Hai Dandelion Team,

Currently, I am working on react projects using a dandelion template. After my project converted to build file, in that build folder vendor file takes max 10mb size so, it will take to load application more than 3min to 10min. How to decrease vendor file size and improve the application performance and decrease the loading time.

This my vendor file: https://demo2.smartranserp.com/vendor.7df6e96ff3393fac384b.chunk.js?__uncache=4%2F18%2F2020%2C%2012%3A56%3A32%20AM

Thanks,

Hai Team,

Thanks for the reply,

I changed to RatingCustom.js file but it takes the same size.

in dandelion-pro empty template checked it takes 8.5 mb.

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB). This can impact web performance. Assets: vendor.c2cfb674dc8ceedd5b60.chunk.js (9.87 MiB) 113.81e498e062792ab81f43.chunk.js (648 KiB) 114.f3d665c3591c1391bde5.chunk.js (299 KiB) 116.e317352c875e1839f318.chunk.js (399 KiB) 117.06aaaf04f70e2ad95162.chunk.js (356 KiB) 143.593c1ed402d50f151146.chunk.js (410 KiB) 144.40f038be863f03a57ccf.chunk.js (266 KiB) 145.76755b52d4546a40e65a.chunk.js (266 KiB) 146.8f866d6ac9b9b8830129.chunk.js (283 KiB) 190.b4076993bec880828e2e.chunk.js (283 KiB) vendor.c2cfb674dc8ceedd5b60.chunk.js.gz (2.7 MiB)

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance. Entrypoints: main (9.88 MiB) runtime~main.4b192b028afb65d4ea99.js vendor.c2cfb674dc8ceedd5b60.chunk.js

Thanks,

Hi anil441,

Maybe you have made changes in template, so please make sure to avoid imported all dependencies like this

import { object, object2, object3 } from 'plugin/objects';

Please do like this

import object from 'plugin/objects/object';
import object2 from 'plugin/objects/object2';
import object3 from 'plugin/objects/object3';

And beside that you can try with Dandelion Por fresh version or try redownload and adjust RatingCustom.js After run build the vendors should be 4mb.

One more thing, may we know your purchase Invoice Number(IVIPXXXX) and date purchased? please send to our profile message https://themeforest.net/user/ilhammeidi So we can help you further.

Regards.

Ok, Thankyou for your response. I will send the invoice details.

Hi Guys,

I bought this theme and when I install it the platform returns an error…

“The package could not be installed. The theme is missing the style.css stylesheet.”

Hi galba_br,

Thanks for purchasing and sorry the previous wrong messages.

May we know about the details style.css directory/path? Or did you install another plugins. Because we use jss as main stylesheets.

Regards.

Hi This is an awesome theme and thanks to you for it. I want to reduce the font-size of the application. So I reduced the font-size to 80% in style in the _Layout.SCSS in HTML element. But even after I refresh the application and clear the cache also it takes 100% in that HTML style. Is there any place to override that style? or Is there any another place to reduce the font-size in the entire application in a single change. ?

Thank You

Hi dush88c,

Thanks for purchasing and the appreciation.

You can adjust the HTML font-size in /app/styles/layout/_typography.scss But some components are use px unit not rem. So you have to adjust it in each components styling.

Feel free if you have any further queries.

Regards.

Hi 

Thank you for your reply. But I have another query when running this application with Docker Container. I have written a dockerfile. It’s built the docker image but when running the image as a container it gave me Fatal error saying  “FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed – JavaScript heap out of memory” 

I am using the same versions of your solution and node 12.0 in Windows 10 machine. I have built a simple application with React and successfully ran in the docker container. But Your solution is not running properly. Do you have a solution for this? I surfed google and still have no luck. Please advise me to resolve this issue.

Best Regards

Hi dush88c,

It seem’s your memory insufficient. Please adjust the docker memory at least 4GB. Here’s the sample docker config for react boilerplate https://gist.github.com/JuHwon/93c212fb4cd2b8e9970762f5e37ffdff and https://github.com/stern-shawn/keystone-react-boilerplate/blob/master/Dockerfile

Or you can use starter project and use only necessary plugins to reduce memory when build project.

Hope this can help.

Regards.

Hello Ilhammeidi. I bought your template. Could you please, help me to add i18n? i18n multilingual function does not work. I looked at https://github.com/react-boilerplate/react-boilerplate/blob/master/docs/js/i18n.md. I added a select to change to another language. But the function does not work. You cannot add new multilingual features?

Hi davron211,

Thanks for purchasing.

Please make sure to use react-intl 2.8.0. And wrap the component with injectIntl.
export default injectIntl(Sidebar);

If you’re using intl.formatMessage(messages.anytext) Please to Register intl to props

intl: intlShape.isRequired

Also you can try to follow this docs https://ilhammeidi.github.io/enlite-docs/code_flow/ui_lang.html#lang You can check the usage in our another project https://github.com/ilhammeidi/enlite-starter

Hope this can help.

Regards.

Thanks

Hey team,

Hope you are doing well.

I’m using “Nested route” from your Dandelion theme and I have faced few problems. Please check below codes, which demonstrates what we have done.

1-In the App/Containers/App/Application.js, we have below routes: <Dashboard history={history} changeMode={changeMode}> <Switch> <Route exact path=”/app” component={BlankPage} /> <Route path=”/app/profile” component={Profile} /> [*Profile has two child routes] <Route component={NotFound} /> </Switch> </Dashboard> 2- We have an index.js file in the “App/Page/Profile/index.js” and we have two child components for profile route with below code: export default class Profile extends Component { render() { const { match, location, history } = this.props; return ( <Switch> <Route path=”/app/profile/personal” component={PersonalInfo} /> <Route path=”/app/profile/position” component={PositionInfo} /> </Switch> ); } }

The issues are: 1- Now when I’m going to the “PersonalInfo” page then ComponentDidMount() runs twice instead of once.

2- When I’m clicking on parent menu and select a child of it then ComponentDidMount() runs twice instead of once.

Please let us know how we can fix this.

Stay safe and well!

Thanks Edi

Hi Edi,

Thanks for the reported issue.

We found that issue in all pages when change the routing. This is because transition in templates. So in /app/containers/Templates/layouts/[layout-type] i.e /LeftSidebarLayout.js just remove mountOnEnter and unmountOnExit in Fade component. And make like this.

<Fade
              in={pageLoaded}
              mountOnEnter
              unmountOnExit
              {...(pageLoaded ? { timeout: 700 } : {})}
            >
              <div classname="{!pageLoaded" classes.hideapp="" :="">
                {/* Application content will load here */}
                { children }
              </div>
            </Fade>

Hope this can help. Feel free if you have any further queries.

Regards.

Thanks team!

Your solution worked as always :)

Stay safe and well!

Regards, Edi

Happy to hear that :) and happy coding.

Circular dependency detected

That mean you import component A to component B, which is B has contained A as imported component. Please avoid this.

Hi, great great theme!

I found an error due to the display of the filter parameters on the mui-databases in mobile mode.

Could you help me? Thanks

Another question: I saw that you’ve released new version just one day ago. How could I update to latest version? Many thanks

Hi pietrax,

Thanks for purchasing and the appreciation.

To fix this issue please override MuiDataTables style in /app/styles/theme/applicationTheme.js in overrides object around line 95 Then add this code bellow.

MUIDataTableToolbar: {
      filterPaper: {
        maxWidth: 'none'
      }
    },

And to update this template, please download the latest template from your envato purchase. Then see in documentation > change log, there’s file changes list. You can use diff checker like https://www.diffchecker.com/ to see the changes.

Hope this can help. Feel free if you have any further queries.

Regards.

Hi

Please let me know whether this template is available in HTML template with boostrap

https://themeforest.net/item/dandelion-pro-react-admin-dashboard-template/22890261/support

Hi prabakar19789,

Thanks for visiting our portfolio.

This template is only available for react.js. We don’t have HTML version yet.

Regards

It’s too slow!!!!!!!!! I NEED A REFUND FOR THIS BCZ IT’S JUST NOT WORKING OUT

SLOOOW!!!!!!!! PURE PROBLEMS!!!

Please refund me or you won’t like it

Ok go ahead

Hi prabakar19789,

Thanks for visiting our portfolio.

This template is only available for react.js. We don’t have HTML version yet.

Regards

Dear Pak Ilham,

Saya mendapati bahwa untuk halaman login, nilai pada textbox username dan password telah terisi menggunakan data dari initialState pada redux. Adapun pada halaman ‘LoginForm.js’ saya mendapati kode berikut: const LoginFormReduxed = reduxForm({ form: 'immutableExample', enableReinitialize: true, })(LoginForm); const reducerLogin = 'login'; const reducerUi = 'ui'; const FormInit = connect( state => ({ force: state, initialValues: state.getIn([reducerLogin, 'usersLogin']), deco: state.getIn([reducerUi, 'decoration']) }), )(LoginFormReduxed);

Pertanyaan saya: 1) Kegunaan redux-form pada konstanta LoginFormReduxed? 2) Pada konstanta FormInit, koneksi ke redux store dibuka. Apa kegunaan force: state? 3) Pada konstanta yg sama dengan no.2, terdapat reducerLogin yg bernilai string ‘login’. String login ini apakah merupakan nama file yg mengandung initialState yg akan dimasukkan ke textbox username & password? Kalau iya, berarti nilai konstanta reducerLogin merupakan case-sensitive (harus sama persis penamaannya dengan file yg mengandung initialState)? 4) Pada konstanta FormInit, terdapat string 'usersLogin', sy ingin tahu kegunaan dr string tsb pada ‘initialValues’ 5) Pada konstanta FormInit bagian ‘deco’, terdapat pemanggilan konstanta reducerUi dan string 'decoration'. Pertanyaan saya sama dengan pertanyaan no.3 dan no.4; 6) Bagaimana ketiga key state (force, initialValue, dan deco) ini dapat mengambil nilai initialValue yg ada pada redux store?

Terima kasih banyak atas jawaban dan waktunya.

Hi issotyo,

Terimaksih telah membeli template kami.

Berikut jawaban dari kami:

1. Redux form digunakan untuk mendapatkan value2 dari setiap field di dalam form.

2. Untuk force:state kegunaannya sama dengan …state Apabila ini di hapus maka state reducer tidak bisa terbaca.

3. Untuk reducer=’login” Ini bukanlah nama file, melainkan nama reducer yang di import dan di combine. Bisa di check di app/redux/reducers.js

4. usersLogin adalah state didalam login reducer. state.getIn([reducerLogin, 'usersLogin']), Artinya get state usersLogin dari login reducer

5. Inipun sama seperti jawaban no4. Artinya get state decoration dari ui reducer

6. Semua state dan dispatch di combine dalam reducer /Users/retina/Documents/Dandelions/dandelion-boiler/app/redux/reducers.js Kemudian di hubungkan ke store ada di /app/redux/configureStore.js Redux dan React-Redux telah mengatur semuanya agar bisa diakses melalui komponen2 react. Berikut diagram alurnya https://ilhammeidi.github.io/dandelion-docs/#code_basic > Template Architecture > go to Slide 3

FYI: Template ini dikembakngkan dari react-boilerplate.

Semoga bisa membantu.

Salam.

Hello, I’m having trouble reading environment variables inside my APP. I’m using Linux, and setting REACT_APP_DUMMY as an environment variable (by using export REACT_APP_DUMMY=123) and trying to read it inside my app with console.log(process.env.REACT_APP_DUMMY), but I always get undefined. The CRA boilerplate, lets me use variables starting with REACT_APP_ (https://create-react-app.dev/docs/adding-custom-environment-variables/). Why can’t I read the values? I’m new to webpack, maybe could be something related to it? Can you help?

Hi pwxti,

Thanks for purchasing.

This template base on react-boilerplate not CRA. To setup the environtment:

You need to create .env file and populate it.

1. # .env REACT_APP_DUMMY = http://localhost:1234/api/v1 Here is interesting this is much easier now. On this file you just have to add the key-value pair you set up on your .env file : new webpack.EnvironmentPlugin({ NODE_ENV: process.env.NODE_ENV REACT_APP_DUMMY: process.env.NODE_ENV // ...rest });

2. You have to install env-cmd and edit the start script. Basically it will just make the values you define inside env file available.

3. start: cross-env NODE_ENV=development env-cmd .env node server

4. On you application you can now access values from your .env using process.env.

And here’s the discussion about this https://spectrum.chat/react-boilerplate/general/how-to-handle-different-environment-configurations~eb8650f8-f036-4db3-89b4-4f100e966a18

Hope this can help and feel free if you have any further queries.

Regards.

Had to add a -f: start: cross-env NODE_ENV=development env-cmd -f .env node server Other than that, it worked just fine! Thank you

Your’e welcome, glad to gear that :)

by
by
by
by
by
by

Tell us what you think!

We'd like to ask you a few questions to help improve ThemeForest.

Sure, take me to the survey