427 comments found.
Trying to understand licencing. If we want to use EasyDev for a dashboard developed in-house for internal and external people are we one customer application and just need an extended licence or if we don’t charge for the app is not a single regular licence?
Hello,
The Regular License grants you, the purchaser, an ongoing, non-exclusive, worldwide license to make use of the digital work (Item) you have selected. You are licensed to use the Item to create one single End Product for yourself or for one client (a “single application”), and the End Product can be distributed for Free. No fee is paid by the end user to access the End Product. The End Product is not sold. No fee is paid to subscribe to a service that includes the End Product (eg a website subscription fee). Learn more here: https://themeforest.net/licenses/terms/regular
Regards, Aspirity
For some reason that I can not understand, modal components do not seem to inherit their colors from the configured themes… If you set the theme to dark, the background is always white..
.modal-content {
border-radius: 0;
border: none;
box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1);
position: relative;
padding: 50px 40px 60px 40px;
text-align: center;
@include themify($themes) {
background-color: themed('colorBackground');
color: themed('colorText');
}
}The background-color and color css properties never make it to the final css.. But the themify function works fine everywhere else. Can you give me hand on this one?
Hello!
It happens because the modals are inserted after the root and the theme class doesn’t influence it. You can try to use redux to pass theme value inside the modal components. It should help to solve this issue.
Best regards, Aspirity
What exactly do you mean by “after the root”? I got around it by simply specifying the color values that I want, as I do not provide theme changing possibilities in my app, so I have my specific problem handled, but for everyone else, the code above (which is provided by default) is not working as expected, would be nice to fix it.
Hello!
If you don’t want to use themes just remove `@include themify($themes) {}` and write style as usual. We’ll fix the possibility of using themes in modals asap.
Best regards, Aspirity
Hello,
Can you provide me a package.json file with the configuration to just run webpack 4 watch command ?
Sorry I meant to say a webpack.config.js file
Hello!
Уou can find all the webpack.config files in ‘config’ folders.
Best regards, Aspirity.
Hi. My name Nazrul. I got error when i try serve after build using template and seed. The error is unexpected token <. Can you look at it?
I already fixed it. TQ.
Hi,
Happy to hear you’ve solved the problem.
Regards, Aspirity.
Hello, on an initial test of the ‘seed’ directory, i’m receiving this error:
console.error node_modules/prop-types/checkPropTypes.js:19
Warning: Failed prop type: Invalid prop `children` of type `array` supplied to `ScrollToTop`, expected a single ReactElement.
in ScrollToTop (created by Route)
in Route (created by withRouter(ScrollToTop))I believe the fix is to change ScrollToTop.jsx line 10 from:
children: PropTypes.element.isRequired,
to:
children: PropTypes.arrayOf(PropTypes.element).isRequired,
Thought you should know of this issue, and please let me know if that is the incorrect fix.
Regards, Tim
Hello!
Thank you for your comment. To resolve this issue just move the logic operation with ‘loaded’ before <Router/> in App.jsx. We’ll fix it in the next update.
Best regards, Aspirity
Hello,
I tried to install the template with webpack 4 and I get this errors https://www.screencast.com/t/4qmEjKbZ when I run the watch command. Do you know why ?
Regards
Hello!
Could you please provide more details? Unfortunately, we can not reproduce your issues. Could you tell us what had you done before the error appeared (or after the template downloading)? Which files did you change? How did you run the scripts? What is your operation system (Windows, Linux, Mac)?
Best regards, Aspirity
Hello!
I went over that error but now I get some undefined in path of images – https://www.screencast.com/t/whv9uo2TLqv. Here is the webpack.config.js
const path = require(‘path’); const ModuleNotFoundPlugin = require(‘react-dev-utils/ModuleNotFoundPlugin’); const paths = require(’./config/paths’); const WatchMissingNodeModulesPlugin = require(‘react-dev-utils/WatchMissingNodeModulesPlugin’); const webpack = require(‘webpack’); const CaseSensitivePathsPlugin = require(‘case-sensitive-paths-webpack-plugin’); const ManifestPlugin = require(‘webpack-manifest-plugin’); const PnpWebpackPlugin = require(‘pnp-webpack-plugin’);
const publicPath = ’/’; const cssRegex = /\.css$/; const cssModuleRegex = /\.module\.css$/; const sassRegex = /\.(scss|sass)$/; const sassModuleRegex = /\.module\.(scss|sass)$/; const getCSSModuleLocalIdent = require(‘react-dev-utils/getCSSModuleLocalIdent’);
// common function to get style loaders const getStyleLoaders = (cssOptions, preProcessor) => { const loaders = [ require.resolve(‘style-loader’), { loader: require.resolve(‘css-loader’), options: cssOptions, }, { // Options for PostCSS as we reference these options twice // Adds vendor prefixing based on your specified browser support in // package.json loader: require.resolve(‘postcss-loader’), options: { // Necessary for external CSS imports to work // https://github.com/facebook/create-react-app/issues/2677 ident: ‘postcss’, plugins: () => [ require(‘postcss-flexbugs-fixes’), require(‘postcss-preset-env’)({ autoprefixer: { flexbox: ‘no-2009’, }, stage: 3, }), ], }, }, ]; if (preProcessor) { loaders.push(require.resolve(preProcessor)); } return loaders; }; require(’./config/env’); //let mix = require(‘laravel-mix’);
/*
|—-—-—-—-—-—-—-—-—-—-—-—-—-—-—
| Mix Asset Management
|—-—-—-—-—-—-—-—-—-—-—-—-—-—-—
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
/
/mix.react(‘resources/assets/js/app.js’, ‘public/js’).sourceMaps() .react(‘resources/assets/js/admin.js’, ‘public/js’).sourceMaps() .sass(‘resources/assets/sass/app.scss’, ‘public/css’);/ //mix.copyDirectory(‘assets/images’, ‘public/images’); var LiveReloadPlugin = require(‘webpack-livereload-plugin’);
/mix.webpackConfig({ plugins: [ new LiveReloadPlugin() ] }); / module.exports = { entry: { app: ’./resources/assets/js/app.js’, admin: ’./resources/assets/js/admin.js’ }, output: { filename: ‘[name].bundle.js’, path: path.resolve(__dirname, ‘public/js’) }, optimization: { //splitChunks: {chunks: ‘all’, name: false}, //runtimeChunk: true }, module: { strictExportPresence: true, rules: [ { parser: { requireEnsure: false } }, { test: /\.(js|jsx)$/, enforce: ‘pre’, /use: [ { options: { formatter: require.resolve(‘react-dev-utils/eslintFormatter’), eslintPath: require.resolve(‘eslint’), }
},
loader: require.resolve('eslint-loader'),
},
],*/
include: paths.appSrc,
},
{
// `mjs` support is still in its infancy in the ecosystem, so we don't
// support it.
// Modules who define their `browser` or `module` key as `mjs` force
// the use of this extension, so we need to tell webpack to fall back
// to auto mode (ES Module interop, allows ESM to import CommonJS).
test: /\.mjs$/,
include: /node_modules/,
type: 'javascript/auto',
},
{
// "oneOf" will traverse all following loaders until one will
// match the requirements. When no loader matches it will fall
// back to the "file" loader at the end of the loader list.
oneOf: [
// "url" loader works like "file" loader except that it embeds assets
// smaller than specified limit in bytes as data URLs to avoid requests.
// A missing `test` is equivalent to a match.
{
test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
loader: require.resolve('url-loader'),
options: {
limit: 10000,
name: 'static/media/[name].[hash:8].[ext]',
},
},
// Process application JS with Babel.
// The preset includes JSX, Flow, and some ESnext features.
{
test: /\.(js|jsx)$/,
include: paths.appSrc,
loader: require.resolve('babel-loader'),
options: {
customize: require.resolve(
'babel-preset-react-app/webpack-overrides'
),
},
plugins: [
// Generates an `index.html` file with the <script> injected.
//new HtmlWebpackPlugin({
// template: paths.appHtml,
//}),
// Makes some environment variables available in index.html.
// The public URL is available as PUBLIC_URL in index.html, e.g.:
// <link rel="shortcut icon" href=" PUBLIC_URL /favicon.ico">
// In development, this will be an empty string.
//new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),
// This gives some necessary context to module not found errors, such as
// the requesting resource.
new ModuleNotFoundPlugin(paths.appPath),
// Makes some environment variables available to the JS code, for example:
// if (process.env.NODE_ENV === 'development') { ... }. See `./env.js`.
//new webpack.DefinePlugin(env.stringified),
// This is necessary to emit hot updates (currently CSS only):
new webpack.HotModuleReplacementPlugin(),
// Watcher doesn't work well if you mistype casing in a path so we use
// a plugin that prints an error when you attempt to do this.
// See https://github.com/facebook/create-react-app/issues/240
new CaseSensitivePathsPlugin(),
// If you require a missing module and then `npm install` it, you still have
// to restart the development server for Webpack to discover it. This plugin
// makes the discovery automatic so you don't have to restart.
// See https://github.com/facebook/create-react-app/issues/186
new WatchMissingNodeModulesPlugin(paths.appNodeModules),
// Moment.js is an extremely popular library that bundles large locale files
// by default due to how Webpack interprets its code. This is a practical
// solution that requires the user to opt into importing specific locales.
// https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
// You can remove this if you don’t use Moment.js:
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
// Generate a manifest file which contains a mapping of all asset filenames
// to their corresponding output file so that tools can pick it up without
// having to parse `index.html`.
new ManifestPlugin({
fileName: ‘asset-manifest.json’,
publicPath: publicPath,
}),
],
resolve: {
modules: [‘node_modules’],
extensions: [’.web.js’, ’.json’, ’.web.jsx’, ’.js’, ’.jsx’]
},
resolveLoader: {
plugins: [
// Also related to Plug’n’Play, but this time it tells Webpack to load its loaders
// from the current package.
PnpWebpackPlugin.moduleLoader(module),
],
},
node: {
dgram: ‘empty’,
fs: ‘empty’,
net: ‘empty’,
tls: ‘empty’,
child_process: ‘empty’,
},
devtool: ‘inline-source-map’,
mode:’development’,
performance: false,
//debug: trueplugins: [
[
require.resolve('babel-plugin-named-asset-import'),
{
loaderMap: {
svg: {
ReactComponent: '@svgr/webpack?-prettier,-svgo![path]',
},
},
},
],
],
// This is a feature of `babel-loader` for webpack (not Babel itself).
// It enables caching results in ./node_modules/.cache/babel-loader/
// directory for faster rebuilds.
cacheDirectory: true,
// Don't waste time on Gzipping the cache
cacheCompression: false,
},
},
// Process any JS outside of the app with Babel.
// Unlike the application JS, we only compile the standard ES features.
{
test: /\.js$/,
exclude: /@babel(?:\/|\\{1,2})runtime/,
loader: require.resolve('babel-loader'),
options: {
babelrc: false,
configFile: false,
compact: false,
presets: [
[
require.resolve('babel-preset-react-app/dependencies'),
{ helpers: true },
],
],
cacheDirectory: true,
// Don't waste time on Gzipping the cache
cacheCompression: false,
]// If an error happens in a package, it's possible to be
// because it was compiled. Thus, we don't want the browser
// debugger to show the original code. Instead, the code
// being evaluated would be much more helpful.
sourceMaps: false,
},
},
// "postcss" loader applies autoprefixer to our CSS.
// "css" loader resolves paths in CSS and adds assets as dependencies.
// "style" loader turns CSS into JS modules that inject <style> tags.
// In production, we use a plugin to extract that CSS to a file, but
// in development "style" loader enables hot editing of CSS.
// By default we support CSS Modules with the extension .module.css
{
test: cssRegex,
exclude: cssModuleRegex,
use: getStyleLoaders({
importLoaders: 1,
}),
},
// Adds support for CSS Modules (https://github.com/css-modules/css-modules)
// using the extension .module.css
{
test: cssModuleRegex,
use: getStyleLoaders({
importLoaders: 1,
modules: true,
getLocalIdent: getCSSModuleLocalIdent,
}),
},
// Opt-in support for SASS (using .scss or .sass extensions).
// Chains the sass-loader with the css-loader and the style-loader
// to immediately apply all styles to the DOM.
// By default we support SASS Modules with the
// extensions .module.scss or .module.sass
{
test: sassRegex,
exclude: sassModuleRegex,
use: getStyleLoaders({ importLoaders: 2 }, 'sass-loader'),
},
// Adds support for CSS Modules, but using SASS
// using the extension .module.scss or .module.sass
{
test: sassModuleRegex,
use: getStyleLoaders(
{
importLoaders: 2,
modules: true,
getLocalIdent: getCSSModuleLocalIdent,
},
'sass-loader'
),
},
// "file" loader makes sure those assets get served by WebpackDevServer.
// When you `import` an asset, you get its (virtual) filename.
// In production, they would get copied to the `build` folder.
// This loader doesn't use a "test" so it will catch all modules
// that fall through the other loaders.
{
// Exclude `js` files to keep "css" loader working as it injects
// its runtime that would otherwise be processed through "file" loader.
// Also exclude `html` and `json` extensions so they get processed
// by webpacks internal loaders.
exclude: [/\.(js|jsx)$/, /\.html$/, /\.json$/],
loader: require.resolve('file-loader'),
options: {
name: 'static/media/[name].[hash:8].[ext]',
},
},
],
},
{
test: require.resolve('jquery'),
use: [{
loader: 'expose-loader',
options: '$'
}]
}This is the command: cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js—watch—progress—hide-modules I`m on windows 7
Regards
Sorry this screenshot should be ok https://www.screencast.com/t/hTD4ewykSRw
Hello!
The issue is in an incorrect path you’ve got. There are problems with env variable – PUBLIC_URL which is being set up by “env” script from config folder. Check this script carefully.
Best regards, Aspirity.
Hello.
I try to install this template with webpack 3 but I get more errors – https://www.screencast.com/t/eUYYRLqQ4. Do you know how could be fixed this ?
Thanks
Nevermind I try with webpack 4
Hello,
Happy to hear you’ve dealt with it.
Regards, Aspirity.
Hi this is a great looking template!
I have a question before purchase it. We want to use http://previews.aspirity.com/easydev/ as a landing page. Is this the bonus free html landing page that you mention at product listing page?
or there will be a different version of lp when we purchase the template?
Hi,
There is the same landing page inside with several new blocks.
Regards, Aspirity.
Hi,
Thanks a lot for your response.
One more question. We won’t use it with react app. Is there any possibilty to get html version of it?
Hi,
Unfortunately, there is only the react version.
Regards, Aspirity
do you have any version that uses the React Context api ? we are looking to move from Redux to the built in Context system.
Hello!
Unfortunately, we don`t have a version with React Context API. There are too many state management libraries (as well as native ways) and we cannot support them all. However, there are not many redux dependencies and if you would like to migrate from redux – go on, it wouldn`t take much time.
Best regards, Aspirity
I am having issues with deploying this to heroku (when using the specified buildpack) that is not covered in the docs, but don’t want to put all of the info here in a comment. Is there an email address I can contact to get assistance with the issue?
Hello!
We didn’t work with heroku but we try to help you with it. You can write us on product@aspirity.com.
Best regards, Aspirity.
Hi,
After the recent updates. Check Form controls under the Form side bar has multiple issues. Radio buttons and checkboxes have seized to work under almost all section.
Regards
Hello!
Thanks for your comment. We’ll fix it on the next Tuesday.
Best regards, Aspirity.
Good evening, I was trying to use the Multiselect field located in the Basic form section, I need to use a custom placeholder there but ccouldn’t get to make it work.
Can you please help me with this issue?
Regards.
Hello!
Sorry, we’ve forgotten to check it. We’ll fix it in the next update. To fix it now add in props of renderMultiSelectField (in Multiselect.jsx) ‘placeholder: PropTypes.string,’ and add ‘placeholder={props.placeholder}’ in its render.
Best regards, Aspirity.
Hi! This framework permit changing the font size? We are from health area and the people who use our system need large fonts. You can see our frontend here insight.eyenetra.com .
Thanks
Hello!
Unfortunately, the template has only color variables and it has no many font-size properties in the styles. You can only change them using project search.
Best regards, Aspirity.
Hi.. I already purchased your template. But it turns out that I add the same item twice to the cart, and purchase 2, instead of 1 unintentionally. I already requested the refund for one of them.
Please help.
Thank you.
Hello!
We’ve made the refund.
Regards, Aspirity.
Hello is there a version written in typescript ??
Hello!
Unfortunately, this template doesn’t support typescript.
Best regards, Aspirity.
I am running into a strange issue running the “npm run build” for deployment on an elastic beanstalk instance. There are two devDependencies, sass-loader and node-sass. If I specify npm run build from the deployment config file, I am getting errors stating the sass-loader and node-sass modules are missing. If I add these modules to the dependencies on the package-json file, the build script seems to spike the cpu and memory and the build seems to hang after it hits this line:
let compiler = webpack(config);
Has anyone encountered this issue and what is the fix?
I am having a very difficult time deploying your template to elastic beanstalk. I really need advice to move forward.
During the deploy process, the ec2 machine for elastic beanstalk, t2.small, seems to reach 100% cpu utiliziation and at least 95% memory utilization. When running “npm run build”, webpack seems to stop immediately after this line in the build.js file:
console.log(‘Creating an optimized production build…’);
/*/ let compiler = webpack(config); /*/.
Any help would be greatly appreciated.
Hello!
We are not experienced with elastic beanstalk, but we suppose that you don`t have to run build on a remote machine, but you should upload a built version. Try to make the build locally and upload it to beanstalk. Another possible solution – check machine resources, the problem could be with insufficient memory amount.
Best regards, Aspirity
Will this work if I am going from a mac os environment to a linux envorinment?
Hello!
It shouldn’t be related to the operating system. Please, make sure build works locally then check beanstalk provided system resources and make sure that enough to build.
Best regards, Aspirity.
Just to be sure. I should upload all of the contents of the build folder to the web server?
Mostly, it`s enough to just put your “build” content on a server, but it`s a complicated process and for further info please take a look here: https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#deployment (perfect description for nearly all possible cases).
Best regards, Aspirity.
Dear Aspirity, I’m writing you because I have a problem with your theme. When I try and build the app I get the following error:
Creating an optimized production build… Failed to compile.
Failed to minify the code from this file:
./node_modules/superagent/lib/client.js:5Read more here: http://bit.ly/2tRViJ9
npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! easydev@1.3.5 build-js: `node scripts/build.js` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the easydev@1.3.5 build-js script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in: npm ERR! /home/andrea/.npm/_logs/2018-10-01T14_38_01_644Z-debug.log ERROR: “build-js” exited with 1. npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! easydev@1.3.5 build: `npm-run-all build-css build-js` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the easydev@1.3.5 build script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
Superagent is not part of your original modules, but I’ve installed it myself with npm. At line 5 the only thing written is “let varname = value” It looks like there’s a problem in minifying ES6 modules. With a clean create-react-app project this same npm module does not have problems. Do you have any suggestion in order to fix the issue?
Thank you in advance!
Hello!
It’s the well-known issue with creat-react-app. Unfortunately, have been using an outdated version in our template and we will update it asap. For now, you can use the newest create-react-app and migrate required components in your project or wait for our update.
Best regards, Aspirity.
Hello! Thank you for your kind answer! I was afraid that was the case and I’ve also tried to update create-react-app myself, but I can’t find the module anywhere in the node_modules folder nor in the package.json. Can you please point me in the right direction in order to update the package myself? It’s quite urgent since I have a deadline to be met
Thank you again!
Hello!
Unfortunately, you have understood us incorrectly. You supposed to create a clean new version of create-react-app and migrate all components to it. But you don’t have to do it, we have updated our template with the latest version, so you can just download the new version.
You can`t update the packages, because we didn’t use create-react-app parts, we migrated them in our application for flexibility (via eject).
Best regards, Aspirity.
I’ve updated the theme and now I can build without errors. Thank you very much.
Great!
If our support is helpful, please, rate us with the stars.
Best regards, Aspirity.
Hi,
I’m getting this error from a new project where I’m moving only the components I need.
Error: Module build failed: SyntaxError: C:/xampp/htdocs/mercadoregalos/resources/assets/shared/components/form/CheckBox.jsx: Missing class properties transform.
Do you know why would this be happening? I need to sort it out in out in order to go on with my project.
Thanks in advance,
Hello!
Please, make sure you have this babel config in package.json.
"babel": {
"presets": [
"react-app"
]
},
"eslintConfig": {
"extends": "react-app"
}If you use .babelrc check presets order carefully, because it`s matter.
Please, provide your package.json, .babelrc and webpack to further support.
Best regards, Aspirity.
Loving the theme. A comment, it would be really helpful to have a non redux seed version. It saves a lot of time for those looking to replace redux for component state with the Context api.
Hello!
Thanks for your comment. We’ll add the seed without redux in the next update.
Best regards, Aspirity!
