443 comments found.
hello, do u familiare with clojurescript, i want to integrate with your theme in my cljs project, but i don’t know how to
Hi vinursy,
Thanks for purchasing.
We haven’t try to integrate with clojurescript. And we found a clojurescript library to work with react.js, that is Reagent. And this an article and repo might useful to combine them.
https://github.com/reagent-project/reagenthttps://medium.com/@jacekschae/learn-how-to-build-functional-front-ends-with-clojurescript-and-react-733fa260dd6b
Feel free if You have any further queries.
Kind regards.
yes, i’ve tried that, but the code u write is just for webpack
Hi vinursy,
The Dandelion use JSX to compile HTML, and clojurescript has own html stucture. So this is the converter https://github.com/madvas/jsx-to-clojurescript .But we’re not sure about redux function can adapt with cljs.
We will let you know once get better solutions.
Kind regards
HI, the work load is too heavy, maybe the easiest way is that write new components in cljs and use it in the theme
it shows the error when i yarn start Replace Autoprefixer browsers option to Browserslist config. Use browserslist key in package.json or .browserslistrc file. Using browsers option cause some error. Browserslist config can be used for Babel, Autoprefixer, postcss-normalize and other tools. If you really need to use option, rename it to overrideBrowserslist. Learn more at: https://github.com/browserslist/browserslist#readme https://twitter.com/browserslist
Thanks a lot for the suggestion vinursy. We’ll adjust it soon.
Regards
then how can i fix it myself?
Hi vinursy,
For autoprefixer configuration can check in here https://github.com/browserslist/browserslist-example#autoprefixer
Feel free if You have any further queries.
Kind regards.
it seems to change - autoprefixer({ browsers: ‘last 2 versions’ }) + autoprefixer() in postcss.config.js
Yes, we also put the autoprefixer setting in postcss.config.js
I’d like to implement jwt authentication. I have a server, let’s just say “example.com/login” that returns an expiring 1 hour jwt token.
How can I implement this login/register with my jwt url ? Any help is appreciated. Thank you!
Hi roykesserwani,
Thanks for purchasing.
Here’s tutorial to implement JWT with redux-saga https://www.freecodecamp.org/news/login-using-react-redux-redux-saga-86b26c8180e/
And here’s the sample repo:
https://github.com/zafar-saleem/react-login
The expiration setup is in:
https://github.com/zafar-saleem/react-login/blob/master/src/components/loginPage.js
setCookie('token', this.props.response.login.response.token, 1);
Feel free if you have any further queries.
Kind regards
Hi ilhammeidi I would like to congratulate that the topic is very beautiful and functional.
I try tirelessly to be able to log in with the rest of the API, but I give up, you may be able to help me with a functional “demo.” (I’m a newbie in React.JS) however, I currently have a code with CRA, but I can’t make it work with your theme
Can you help me what will I do? Thanks Alvaro
Hi Alvaro thanks for purchasing and the appreciation.
To create rest API with this theme, you have to put in /server/index.js
Then call the API in components with Axios i.e
- Load source code form js files:/app/components/SourceReader/SourceReader.js
- Load Icons collections form txt:
/app/containers/UiElements/Icons.js
- And form database:
https://css-tricks.com/using-data-in-react-with-the-fetch-api-and-axios/
Hope this can help. Feel free if you have any further queries.
Kind regards.
i want override import { ContactList, ChatRoom } from ‘dan-components’; but i can’t find this
Hi Jaskkit,
Thanks for purchasing.
For ContactList is in /app/components/Contact/ContactList.js
And for ChatRoom /app/components/Chat/ChatRoom.js
Feel free if You have any further queries.
Kind regards.
how to deploy production
Hi Jaskkit,
The deployment step is already in documentation, section Setup > Deployment.
Here’s the online docs https://ilhammeidi.github.io/dandelion-docs/
Feel free if You have any further queries.
Kind regards.
Hi. Any plans to upgrade to material-ui v4?
Hi checklist,
Thanks for visiting our portfolio.
We are still work on upgrading to material ui v4. We will publish on next month.
Kind regards.
hello,
first i would thank you for your beautiful template ( dandelion ),
and i wanna buy it , but i want to have rtl design layout because i will use it with system support arabic language , so please tell me the template support that or not ?
thank you 
Hi mostafa_elshenawy,
Thanks for visiting our portfolio.
This template not supported for RTL yet. But we will implement RTL feature on next month.
Kind regards.
thank you ,sorry last thing
if i buy it now i will get the update next month for free or i should wait for the update ?
Hi mostafa_elshenawy,
If you buy now you can download free updates forever from envato and technical support for 6 month (by default).
FYI: Currently this template use material-ui v3, If you want to implement RTL soon, you can follow this documentation https://v3.material-ui.com/guides/right-to-left/
Then put the RTL setup config in/app/styles/theme/applicationTheme.js and
/app/containers/App/ThemeWrapper.js
Kind Regards.
Hi, just bought the Template and have two questions
1. How do I get rid of the theme selector? 2. How can I add a new Google Font? I tried the usual way (link) but does not work
Hi alexpuig,
Thanks for purchasing.
1. To remove theme selector, please open app/containers/App/ThemeWrapper.js then remove TemplateSettings component.
2. To add more fonts, You can add in app/index.html by use <link/>. Then call it in css/jss with font-family or fontFamily(in jss).
And also if want to make as default font, can set in app/styles/applicationTheme.js. then change the object typography > fontFamily.
Hope this can help. Feel free if you have any further queries.
Kind regards.
Thanks!
Another question, I’m trying to add qrcode.react but it fails
>npm install qrcode.react
And in the container: import { QRCode } from ‘qrcode.react’;
<QRCode id=”123456” value=”123456” size={290} />
The error is : Warning: React.createElement: type is invalid—expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it’s defined in, or you might have mixed up default and named imports.
Hi alexpuig
Regarding qrcode.react docs. Please use import from default export instead like this:
import QRCode from ‘qrcode.react’;
Hope this can help. Feel free if you have any further queries.
Kind regards.
Hi Again,
Did the template include the PSD files?
Best regards,
Hi supapo,
This template not include PSD just some Sketch files only for landing pages, table and form.
Regards.
Hello, I would like to congratulate the dandelion react theme is very beautiful and functional. However, we are having a problem with the total file size. In our platform, it downloads on the device of the 42mb client, being https://hospedae.app/vendors~main.chunk.js with 30mb. See on pingdom please. This is too much for our customers, and the system gets very slow on the first upload. Would you like to know if you have how to compact or reduce this load to the client, maintaining the quality and beauty of the template? thank you.
Hi hospedae,
Thank you so much for purchasing and the appreciation.
After we investigated your file, that compressed already so it difficult to find what exactly excess. So may we know your’e package json dependencies ad devDependencies?
Kin regards.
Hi! Can I use the template without React? Maybe you have html/css version of this amazing template?
Hi poremchuk,
Thanks for visiting our portfolio.
Unfortunately we haven’t create HTML version yet. Only the react version.
Kind regards.
when I install mysql, I got error.
$ yarn add mysql
ERROR in ./node_modules/mysql/lib/Connection.js Module not found: Error: Can’t resolve ‘net’ in ’/Volumes/Data/work/react-native/AU/Warranty/node_modules/mysql/lib’ @ ./node_modules/mysql/lib/Connection.js 3:23-37 @ ./node_modules/mysql/index.js @ dll reactBoilerplateDeps
ERROR in ./node_modules/mysql/lib/Connection.js Module not found: Error: Can’t resolve ‘tls’ in ’/Volumes/Data/work/react-native/AU/Warranty/node_modules/mysql/lib’ @ ./node_modules/mysql/lib/Connection.js 4:23-37 @ ./node_modules/mysql/index.js @ dll reactBoilerplateDeps
how can I fix it?
Hi polarislee1984,
Thanks for purchasing.
Those error happens when install new backend plugin/module, because usually the webpack:dll process can’t go through.
But don’t worry the apps should working as well. To remove that error message please open
- /internals/config.js then add mysql in exclude array
- package.json same as above: add mysql in dllPlugin > exclude array
When you do fresh installation those error will not show anymore.
Hope this can help. Feel free if you have any further queries.
Kind regards.
Dear:
I’m working with Docker and Nginx. When compiling the project, it was completed successfully, then I copied the compilation folder (compiled previously) to the nginx production folder ”/ var / www / html” but, when I opened the project in the ip with my browser, there were resources that they were not available (404 error) as for example: the loader.gif. I think you are not compiling all the files in the public / project folder.
Do you have any other solution other than “npm run build: prod”? since I want to leave it as a nginx service
“npm run start:prod” **
Hi jcarriag,
Thanks for purchasing.
Yes after npm run build, please run npm run start:prod to run the server in production mode.
If you want run it in background you may try PM2 https://www.npmjs.com/package/pm2. Then run this command: node node_modules/.bin/cross-env NODE_ENV=production pm2 start server. By default the app will running on port 3000.
Here’s the docs about deployment https://ilhammeidi.github.io/dandelion-docs/#run
FYI: We use nginx also in our demo site. For pointing to localhost:3000 can add new site in servers.conf
sudo nano etc/nginx/conf.d/servers.conf
server {
-----
location / {
proxy_pass http://127.0.0.1:3000;
-----
-----
-----
}
}
Feel free if you have any further queries.
Kind Regards.
which version of node and npm require the template, to be able to configure it in my dockerfile
Hi jcarriag,
You can use node v10.x.x and npm v6.x.x. FYI in out environment use node v10.13.0 npm v6.1.0
Feel free if you have any further queries.
Kind regards.
i have a problem whit exec production file whit docker… this is my dockerfile :
- base image FROM node:10.14.0-alpine
- set working directory WORKDIR /app
- add `/app/node_modules/.bin` to $PATH ENV PATH /app/node_modules/.bin/cross-env:$PATH COPY pm2.json /app/package.json
- install and cache app dependencies COPY package.json /app/package.json RUN npm install
COPY . /app
RUN npm run build RUN npm install pm2 -g #RUN run start:prod RUN node /app/node_modules/.bin/cross-env NODE_ENV=production CMD [“pm2-runtime”, “—env” ,”production”, “server”]
but no exec in production, it worked with devtools … can you help me?
Hi jcarriag,
May we know is there any warning/info/error message?
And when run the app command please try without pm2-runtime and env. Just like this:CMD ["pm2", "start", "server"]
Then add EXPOSE [YOUR PORT] i.e. EXPOSE 3000
Feel free if you have any further queries.
Kind regards.
[PM2] Spawning PM2 daemon with pm2_home=/root/.pm2 sample-prod1 | [PM2] PM2 Successfully daemonized sample-prod1 | [PM2] Starting /app/server in fork_mode (1 instance) sample-prod1 | [PM2] Done. sample-prod1 | sample-prod1 | Use `pm2 show <id|name>` to get more details about an app sample-prod1 exited with code 0.
this CMD [“pm2”, “start”, “server”] does not work
I solve it. thx
Awesome :thumb and your’e welcome
Is there any plan to support RTL layout?
Hi supapo,
Thanks for visiting our portfolio.
Yes we weill add RTL support for this template on next month.
Regards.
We can add dandelion template to our the UI template of our platform. There can be two sets of templates at the same time.
Hi salwenlo,
Thanks for purchasing.
Dandelion Pro can use for multiple site at the same time. But each application must in different port. To change the port please open /server/port.js By default this template run in port 3000. In example you can change it to port 3001
module.exports = parseInt(argv.port || process.env.PORT || '3001', 10);
Feel free if You have any further queries.
Kind regards.
How do I use with Django? I’m with a nginx+gunicorn+django setup already working. I would like to use django + react as this tuto (http://v1k45.com/blog/modern-django-part-1-setting-up-django-and-react/) says, but the folders in Dandelions’s starter-project are too different.
Have you a Github with such implementation?
tk v much! It´s gret your template!
Hi falamarcao,
Thanks for purchasing and the appreciation.
As your article tutorial, here’s the important file to be integrated with djanggo:
- config/webpack*: /internals/webpack
- Main App (src/App): /app/containers/App/index.js
- config/paths.js: This template not have this file. So can create as new file in webpack directory /internals/webpack/
- And need install webpack-bundle-tracker and load it in webpack.dev.babel as plugin
And also please take a look for this repo: https://github.com/scottwoodall/django-react-template This template structure is similar like Dandelion Pro with redux and immutable.js
Hope this can help. Feel free if you have any further queries.
Kind regards.
if i buy can you provide me only HTML theme it’s possible
Hi 96pgoel,
Thanks for visiting our portfolio.
Unfortunately we don’t have html version. It’s only react.js version.
Regards.
what is diff. b/w html(Angular js) v/s react js
Hi 96pgoel
Here is the article about react angular comparassion https://programmingwithmosh.com/react/react-vs-angular/
Regards
Hi,
Thank you for your awesome product, I like how it’s build, but I have a question … is it possible to use it with create react app ??
Hi goldleon,
Thanks for purchasing and the appreciation.
This template is possible to implement in other react framework or starter kit like next or Create React App..
First you need take out the components, containers, and styling only and put it in CRA.
In dandelion-pro we use absolute path to call the components, containers, etc to make it easier. So then in CRA please adjust the alias path settings by customize webpack configuration.
NOTE: In dandelion-pro the alias path setting is in /internals/webpack/webpack.base.babel.js
Feel free if You have any further queries.
Kind regards.
Thank you for your quick reply, actually I’m plannong on using apollo client as store instead of redux, do you have any idea how to replace it on your boilerplate
Hi goldleon,
Actually the redux use for store and manipulate state in front-end side, so can be used with apollo together.
But if don’t want to use redux, you can store the state in local state or use react hook (useState). This an useful article https://medium.com/the-notice-board/life-without-redux-using-apollo-for-local-state-d32b020ff4d3
Hope this can help. Feel free if You have any further queries.
Kind regards.
Hi Thank you for your reply, but could you please tell me how to use the same aliases on CRA ?
Hi goldleon,
First you need to configure webpack from CRA by eject it npm run eject
If you have ejected you can set the alias in the Webpack configuration in config/webpack.config.dev.js files and be able to import like you want:
resolve: {
alias: {
'dan-components': '/app/components/',
'dan-api': 'app/api/'
}
},
Hope this can help. Feel free if You have any further queries.
Kind regards.
Thank you for your reply, but their is no other solution without ejecting the app?
Hi goldleon,
For alternative you can setup root path by add(if not exist) .env file in root project and add NODE_PATH=app (because all components and containers put in app/ folder).
After that search from app/ folder: dan-components, dan-actions, dan-api and so on, then replace all files to components/, actions/, api/ and so on.
Another alternative can try next.js. It similiar like CRA and has easier webpack configuration.
Hope this can help. Feel free if You have any further queries.
Kind regards.
Hi, I want to modify sidebar. Which component should i change?
Thanks
Hi restlessblaze,
Thanks for purchasing,
For sidebar menu : app\api\ui\menu.js
For sidebar template can see in : Left Sidebarapp\containers\Templates\layouts\LeftSidebarLayout.js and Right Sidebar: app\containers\Templates\layouts\LeftSidebarLayout.js
And for the components: app/components/Sidebar/SidebarContent.js
For the template structure can see in https://ilhammeidi.github.io/dandelion-docs/#code_basic
Feel free if You have any further queries.
Kind regards.
Hi, I am trying to load data from an api by axios using the Data Table example “AdvTable” but does not show the information, if I make a console.log the information is there correctly … I did test using the “Basic Table” example data are loaded normally.
Here’s my example:
import React from ‘react’; import { Helmet } from ‘react-helmet’; import { PapperBlock, AdvTable } from ‘dan-components’; import brand from ‘dan-api/dummy/brand’; import { withStyles } from ’@material-ui/core/styles’; import Axios from ‘axios’;
const styles = ({ root: { flexGrow: 1, } });
class QualificacaoCadastral extends React.Component { state = { dados: [], order: ‘asc’, orderBy: ‘NOME’, selected: [], columnData: [ { id: ‘NOME’, numeric: false, disablePadding: true, label: ‘Nome’ }, { id: ‘CPF’, numeric: false, disablePadding: false, label: ‘CPF’ }, { id: ‘NIS’, numeric: false, disablePadding: false, label: ‘NIS’ }, { id: ‘DN’, numeric: false, disablePadding: false, label: ‘Data Nascimento’ }, ], page: 0, rowsPerPage: 25, defaultPerPage: 5, filterText: ’’, }; }
componentDidMount = () => {
Axios.get('https://localhost:5001/api/QualificacaoCadastral').then(result => this.setState({
dados: result.data
}));
}
render() {
const title = brand.name;
const description = brand.desc;
}
const {
dados,
order,
orderBy,
selected,
page,
rowsPerPage,
defaultPerPage,
filterText,
columnData
} = this.state;
console.log(dados);
return (
<Helmet>
<title>{title}</title>
<meta name="description" content={description} />
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
</Helmet>
<PapperBlock title="Listar Segurado(s)" whiteBg desc="">
<AdvTable
order={order}
orderBy={orderBy}
selected={selected}
data={dados}
page={page}
rowsPerPage={rowsPerPage}
defaultPerPage={defaultPerPage}
filterText={filterText}
columnData={columnData}
/>
</PapperBlock>
);
export default withStyles(styles)(QualificacaoCadastral); import React from ‘react’; import { Helmet } from ‘react-helmet’; import { PapperBlock, AdvTable } from ‘dan-components’; import brand from ‘dan-api/dummy/brand’; import { withStyles } from ’@material-ui/core/styles’; import Axios from ‘axios’;
const styles = ({ root: { flexGrow: 1, } });
class QualificacaoCadastral extends React.Component { state = { dados: [], order: ‘asc’, orderBy: ‘NOME’, selected: [], columnData: [ { id: ‘NOME’, numeric: false, disablePadding: true, label: ‘Nome’ }, { id: ‘CPF’, numeric: false, disablePadding: false, label: ‘CPF’ }, { id: ‘NIS’, numeric: false, disablePadding: false, label: ‘NIS’ }, { id: ‘DN’, numeric: false, disablePadding: false, label: ‘Data Nascimento’ }, ], page: 0, rowsPerPage: 25, defaultPerPage: 5, filterText: ’’, }; }
componentDidMount = () => {
Axios.get('https://localhost:5001/api/QualificacaoCadastral').then(result => this.setState({
dados: result.data
}));
}
render() {
const title = brand.name;
const description = brand.desc;
}
const {
dados,
order,
orderBy,
selected,
page,
rowsPerPage,
defaultPerPage,
filterText,
columnData
} = this.state;
console.log(dados);
return (
<Helmet>
<title>{title}</title>
<meta name="description" content={description} />
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
</Helmet>
<PapperBlock title="Listar Segurado(s)" whiteBg desc="">
<AdvTable
order={order}
orderBy={orderBy}
selected={selected}
data={dados}
page={page}
rowsPerPage={rowsPerPage}
defaultPerPage={defaultPerPage}
filterText={filterText}
columnData={columnData}
/>
</PapperBlock>
);
export default withStyles(styles)(QualificacaoCadastral);
Hi agricioribeiro,
The component and state structute is correct. Maybe the problem from data structure from API.
Please try by using static data without axios first to test it. And May we know the data structure form your response?
Hello, with static data works because the data is already set in the state, but when implemented in componentDidMount the data is not shown in the table.
Here’s an example of how data from api axios is returned:
[ { “IDORIGEM”: 2, “NAME”: “TEST 1”, “CPF”: “111.111.111-11”, “NIS”: “111.11111.11.1”, “DN”: “01/01/2019” }, { “IDORIGEM”: 5, “NAME”: “TEST 2”, “CPF”: “222.222.222-22”, “NIS”: “222.22222.22.2”, “DN”: “01/01/2019” }, { “NAME”: “TEST 3”, “CPF”: “333.333.333-33”, “NIS”: “333.33333.33.3”, “DN”: “01/01/2019” } ]
Hi agricioribeiro,
We use state.data in AdvTable component. Please check the code in /app/components/Tables/AdvTable.js We push the props.data in to state.data. So it seems the state.data not fulfilled yet and need to check the availability of props.data.
Please add an additional checking in constructor. Here’s sample code:
this.state = {
data: data !== null ? data.sort((a, b) => (a.calories < b.calories ? -1 : 1)) : null,
}
Or can try another way by use componentWillMount() as well
this.state = {
data: null
}
componentWillMount() {
this.setState({
data: this.props.data
});
}
Hope this can help. Feel free if You’ve any futher queries.
Kind regards.
Hello, I would like to know if this template uses redux saga.
Hi agricioribeiro,
Thanks for purchasing.
We not implement the redux-saga, but this template has redux-saga configuration. And the configuration is in app/redux/configureStore.js
FYI: This template built with react-boilerplate.
Feel free if you have any further queries.
Kind regards.