Hi,

Thanks for reaching out!

This template does not support React Hooks and we are using 16.13.1 Version.

Let us know if you need anything else at support@theironnetwork.org

Thanks and have a nice day!

Hi,

Thanks for reaching out!

Yes, We are using animations in theme in some sections. You can check these in our demo link. Please let us know which animations you are interested in or explain your question specifically then we will able to help you.

Let us know if you need anything else at support@theironnetwork.org

Thanks and have a nice day!

Hi,

Thanks for reaching out!

We checked your issue at our end, and it’s working fine. we already added tour component functionality run on production mode. It seems that you had done some changes in this section that is why you are facing this.

Please send us the example code that you had done, so that we can help you as soon as possible.

Let us know if you need anything else at support@theironnetwork.org

Note: Please renew your support.

Thanks and have a nice day!

oh hi i didnt notice that my support is expired i will renew it asap. Just wondering real quick how to disable the tour functionality?

Hi,

Please renew the support. Thanks!

Hi,

Thanks for reaching out!

We already mentioned modal components in UI-Components, please check the link:- https://reactify.theironnetwork.org/app/ui-components/dialog

Let us know if you need anything else at support@theironnetwork.org

Thanks and have a nice day!

Hi,

Thanks for reaching out!

Regarding your query we are sharing a link below, it may help you:-

https://code.visualstudio.com/docs/editor/intellisense

Let us know if you need anything else at support@theironnetwork.org

Thanks and have a nice day!

Hi,

Thanks for reaching out!

We checked your issue at our end and resolve the issue. please follow the below steps:-

step1. Go to src/assets/scss/custom/layouts/ and open _collapse.scss file

step2. Find below code snippet, and replace $mini-sidebar-width with 0.

.rct-header {
          left: $mini-sidebar-width; // replace left : 0;
}

Let us know if it works for you at support@theironnetwork.org

Thanks and have a nice day!

I receive your answer, but it fixed the problem partially.. it solved the issue about the position of top menu with the mini bar… Thanks!

But..

Issue 1:

If you have the minibar mode activated and you cick again sidebartoggle button.. the components stay static and do not respond to max widht of the screen. Please Help-me!

in the other hand.. i need a page with the google map extend .. i means.. i do not want any separation margin between the map and the minibar a topmenu.. could you guide me?

Thanks in advance..

Hi,

Thanks for reaching out!

We checked your issue at our end and resolve the issue.please follow the below steps :-

1. To resolve toggle mini-sidebar issue,

step1. Go to src/assets/scss/custom/layouts/ and open _collapse.scss file

step2. Find below code snippet and comment or remove the it.

.mini-sidebar {
      .side-title {
            display: none;
      }
      // .app-conrainer-wrapper {
      //    left: $mini-sidebar-width !important;
      // }
      ...
      // .rct-header {
      //    left: $mini-sidebar-width;
      // }
}

2. And secondly, if you want google map without separation margin then please check the chat page route implementation, and apply it for google map page .

Let us know if you need anything else.

Thanks and have a nice day!

Hi,

Thanks for reaching out!

1. We updated the documentation, now you can check the documentation to change the theme. https://docs.theironnetwork.org/reactify/changelog/

2. The latest version of reacting is 16.13.1, used in the template, we do update the theme time to time, If new version is coming or have issue or suggestion in current theme .

Let us know if you need anything else at support@theironnetwork.org

Thanks and have a nice day!

Hi,

Thanks for reaching out!

First of all, please make sure you have install npm by using this command:

npm install

and further, In theme files, you may notice that reactify comes with many packages that have the same designs and functionality as in the demo. Please confirm which package are you using, is it:

a)Reactify-redux-saga

b)Reactify-redux-thunk

c)Reactify-laravel

We also provide seed project in Reactify-redux-thunk and Reactify-redux-thunk saga. Please let us know which packages file you are using.

Thanks and have a nice day!

Hi,

Thanks for reaching out!

We already gave RTL-layout for all pages also support signin/register pages , for enable rtl mode you need to follow the steps which is mention in our documentation. https://docs.theironnetwork.org/reactify/different-layouts/ after this you need to Update below code snippet in src/container/RctThemeProvider.js file and check the browser.

// Before if (rtlLayout) { theme.direction = ‘rtl’ } else { theme.direction = ‘ltr’ }

// After

if (rtlLayout) {
      document.getElementsByTagName("html")[0].setAttribute("dir", "rtl")
      document.getElementsByTagName("BODY")[0].classList.add("rtl")
      theme.direction = 'rtl'
} else {
      document.getElementsByTagName("html")[0].setAttribute("dir", "ltr")
      document.getElementsByTagName("BODY")[0].classList.add("ltr")
      theme.direction = 'ltr'
}

Second We don,t use language translation component in signin/rigister pages.And if you want to add language translation in code then you need to follow the below steps:-

1. Go to src/container open SigninFirebase.js page and find class “session-head” and add intlMessage component in h2 tag.

// Before  
Get started with {AppConfig.brandName}

// After  
{<IntlMessages id="sidebar.getStarted" />}{AppConfig.brandName}

At top import the component:- // intl messages import IntlMessages from ‘Util/IntlMessages’;

2. Now you need to add this id “sidebar.getStarted” in all locales files , so go to src/lang/locales and open en_US.js file and add string in it, like below:- module.exports = { ... “sidebar.reports”: “reports”, sidebar.getStarted Started With” }

Do this step in all locales file.

Let us know if you need anything else at support@theironnetwork.org

Thanks and have a nice day!

Thanks. How can I display language switcher in mobile view?

Hi,

Thanks for reaching out!

We already added language switcher for both desktop and mobile view , Please check the below screen shot:- https://tinyurl.com/ya5ecrws in all versions except seed versions.

If you are using seed version, then you have to add Language Provider header widget in header.js file. Please follow the below steps:-

1. Go to src/components/Header and open Header.js file, now find the below code snippet and add language component.

<LanguageProvider /> // added language component
• ...

2. Now Import the component, after that run the app and check the layout in browser its working . // components import SearchForm from ’./SearchForm’; ... import LanguageProvider from ’./LanguageProvider’; // added

Let us know if you need anything else!

Thanks and have a nice day!

Hi,

Thanks for reaching out!

Right now we don’t have test our template with AWS Amplify and Cognito login for react app. So we are unable to help with this, But we do have a link which will help you:

https://blog.logrocket.com/authentication-react-apps-aws-amplify-cognito/

Let us know if you need anything else at support@theironnetwork.org

Thanks and have a nice day!

Hi,

Thanks for reaching out!

You are missing some fonts in your system that is why this has occurred. To install those fonts you have to install the fonts as per as following steps:

1.- Visit the URL below and click on the download button to download the fonts:

https://github.com/lykmapipo/themify-icons/blob/master/fonts/themify.ttf https://github.com/keremciu/font-bundles/blob/master/ttf-files/material.ttf

2.- Install the font on your macOS Font Book.

3.- Now, open our reactify sketch files. You will now able to see all the fonts.

Let us know if you need anything else at support@theironnetwork.org

Thanks and have a nice day!

Hi,

Thanks for reaching out!

You are missing some fonts in your system that is why this has occurred. To install those fonts you have to install the fonts as per as following steps:

1.- Visit the URL below and click on the download button to download the fonts:

https://github.com/lykmapipo/themify-icons/blob/master/fonts/themify.ttf https://github.com/keremciu/font-bundles/blob/master/ttf-files/material.ttf

2.- Install the font on your macOS Font Book.

3.- Now, open our reactify sketch files. You will now able to see all the fonts.

Let us know if you need anything else at support@theironnetwork.org

Thanks and have a nice day!

Hi,

Thanks for reaching out!

First of all, we want to clear that we did not test our theme with electron js framework, so we unable to help for this specific problem but we do have a link which will help you:

https://medium.com/@brockhoff/using-electron-with-react-the-basics-e93f9761f86f

In further, we have tested all the various version which are present in the theme files, all are working fine. Could you please confirm which package are you using so that we can check it again for you.

a)Reactify-redux-saga b)Reactify-redux-thunk c)Reactify-laravel d)We also provide seed project in Reactify-redux-thunk and Reactify-redux-thunk saga.

Let us know if you need anything else at support@theironnetwork.org

Thanks and have a nice day!

Thank you for the revert. I am using Reactify-redux-thunk. It is working in dev mode. But not working in production. I will go through steps mentioned in the given link and revert, if still doesn’t work.

I have used above link. It didn’t work. Then I tried some hit and trial with webpack config and I am able to run the template in Electron along with production build.

Thanks for your support.

Purchase Code: a86e684d-c688-435e-b307-46f343b6bde8 I am able to run the app in dev mode by running “webpack-dev-server—mode development—inline—progress” in one console. And then running “electron .” in another one. But when I package it for production, it gives some errors which I am able to figure out now by making below changes: 1. create electron.js file in public folder and mention in “main” field in package.json 2. Changed resolveApp(dist) to resolveApp(build) in webpack config. 3. Adding build config in package.json, which includes: files parameter having “build” as one of the folders to look for. 4. Updating webpack config for css and js like below: “static/css/[name].[hash:8].css” -> ”./static/css/[name].[hash:8].css” ‘static/js/[name].[hash:8].chunk.js’ -> ’./static/js/[name].[hash:8].chunk.js’

After all above changes, I am able to create exe which is able to access html, js & css entry files. But another error appears: @firebase/app: Warning: This is a browser-targeted Firebase bundle but it appears it is being run in a Node environment. If running in a Node environment, make sure you are using the bundle specified by the “main” field in package.json.

If you are using Webpack, you can specify “main” as the first item in “resolve.mainFields”: https://webpack.js.org/configuration/resolve/#resolvemainfields If using Rollup, use the rollup-plugin-node-resolve plugin and specify “main” as the first item in “mainFields”, e.g. [‘main’, ‘module’]. https://github.com/rollup/rollup-plugin-node-resolve

Please help me fix this issue. Also, let me know if more detail is needed.

I am sorry for asking many at this time. I am in bit of emergency. Can you also tell me how to enable sourceMap to start debugging the template. I want to understand the flow or the application.

Hi, SourceMap issue resolved.

For Electron build, I am able to see template main page in Electron container. But most of the components are not loaded yet. One configuration I used is to change the BrowserRouter to HashRouter. Now the only issue remained is absolute path for all js/css files. I can see below error on Electron console window: file:///C:/static/js/0.bbe20a82.chunk.js. This kind of error is coming for many files including css files. Please help me setup electron pick absolute paths. Or tell me how can I change absolute paths to related paths.

Thanks

Hi,

Thanks for reaching out. Here is a link to our documentation https://docs.theironnetwork.org/reactify/installation/

Thanks!

I am using the seed project. If i copy it from the main files from the reactify-thunk seed project to somewhere else it will throw the error. Also i am using the latest version

Hi,

Thanks for reaching out!

We checked your issue at our end and its working fine. It seems hidden files are missing such as .babelrc. So please make sure you have copied all the project files including the hidden files too.

Let us know if it works for you.

Thanks and have a nice day!

yes i was missing the hidden files. Thank you

Sounds good, Let us now if you need anything else. Thanks!

It’s redux-thunk

It si not getting the asias used in webpack.config.js

resolve: {
  alias: {
    Store: path.resolve(__dirname, "src/store/"),
    Validation: path.resolve(__dirname, "src/validation/"),
    Actions: path.resolve(__dirname, "src/actions/"),
    Components: path.resolve(__dirname, "src/components/"),
    Assets: path.resolve(__dirname, "src/assets/"),
    Util: path.resolve(__dirname, "src/util/"),
    Routes: path.resolve(__dirname, "src/routes/"),
    Constants: path.resolve(__dirname, "src/constants/"),
    Helpers: path.resolve(__dirname, "src/helpers/"),
    Api: path.resolve(__dirname, "src/api/")
  }
},

Here is the full webpack config

// const webpack = require(‘webpack’); const path = require(“path”); const fs = require(“fs”); const FriendlyErrorsWebpackPlugin = require(“friendly-errors-webpack-plugin”); // const BundleAnalyzerPlugin = require(‘webpack-bundle-analyzer’).BundleAnalyzerPlugin;

// Webpack uses `publicPath` to determine where the app is being served from. // In development, we always serve from the root. This makes config easier. const publicPath = ”/”;

// Make sure any symlinks in the project folder are resolved: const appDirectory = fs.realpathSync(process.cwd()); const resolveApp = relativePath => path.resolve(appDirectory, relativePath);

// plugins // const autoprefixer = require(‘autoprefixer’); const HtmlWebPackPlugin = require(“html-webpack-plugin”); const MiniCssExtractPlugin = require(“mini-css-extract-plugin”); const { CleanWebpackPlugin } = require(“clean-webpack-plugin”); // const UglifyJsPlugin = require(“uglifyjs-webpack-plugin”); const TerserPlugin = require(“terser-webpack-plugin”);

module.exports = { entry: [“babel-polyfill”, “react-hot-loader/patch”, ”./src/index.js”], output: { // The build folder. path: resolveApp(“dist”), // Generated JS file names (with nested folders). // There will be one main bundle, and one file per asynchronous chunk. // We don’t currently advertise code splitting but Webpack supports it. filename: “static/js/[name].[hash:8].js”, chunkFilename: “static/js/[name].[hash:8].chunk.js”, // We inferred the “public path” (such as / or /my-project) from homepage. publicPath: publicPath, hotUpdateChunkFilename: “hot/hot-update.js”, hotUpdateMainFilename: “hot/hot-update.json” }, devServer: { contentBase: ”./src/index.js”, host: “0.0.0.0”, compress: true, port: 4000, // port number historyApiFallback: true, quiet: true, proxy: { ”/api”: “http://localhost:5000” } }, // resolve alias (Absolute paths) resolve: { alias: { Store: path.resolve(__dirname, “src/store/”), Validation: path.resolve(__dirname, “src/validation/”), Actions: path.resolve(__dirname, “src/actions/”), Components: path.resolve(__dirname, “src/components/”), Assets: path.resolve(__dirname, “src/assets/”), Util: path.resolve(__dirname, “src/util/”), Routes: path.resolve(__dirname, “src/routes/”), Constants: path.resolve(__dirname, “src/constants/”), Helpers: path.resolve(__dirname, “src/helpers/”), Api: path.resolve(__dirname, “src/api/”) } }, module: { rules: [ { test: /\.(js|jsx)$/, exclude: /node_modules/, use: { loader: “babel-loader” } }, { test: /\.html$/, use: [ { loader: “html-loader”, options: { minimize: true } } ] }, { test: /\.css$/, use: [MiniCssExtractPlugin.loader, “css-loader”] }, { test: /\.(png|jpg|gif)$/, use: [ { loader: “url-loader”, options: { limit: 10000, name: “static/media/[name].[hash:8].[ext]” } } ] }, { test: /\.(woff|woff2|eot|ttf|svg)$/, loader: “url-loader?limit=100000” }, // Scss compiler { test: /\.s[ac]ss$/i, use: [ { loader: “style-loader” // inject CSS to page }, { loader: “css-loader” // translates CSS into CommonJS modules }, { loader: “postcss-loader”, // Run post css actions options: { plugins: function() { // post css plugins, can be exported to postcss.config.js return [require(“precss”), require(“autoprefixer”)]; } } }, { loader: “sass-loader” // compiles Sass to CSS } ] } ] }, optimization: { minimizer: [ new TerserPlugin({ cache: true, parallel: true, sourceMap: true, terserOptions: { compress: false, ecma: 8, mangle: true } }) // new UglifyJsPlugin({ // // Enable file caching // cache: true, // // Use multi-process parallel running to improve the build speed // // Default number of concurrent runs: os.cpus().length – 1 // parallel: true, };

//   uglifyOptions: {
    //     compress: false,
    //     ecma: 8,
    //     mangle: true
    //   },
    //   sourceMap: true
    // })
  ]
},
performance: {
  hints: process.env.NODE_ENV === "production" ? "warning" : false
},
plugins: [
  new FriendlyErrorsWebpackPlugin(),
  new CleanWebpackPlugin({
    dry: false,
    verbose: false
  }),
  new HtmlWebPackPlugin({
    template: "./public/index.html",
    filename: "./index.html",
    favicon: "./public/favicon.ico" 
  }),
  new MiniCssExtractPlugin({
    filename: "[name].css",
    chunkFilename: "static/css/[name].[hash:8].css" 
  })
  // new BundleAnalyzerPlugin()
]

Hi,

Thanks for reaching out!

We checked your issue everything is working fine at our end. Its seems you may have npm cache issue, so you need to clean npm cache with the following command:

npm cache clean—force

and then again hit the `npm install` command. If this still not work after cleaning the cache then please let us know about your npm and node versions.

Let us know if you need anything else at support@theironnetwork.org

Thanks and have a nice day!