Discussion on Reactify - React Redux Material BootStrap 4 + Laravel Admin Template

Discussion on Reactify - React Redux Material BootStrap 4 + Laravel Admin Template

Cart 1,419 sales
Well Documented

IronNetwork does not currently provide support for this item.

405 comments found.

Please help us to setup reactify with .net web application in visual studio 2017

It shows you haven’t purchased the item, can you please verify your purchase code. Thanks!

I need that the child_routes will appear in an additional horizontal menu,

After clicking on the main route.

I tried but the child_routes are done dynamically by the template

Hi,

1.Go to src> components>HorizontalMenu and open NavLinks.js File and edit in your desire menu like we taking the example of category 1:

a)Add child_routes like in shown in code. You have to gave to path like this following.

   category1: [

      {

         “menu_title”: “sidebar.dashboard”,

         “menu_icon”: “zmdi zmdi-view-dashboard”,

         “child_routes”: [

            {

               “path”: ”/app/dashboard/ecommerce”,

               “menu_title”: “sidebar.ecommerce”,

            },

            {

               “path”: ”/horizontal/dashboard/saas”,

               “menu_title”: “sidebar.saas”

            },

            {

               “path”: ”/agency/dashboard/agency”,

               “menu_title”: “sidebar.agency”

            },

            {

               “path”: ”/boxed/dashboard/news”,

               “menu_title”: “sidebar.news”

            }

         ]

      },

2. Now go to src> components>HorizontalMenu and open HorizontalMenu.js File and

paste the code of ul as shown in code. Make sure that you passing right menu into ul like we did in code(category1).

  •    

           

                <IntlMessages id=”sidebar.general” />

       

       

              {navLinks.category1.map((menu, key) => (

                  <NavMenuItem

                  menu={menu}

                  key={key}

              />

              ))}

            

  • You can also check this structure of horizontal menu in our theme files.

    Thanks

    I’m using the seed folder for my application, however when I try to copy the folder from /reactify-redux-saga/src/routes/ecommerce to my seed/src/routes/ecommerce the app is not showing the new component. What do i need to update to display the routes

    I have added seed/src/components/AsyncComponent/AsyncComponent.js // shop const AsyncShopComponent = Loadable({ loader: () => import(“Routes/ecommerce/shop”), loading: () => <RctPageLoader />, });

    Also added seed/src/services/_routerService.js

    {
        path: 'ecommerce',
        component: Ecommerce
    }

    And app/src/components/Sidebar/NavLinks.js

    {
               "menu_title": "sidebar.products",
               "menu_icon": "zmdi zmdi-accounts-list",
               "path": "/app/ecommerce/shop",
               "child_routes": null
           },

    What I’m missing the documentation doesnt explain the flow of adding the route

    Hi,

    We went through all the steps that you mentioned and noticed that you may have missed to create index.js file. Please make sure you have followed all the following steps:

    1)  We added new folder "invoices" in routes.
    2)  We added Four files in invoice folder List.js,View.js,Manage.js and index.js where we define routes for all 
              three pages.               
             check the screenshot :- https://tinyurl.com/yyxrfm2u
          Note- Make sure you created index.js file.
    3)     Third we need to add navlink in sidebar 
        https://tinyurl.com/y26eubr7
    4)     Now we need to add loader for these components in AsyncComponents.js file and export them as 
                mention below :- 
        const AsyncInvoiceListComponent = Loadable({
        loader: () => import(“Routes/invoices/List”),
        loading: () => <RctPageLoader />,
        });
    const AsyncInvoiceViewComponent = Loadable({
    loader: () => import("Routes/invoices/View"),
    loading: () => <RctPageLoader />,
    });
    const AsyncInvoiceManageComponent = Loadable({
    loader: () => import("Routes/invoices/Manage"),
    loading: () => <RctPageLoader />,
    });
    export {
    AsyncInvoiceListComponent,
    AsyncInvoiceViewComponent,
    AsyncInvoiceManageComponent,
    AsyncUserWidgetComponent,
    AsyncUserChartsComponent,
    }
    5) Then Open _routerServices file and import invoices component , as mention below :-
        import Invoices from 'Routes/invoices'; // import invoice module
        export default [
        {
        path: 'invoices',
        component: Invoices
        },
        ]
    6) Now check the layout as mention in screenshot:- https://tinyurl.com/y6eh7z6t

    Please check the path one more time. Let us know if you have other queries.

    Thanks

    Thanks for spending the time on this. But still my pages are blank and not showing up look the screenshot https://www.screencast.com/t/qsnEJGUHfHl6

    1- Also I’ve added the folder as your recomendation and the index.js https://www.screencast.com/t/CgFfFCAr

    2- Added in AsyncComponent.js 3 – const – https://www.screencast.com/t/v79Zi26sj 4- export – https://www.screencast.com/t/ON40DuDgSH 5- _routerService.js https://www.screencast.com/t/zaxWR2AIY

    Also I’ve sent you an email yesterday to support@theironnetwork.org with my full code to your email from “Erick” This has been slowing my development and your help would be appreciated.

    Thanks.

    Hi, We already replied to your email yesterday with all the steps and infact sent you code corrected files as well. Please check your inbox, spam folder and let us know if you need anything else.

    Thanks!

    Hiii!

    My employers really like menus.

    I need that the child_routes will appear in an additional horizontal menu,

    After clicking on the main route.

    I tried but the child_routes are done dynamically by the template.

    Can you please help me?

    Replied on your latest comment. Thanks!

    I started using the theme Reactify. I was reading your documentation, I copied the react saga seed to start building my app, but I run “npm start” and there is an error showed, same error occurs when I run “npm run build”.

    ERROR  Failed to compile with 1 errors                                                                 10:22:47
    error  in ./src/index.js

    Syntax Error: Unexpected token (17:18) > 17 | ReactDOM.render(<MainApp />, rootEl); | ^ 18 | }; 19 | 20 | if (module.hot) {

    15 |   // Dynamically import our main App component, and render it
    16 |   const MainApp = require('./App').default;

    Hi,

    We checked on our end and we didn’t get any issue. We suggest to download the latest files from themeforest and then check once. May be issue is occur due your recently file changes so check your code. Please check your node version and make sure that version is stable or not. To know more go to the nodejs site and check the stable version.

    https://nodejs.org/en/

    and delete node_module folder and package-lock.json file and try to install npm again. it may help you.

    Let us know if it works.

    Thanks

    Hiiiii

    1. I want the first tab on the sidebar(main menu) will be directed to the horizontal menu first route and that horizontal menu first route will be the default website page (instead of ”/app/dashboard/ecommerce” ).

    2. Every time I click on one of the links in the horizontal menu the side menu disappears.

    Hi,

    Note: The question you are asking comes under custom work and hence are not part of support that come with template. You can reach us directly at support@theironnetwork.org for custom work. Here are possible solution to your queries:

    1. First tab on the sidebar(main menu) will be directed to the horizontal menu first route For this issue you have to change the routes in navlink. Like follows :-

    a. Go to src > components > Sidebar > and Open "NavLinks.js" file and see the screenshots for further process:-
         (i)https://tinyurl.com/y4n72asn
    b. Go to src > components > HorizontalMenu > and Open "NavLinks.js" file and see the screenshots for further process:- 
       (i) https://tinyurl.com/y6msh7po
       (ii) https://tinyurl.com/y6dntreh
    Note: If you want to give path to your first page of site then you have to pass the path in path field.
    c. Open HorizontalMenu.js file from src > components > HorizontalMenu and add code in it.      
       (i) https://tinyurl.com/y2fj64wj
    d. Go to src > lang > locales > open this file en_US.js and add data in it as mention in screenshot and do the same process in all locale files for converting the language.
       (i) https://tinyurl.com/y4x862gt

    2. Click on one of the links in the horizontal menu the side menu disappears.

    For this issue you have to change the routes in  navlink file follow the steps here :-
    a. Go to src > components > HorizontalMenu > and Open "NavLinks.js" file and see both screenshots for further process:-
       (i) https://tinyurl.com/y57dvfdd
       (ii) https://tinyurl.com/y572xzhg

    Thanks

    first of all I have a main side menu now, and I would like to generate a new (secondary ) horizontal menu.

    I followed all your steps and then those things happened: *on assets I don’t have a custom folder! horizontal_menu.css is in src > assets >scss> custom > horizontal_menu.css Although it is not in the right place it looks the same so I changed the code and continued.

    c. Open src > assets > custom > horizontal_menu.css and do the changes for show hamburger icon in header
       https://tinyurl.com/y68nos8w

    3.Go to src > assets > scss > custom > rtl_layout and add changes for .form-group class. http://tinyurl.com/y2yrzu2h I found a file named _rtl.scss in src > assets > scss > custom > layout >_rtl.scss

    But the link code is not the same as the code in the file _rtl.scss.

    Thanks

    Hi,

    1. If you are using sidebar layout then do the following steps:

    a). Go to src > components > RctAppLayout and open index file and find following code {this.renderPage()}
    and add horizontal menu like this.
    <HorizontalMenu /> // add this component {this.renderPage()}
    b) Now Import this component to same file in component comment section
    import HorizontalMenu from 'Components/HorizontalMenu/HorizontalMenu';

    By these steps you will integrated both menus.

    If you want that primary menu is your sidebar menu and in horizontal you want to use another menu then this is custom thing. You have to use by your own.

    2. For fixed the select input in rtl .

    a)Go to src > assets > scss > custom > layouts and open _rtl.scss file and add this code snippet at the bottom of the file.
    rtl{
     .form-group{
       #select-age{
         padding-left:32px;
         padding-right:0;
        }
       svg{
         left:0;
         right:inherit;
         }
       }
    }

    Thanks

    On SigninFirebase I changed email to name, And also at AuthActions ( .signInWithEmailAndPassword(user.name, user.password) ) When I press submit it doesn’t continue to the home page, and sends me this notification message: “The email address is badly formatted.”

    Can you help me understand where does it come from and how to use it to my needs?

    Hi,

    Make sure your are using correct email address with correct format. You can also check the following artcile.

    https://stackoverflow.com/questions/39664910/the-email-address-is-badly-formatted-firebase

    We integrated firebase and auth0 with the help of following articles hope this will help you too.

    Firebase:

    https://www.robinwieruch.de/complete-firebase-authentication-react-tutorial/ https://www.zeolearn.com/magazine/react-and-firebase-authentication-using-email-and-password

    For Auth0:

    https://auth0.com/blog/react-tutorial-building-and-securing-your-first-app/

    Thanks

    hii I think I did not explain myself very well, I just want to know where this validation comes from and how to change it for my own needs. I do not need to login with an email address, I need login using a username.

    Thanks

    On my site I need two menus, one side main and one horizontal. Is there such an option on your template? If you do not, you have something like tab sheets?- urgent!!!

    Replied over mail. Thanks!

    hii good morning:)

    I have two other things that bother me:

    1.when i change the layout to RTL, the sidenav scroll bar lookes link regular html scroll bar.

    2.how to edit IntlMessages’s css?

    Hi,

    1. We checked theme at our end and everything seems to be fine on our end. Please specify the page or layout style where you saw the issue. Please also specify your system configuration like system Os, browser name and version etc. It will help us track the issue.

    2. Intl message component used for change language format to another. There are lots of intl message used in theme which is styled by different different types tags and css. Please specify in which section or intlmessage you want to do styling.

    Thanks!

    Hey, how should I update the cms if I already developed on it?

    Hello Author

    I have purchased your theme and setup with laravel now I want to know how to do development with running reactjs in dev mode. Right now I have to run npm run dev every time I make changes to the react files. It should watch files and run automatically but it is not.

    hello my frind! :)

    I succeeded connecting with the server :) And I have a few more questions:

    1. On a small screen the menu does not disappear after clicking the required page. 2. On my site I need two menus, one side main and one horizontal. Is there such an option on your template? If you do not, you have something like tab sheets?- urgent!!!

    3. The select inputs are note RTL responsive.

    Thank you!! or as we say- toda raba:) תודה רבה:)

    Replied over mail. Thanks!

    Hi small thing – your release notes say 2018 – think you mean 2019 :) i.e. 4.2.1 – 2018 – Feb -15

    I do not get your emails!!!!!!!!!!!!!!!!1

    got it!!

    I think I’m going crazy.

    this is the error message from the console:

    GET http://localhost:5000/api/hello net::ERR_CONNECTION_REFUSED

    TypeError: Failed to fetch

    WebSocket connection to ‘wss://s-usc1c-nss-220.firebaseio.com/.ws?v=5&ns=reactify-61b82’ failed: WebSocket is closed before the connection is established.

    where does the WebSocket came from? is this what’s destroys my life????

    Hi, i’m still trying to connect ‘reactify-redux-thunk’ to my server in node.js with express – with no succses:/

    I read your instractions again and again and some things I’d like to go through with you:

    1. on all of the server screenshots you send me e.g. https://drive.google.com/file/d/1ZPkxDJCxfHHFoApVTO2VLde5KPaiOnon/view https://drive.google.com/file/d/13bS9EtWHHno4BXcFq2arfagiFUtpbZ1V/view the url route is ‘api/hello’. the instractions for client side you send me also the same url route: https://drive.google.com/file/d/18WbpuvH6TRinkq2n30w_21VQRhysX5KR/view

    first of all – WHERE exactly do i put this code? (which fill and folder)

    second – you wrote and I quote-

    Navigate to the page where you updated the code.e.g In our case we implement code to hit api url on chat page so our navigation url will be ‘http://localhost:3000/app/chat'. In console you will get your api url response,that will be “express: “Hello From Express”“

    how exactly this url – ‘http://localhost:3000/app/chat' will get the response that we are looking for if all the routes we are trying to get and fetch are ’/api/hello’??

    Although it’s super weird I tried it, and i also tried changing ’/api/hello’ to ’/app/chat’, and i tried ’/horizontal/chat’ (by the way- it’s o.k that my url is ‘http://localhost:3000/horizontal/chat' when i’m in chat page?), and i tried different routes in server.js on different components on the client side- nothing works for me!!!

    the console error: net::ERR_CONNECTION_REFUSED TypeError: Failed to fetch

    PLEASE HELP!!!!

    Well the steps are still the same, we would suggest you share your email with us at support@theironnetwork.org and we will send you the working reactify file.

    Thanks!

    inbalik0987@gmail.com

    It’s kind of strange that you do not have my email, and i’m pretty disappointed because I thought this email was already answering my questions.

    So I would be happy if you could send me as soon as possible. Right now I’m wasting good hours, and this is the last working day this week.

    Replied to you on mail. Thanks!

    hii, i followed your steps:

    1.Upadate code of server.js file as given in the screenshot https://tinyurl.com/yd8bxqta – check.

    2.Run command node server.js in test folder - check.

    3.You server will run on http://localhost:5000 – check. and a opened http://localhost:5000 and ‘Hello from express’ was there.

    4.To hit the url which you create in server.js file e.g.’api/hello’ just follow the method which is given in the screenshot https://tinyurl.com/ybcuxs5b.

    i followed you and in routes\chat\index.js i put the code in the screenshot :

    class ChatList extends Component { componentDidMount(){ this.callApi() .then(res => console.log(“response”, res)) .catch(err => console.log(err)); } callApi = async () => { const response = await fetch(‘http://localhost:5000/horizontal/chat'); const body = await response.json(); if(response.status !== 200) throw Error(body.message); return body +‘errrr’; }. and it’s not working. console message – GET http://localhost:5000/horizontal/chat net::ERR_CONNECTION_REFUSED.

    server.js app.use(express.static(path.join(__dirname, ‘reactify-redux-thunk/dist’)));

    app.get(’/’, (req, res)=> { res.sendFile(path.join(__dirname + ‘reactify-redux-thunk/dist/index.html’)); });

    app.get(’/horizontal/chat’, (req, res)=> { res.send({ express:’Hello from express 2’ }); });

    const port = process.env.PORT || 5000; app.listen(port);

    console.log(‘App is listening on port’ + port);

    please help!!

    Hi,

    You need to update code in server.js file as shown in the screenshot https://tinyurl.com/y5pz7gwq

    Let us know if you need any help further

    Thanks

    this is from inspect->console

    Failed to load resource: the server responded with a status of 404 (Not Found) main.41c4adbb.js:1 WebSocket connection to ‘wss://s-usc1c-nss-220.firebaseio.com/.ws?v=5&ls=nEFNgLEeyLdlp9DzRsFR4kyIHfydKSq3&ns=reactify-61b82’ failed: Error in connection establishment: net::ERR_INTERNET_DISCONNECTED

    replied on your earlier comment. Thanks!

    i forgot to feel the check box!!! please send my an email!!!

    we don’t have your email so cannot send you one.. thanks!

    Hii again ! i did all the steps you send me, and npm start workes from the test folder.

    but this isn’t working – app.get(’/’, (req, res)=> { console.log(‘hiii1’); res.sendFile(path.join(__dirname + ‘reactify-redux-thunk/dist/index.html’)); });

    the console doest show up.

    how is the url route working, what does ’/’ represents?

    Hi,

    For your query regarding app.get() function, app.get() method specify a callback function called when the application receives a request to the specified route (endpoint) and HTTP method.

    To know more about this method please follow this link https://expressjs.com/en/guide/routing.html

    To implement this method in our template, please follow the given steps:

    1.Upadate code of server.js file as given in the screenshot https://tinyurl.com/yd8bxqta 2.Run command node server.js in test folder. 3.You server will run on http://localhost:5000 4.To hit the url which you create in server.js file e.g.’api/hello’ just follow the method which is given in the screenshot https://tinyurl.com/ybcuxs5b. 5.Run command npm start in reactify-redux-thunk. 6.Your app will run on http://localhost:3000. 7.Navigate to the page where you updated the code.e.g In our case we implement code to hit api url on chat page so our navigation url will be ‘http://localhost:3000/app/chat 8.In console you will get your api url response,that will be “express: “Hello From Express”“

    Let us know if you need any help further.

    Thanks

    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