{"id":332,"date":"2019-10-04T06:25:22","date_gmt":"2019-10-04T06:25:22","guid":{"rendered":"https:\/\/docs.theironnetwork.org\/reactify\/?page_id=332"},"modified":"2020-04-22T06:32:02","modified_gmt":"2020-04-22T06:32:02","slug":"faqsfrequently-asked-questions","status":"publish","type":"page","link":"https:\/\/docs.theironnetwork.org\/reactify\/faqsfrequently-asked-questions\/","title":{"rendered":"FAQ&#8217;s(Frequently Asked Questions)"},"content":{"rendered":"\n<h4 id=\"how-to-completely-remove-firebase\">How to completely remove firebase?<a href=\"#how-to-completely-remove-firebase\"><\/a><\/h4>\n\n\n\n<p>As we provided thunk and saga, so removing firebase is almost the same. Just a little bit different from one another. Please cross-check the following steps:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\"><p>NOTE: If you are using reactjs version of reactify then the given paths for files are ok because you find all the files\/folder inside src directory, but if you are using the laravel version then src would be replaced by resources\/js. You will find all the files\/folder inside resources\/js. For example. see below<\/p><cite>In reactjs<br> src\/components\/Sidebar\/UserBlock.js<br> in Laravel<br> resources\/js\/components\/Sidebar\/UserBlock.js<\/cite><\/blockquote>\n\n\n\n<p>To completely remove firebase from the app just follow the steps given below :-\u200c<\/p>\n\n\n\n<p>1. Open the <code>src<\/code> folder and delete the firebase directory from it.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" width=\"1024\" height=\"200\" src=\"https:\/\/docs.theironnetwork.org\/reactify\/wp-content\/uploads\/sites\/4\/2019\/10\/faq-1024x200.png\" alt=\"\" class=\"wp-image-585\" srcset=\"https:\/\/docs.theironnetwork.org\/reactify\/wp-content\/uploads\/sites\/4\/2019\/10\/faq-1024x200.png 1024w, https:\/\/docs.theironnetwork.org\/reactify\/wp-content\/uploads\/sites\/4\/2019\/10\/faq-300x59.png 300w, https:\/\/docs.theironnetwork.org\/reactify\/wp-content\/uploads\/sites\/4\/2019\/10\/faq-768x150.png 768w, https:\/\/docs.theironnetwork.org\/reactify\/wp-content\/uploads\/sites\/4\/2019\/10\/faq.png 1150w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>2. Go to the <code>src<\/code> folder and open <code>App.js<\/code> file and delete the <code>import '.\/firebase';<\/code> statement.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" width=\"1024\" height=\"523\" src=\"https:\/\/docs.theironnetwork.org\/reactify\/wp-content\/uploads\/sites\/4\/2019\/10\/faq-code-1024x523.png\" alt=\"\" class=\"wp-image-586\" srcset=\"https:\/\/docs.theironnetwork.org\/reactify\/wp-content\/uploads\/sites\/4\/2019\/10\/faq-code-1024x523.png 1024w, https:\/\/docs.theironnetwork.org\/reactify\/wp-content\/uploads\/sites\/4\/2019\/10\/faq-code-300x153.png 300w, https:\/\/docs.theironnetwork.org\/reactify\/wp-content\/uploads\/sites\/4\/2019\/10\/faq-code-768x393.png 768w, https:\/\/docs.theironnetwork.org\/reactify\/wp-content\/uploads\/sites\/4\/2019\/10\/faq-code.png 1172w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>3. Go to the <code>src-&gt;actions<\/code> folder and delete the <code>AuthActions.js<\/code> file and also remove import file statement of this file from the <code>index.js<\/code> file.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" width=\"1024\" height=\"159\" src=\"https:\/\/docs.theironnetwork.org\/reactify\/wp-content\/uploads\/sites\/4\/2019\/10\/faq-code2-1024x159.png\" alt=\"\" class=\"wp-image-587\" srcset=\"https:\/\/docs.theironnetwork.org\/reactify\/wp-content\/uploads\/sites\/4\/2019\/10\/faq-code2-1024x159.png 1024w, https:\/\/docs.theironnetwork.org\/reactify\/wp-content\/uploads\/sites\/4\/2019\/10\/faq-code2-300x47.png 300w, https:\/\/docs.theironnetwork.org\/reactify\/wp-content\/uploads\/sites\/4\/2019\/10\/faq-code2-768x119.png 768w, https:\/\/docs.theironnetwork.org\/reactify\/wp-content\/uploads\/sites\/4\/2019\/10\/faq-code2.png 1153w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" width=\"1024\" height=\"256\" src=\"https:\/\/docs.theironnetwork.org\/reactify\/wp-content\/uploads\/sites\/4\/2019\/10\/faq-code3-1024x256.png\" alt=\"\" class=\"wp-image-588\" srcset=\"https:\/\/docs.theironnetwork.org\/reactify\/wp-content\/uploads\/sites\/4\/2019\/10\/faq-code3-1024x256.png 1024w, https:\/\/docs.theironnetwork.org\/reactify\/wp-content\/uploads\/sites\/4\/2019\/10\/faq-code3-300x75.png 300w, https:\/\/docs.theironnetwork.org\/reactify\/wp-content\/uploads\/sites\/4\/2019\/10\/faq-code3-768x192.png 768w, https:\/\/docs.theironnetwork.org\/reactify\/wp-content\/uploads\/sites\/4\/2019\/10\/faq-code3.png 1182w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>4. Remove Signin and Signup methods from the Signin and Signup pages and session pages. To remove them Go to <code>src->container<\/code> and Open <code>SigninFirebase.js<\/code> and <code>SignupFirebase.js<\/code> files.  <\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" width=\"1024\" height=\"480\" src=\"https:\/\/docs.theironnetwork.org\/reactify\/wp-content\/uploads\/sites\/4\/2019\/10\/faq-code4-1-1024x480.png\" alt=\"\" class=\"wp-image-597\" srcset=\"https:\/\/docs.theironnetwork.org\/reactify\/wp-content\/uploads\/sites\/4\/2019\/10\/faq-code4-1-1024x480.png 1024w, https:\/\/docs.theironnetwork.org\/reactify\/wp-content\/uploads\/sites\/4\/2019\/10\/faq-code4-1-300x141.png 300w, https:\/\/docs.theironnetwork.org\/reactify\/wp-content\/uploads\/sites\/4\/2019\/10\/faq-code4-1-768x360.png 768w, https:\/\/docs.theironnetwork.org\/reactify\/wp-content\/uploads\/sites\/4\/2019\/10\/faq-code4-1.png 1173w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>After removing the actions you also need to remove the signin and signup buttons from the Signin and Signup pages.\u200c<\/p>\n\n\n\n<p>5. Uninstall the firebase dependency. To uninstall the firebase run the command in your project directory.\u200c<\/p>\n\n\n\n<p><code>npm uninstall --save firebase<\/code>\u200c<\/p>\n\n\n\n<p>6. After covering the above steps now Go to <code>src->container<\/code> and Open <code>SigninFirebase.js and SignupFirebase.js <\/code> files and remove actions from the export section as mention below code snippet.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">export default connect(mapStateToProps, {\n \/\/ signinUserInFirebase,\n \/\/ signinUserWithFacebook, remove all the actions from here\n \/\/ signinUserWithGoogle,\n \/\/ signinUserWithGithub,\n \/\/ signinUserWithTwitter\n })(Signin);<\/pre>\n\n\n\n<p>7. Now go  to <code>src->components->Sidebar->UserBlock.js<\/code> and remove firebase logout method:-<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">logoutUserFromFirebase \/\/ remove this method from import export and logoutUser(e) method<\/pre>\n\n\n\n<p>8. Go to <code>src->routes->sessions<\/code> open <code>login->index.js<\/code> and  <code>register->index.js<\/code> and remove the import  and export actions.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">import {\n signupUserInFirebase,\n signinUserWithFacebook,\n signinUserWithGoogle,\n signinUserWithGithub,\n signinUserWithTwitter\n } from 'Actions';\n\nand from export default remove following redux actions\n\n export default connect(mapStateToProps, {\n \/\/ signupUserInFirebase,\n \/\/ signinUserWithFacebook,\n \/\/ signinUserWithGoogle, remove all the actions from here\n \/\/ signinUserWithGithub,\n \/\/ signinUserWithTwitter\n })(SignupFirebase);<\/pre>\n\n\n\n<h5>Reactify Saga versions <\/h5>\n\n\n\n<p>If you are removing firebase from redux-saga version then follow this step otherwise you can ignore this step.<\/p>\n\n\n\n<p>Go to <code>src->sagas<\/code> folder and delete the <code>Auth.js<\/code> file and also remove import file statement of this file from the <code>index.js<\/code> file.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">import authSagas from '.\/Auth'; \/\/Remove the import statement\n \u2026\n export default function* rootSaga(getState) {\n yield all([\n authSagas(), \/\/Remove this function\n \u2026\n ]);\n }<\/pre>\n\n\n\n<blockquote class=\"wp-block-quote\"><p>NOTE: You have to remove events of onClick from the login and signup buttons also remove the events from social icons.<\/p><\/blockquote>\n\n\n\n<p>That&#8217;s It, The above steps will completely remove the firebase from your project.<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h4 id=\"where-can-i-find-the-fonts-and-icons\">Where can I find the fonts and icons?<a href=\"#where-can-i-find-the-fonts-and-icons\"><\/a><\/h4>\n\n\n\n<p>We have used material design iconic font icons in the template. To get this font icons refer to it&#8217;s official documentation.<br><\/p>\n\n\n\n<div class=\"custom-sec-wrap mb-4\">\n<a href=\"http:\/\/zavoloklom.github.io\/material-design-iconic-font\/icons.html\" class=\"link-wrap\">\n<div class=\"content-wrap\">\n<h6>Material Design Iconic Font &#8211; Icons List<\/h6>\n<p style=\"font-weight:400;\">Material Design Iconic Font is a full suite of material design icons (created and maintained by Google) for easy scalable vector graphics on websites.<\/p>\n<small>zavoloklom.github.io<\/small>\n<\/div>\n<\/a>\n<\/div>\n\n\n\n<p>For fonts, we have used <strong>Heebo<\/strong> font in the template. We have integrated this font by google fonts. To get this font refer to it&#8217;s official documentation.<\/p>\n\n\n\n<div class=\"custom-sec-wrap mb-4\">\n<a href=\"https:\/\/fonts.google.com\/specimen\/Heebo\" class=\"link-wrap\">\n<div class=\"content-wrap\">\n<h6>Google Fonts<\/h6>\n<p style=\"font-weight:400;\">Making the web more beautiful, fast, and open through great typography<\/p>\n<small>fonts.google.com<\/small>\n<\/div>\n<div style=\"background-image:url('https:\/\/www.gstatic.com\/images\/icons\/material\/apps\/fonts\/1x\/opengraph_color_1200dp.png');\" class=\"ironthm-img-item\"><\/div>\n<\/a>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h4 id=\"how-to-add-link-in-product-reports-widget\">How to add link in Product Reports Widget?<a href=\"#how-to-add-link-in-product-reports-widget\"><\/a><\/h4>\n\n\n\n<p>Here are the step by step instructions to add link in Product Reports Widget.\u200c<\/p>\n\n\n\n<p>1.  Go to <code>src-&gt;components-&gt;Widgets<\/code> and edit the <code>ProductReports.js<\/code> file. \u200c<\/p>\n\n\n\n<ul><li class=\"\">Import the Link component from the react-router-dom.<\/li><li class=\"\">Add the <strong>component<\/strong> and to <strong>attribute<\/strong> in the <strong>IconButton<\/strong> element.<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-preformatted\">\/**<br> * Product Report Widget<br> *\/<br>import React, { Component } from 'react';<br>...<br>\/\/ import the Link component from the react-router-dom<br>import { Link } from \"react-router-dom\";<br> <br>class ProductReportsWidget extends Component {<br> <br>    ...<br> <br>    render() {<br>        const { products } = this.state;<br>        return (<br>            &lt;Scrollbars className=\"rct-scroll\" autoHeight autoHeightMin={100} autoHeightMax={410} autoHide&gt;<br>                &lt;ul className=\"list-group\"&gt;<br>                    {products &amp;&amp; products.map((product, key) =&gt; (<br>                        &lt;li className=\"list-group-item d-flex justify-content-between border-0\" key={key}&gt;<br>                            ...<br>                            &lt;IconButton<br>                                color=\"primary\"<br>                                className=\"import-report\"<br>                                component={Link} \/\/ add the component props<br>                                to={product.link} \/\/ add the to props to this component<br>                            &gt;<br>                                &lt;i className=\"ti-import\"&gt;&lt;\/i&gt;<br>                            &lt;\/IconButton&gt;<br>                        &lt;\/li&gt;<br>                    ))}<br>                &lt;\/ul&gt;<br>            &lt;\/Scrollbars&gt;<br>        );<br>    }<br>}<br> <br>export default ProductReportsWidget;<\/pre>\n\n\n\n<p>2 .  Update the data file. Add the link for each products e.g.,<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">[\n    {\n        \"id\": 1,\n        \"name\": \"Event Promo\",\n        \"photoUrl\": \"https:\/\/reactify.theironnetwork.org\/data\/images\/icon1.png\",\n        \"date\": \"10 Jun - 10 Jul\",\n        \"link\": \"https:\/\/reactify.theironnetwork.org\/product1\"\n    },\n    {\n        \"id\": 2,\n        \"name\": \"Toon City\",\n        \"photoUrl\": \"https:\/\/reactify.theironnetwork.org\/data\/images\/icon2.png\",\n        \"date\": \"10 Jun - 10 Jul\",\n        \"link\": \"https:\/\/reactify.theironnetwork.org\/product2\"\n    },\n    {\n        \"id\": 3,\n        \"name\": \"Chanya Theme\",\n        \"photoUrl\": \"https:\/\/reactify.theironnetwork.org\/data\/images\/icon3.png\",\n        \"date\": \"10 Jun - 10 Jul\",\n        \"link\": \"https:\/\/reactify.theironnetwork.org\/product3\"\n    },\n    {\n        \"id\": 4,\n        \"name\": \"Gene Theme\",\n        \"photoUrl\": \"https:\/\/reactify.theironnetwork.org\/data\/images\/icon4.png\",\n        \"date\": \"10 Jun - 10 Jul\",\n        \"link\": \"https:\/\/reactify.theironnetwork.org\/product4\"\n    },\n    {\n        \"id\": 5,\n        \"name\": \"Adminify Theme\",\n        \"photoUrl\": \"https:\/\/reactify.theironnetwork.org\/data\/images\/icon5.png\",\n        \"date\": \"10 Jun - 10 Jul\",\n        \"link\": \"https:\/\/reactify.theironnetwork.org\/product5\"\n    },\n    {\n        \"id\": 6,\n        \"name\": \"Beast Theme\",\n        \"photoUrl\": \"https:\/\/reactify.theironnetwork.org\/data\/images\/icon6.png\",\n        \"date\": \"10 Jun - 10 Jul\",\n        \"link\": \"https:\/\/reactify.theironnetwork.org\/product6\"\n    }\n]\n\u200c\n<\/pre>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h4 id=\"how-to-use-campaign-performance-widget\">How to use Campaign Performance Widget?<a href=\"#how-to-use-campaign-performance-widget\"><\/a><\/h4>\n\n\n\n<p>Here are the some instructions to use CampaignPerformance widget:-<\/p>\n\n\n\n<p> There are two variation of the chart i.e.,  <\/p>\n\n\n\n<p>&#8211; static or single data.<\/p>\n\n\n\n<p> &#8211; dynamic chart with animation to show multiple campaign.\u200c<\/p>\n\n\n\n<p><strong>Static or single data<\/strong> In this option chart display only a single campaign data, like if you want to show last 5 days campaign then you need to follow the given below steps <\/p>\n\n\n\n<p>&#8211; Define the data with the key last5Days note this key will be used as to analyze what data will display on chart as default.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" width=\"941\" height=\"452\" src=\"https:\/\/docs.theironnetwork.org\/reactify\/wp-content\/uploads\/sites\/4\/2019\/10\/faq-code5.png\" alt=\"\" class=\"wp-image-605\" srcset=\"https:\/\/docs.theironnetwork.org\/reactify\/wp-content\/uploads\/sites\/4\/2019\/10\/faq-code5.png 941w, https:\/\/docs.theironnetwork.org\/reactify\/wp-content\/uploads\/sites\/4\/2019\/10\/faq-code5-300x144.png 300w, https:\/\/docs.theironnetwork.org\/reactify\/wp-content\/uploads\/sites\/4\/2019\/10\/faq-code5-768x369.png 768w\" sizes=\"(max-width: 941px) 100vw, 941px\" \/><\/figure>\n\n\n\n<p>&#8211; Set the default data<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" width=\"1024\" height=\"441\" src=\"https:\/\/docs.theironnetwork.org\/reactify\/wp-content\/uploads\/sites\/4\/2019\/10\/faq-code6-1024x441.png\" alt=\"\" class=\"wp-image-606\" srcset=\"https:\/\/docs.theironnetwork.org\/reactify\/wp-content\/uploads\/sites\/4\/2019\/10\/faq-code6-1024x441.png 1024w, https:\/\/docs.theironnetwork.org\/reactify\/wp-content\/uploads\/sites\/4\/2019\/10\/faq-code6-300x129.png 300w, https:\/\/docs.theironnetwork.org\/reactify\/wp-content\/uploads\/sites\/4\/2019\/10\/faq-code6-768x331.png 768w, https:\/\/docs.theironnetwork.org\/reactify\/wp-content\/uploads\/sites\/4\/2019\/10\/faq-code6.png 1054w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>That&#8217;s it this will show the last5Days data.\u200c<\/p>\n\n\n\n<p><strong>Dynamic chart with animation to show multiple campaign.<\/strong> In this option chart display the multiple campaigns data randomly with the animation, like in our demo. Follow the given below steps to make dynamic chart. <\/p>\n\n\n\n<p>1. Define data for each key of the campaign, we have taken an example of four campaign data as in the screenshot:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" width=\"950\" height=\"562\" src=\"https:\/\/docs.theironnetwork.org\/reactify\/wp-content\/uploads\/sites\/4\/2019\/10\/faq-code7.png\" alt=\"\" class=\"wp-image-608\" srcset=\"https:\/\/docs.theironnetwork.org\/reactify\/wp-content\/uploads\/sites\/4\/2019\/10\/faq-code7.png 950w, https:\/\/docs.theironnetwork.org\/reactify\/wp-content\/uploads\/sites\/4\/2019\/10\/faq-code7-300x177.png 300w, https:\/\/docs.theironnetwork.org\/reactify\/wp-content\/uploads\/sites\/4\/2019\/10\/faq-code7-768x454.png 768w\" sizes=\"(max-width: 950px) 100vw, 950px\" \/><\/figure>\n\n\n\n<p>2. &#8211; Set the default data as in did in the static or single data. Note the selected data will be depend upon the campaigns data keys. <\/p>\n\n\n\n<p>3. Update the select list.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" width=\"948\" height=\"509\" src=\"https:\/\/docs.theironnetwork.org\/reactify\/wp-content\/uploads\/sites\/4\/2019\/10\/faq-code8.png\" alt=\"\" class=\"wp-image-609\" srcset=\"https:\/\/docs.theironnetwork.org\/reactify\/wp-content\/uploads\/sites\/4\/2019\/10\/faq-code8.png 948w, https:\/\/docs.theironnetwork.org\/reactify\/wp-content\/uploads\/sites\/4\/2019\/10\/faq-code8-300x161.png 300w, https:\/\/docs.theironnetwork.org\/reactify\/wp-content\/uploads\/sites\/4\/2019\/10\/faq-code8-768x412.png 768w\" sizes=\"(max-width: 948px) 100vw, 948px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h4 id=\"how-to-build-an-app-from-scratch\">How to build an app from scratch?<a href=\"#how-to-build-an-app-from-scratch\"><\/a><\/h4>\n\n\n\n<p>You can easily build your app from scratch just follow these steps :\u200c<\/p>\n\n\n\n<ol><li class=\"\">Copy the seed project from downloaded themeforest files.<\/li><li class=\"\">Open terminal and go to the seed directory and then run <code>npm install<\/code>.<\/li><li class=\"\">After installing npm then run <code>npm start<\/code>.<\/li><li class=\"\">Open your browser and access <a href=\"http:\/\/localhost:3000\/\" target=\"_blank\" rel=\"noreferrer noopener\"><code>http:\/\/localhost:3000<\/code><\/a><\/li><\/ol>\n\n\n\n<p>By default seed project contains dashboard page means you can easily build your dashboard.\u200c<\/p>\n\n\n\n<p><strong>If you want to integrate Todo List in you dashboard then you need to follow these steps:-<\/strong>\u200c<\/p>\n\n\n\n<p>1.Open <code>src\/routes\/dashboard\/index.js<\/code><\/p>\n\n\n\n<p>2.Copy TodoList widget from <code>reactify\/src\/components\/Widgets\/TodoList.js<\/code> themeforest downloded file and paste it into under the <code>your-project-directory-name\/src\/components\/Widgets\/<\/code> directory.<\/p>\n\n\n\n<p>3.Import TodoList widget from <code>src\/components\/TodoList.js<\/code><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">\/**<br>* Dashboard Page<br>*\/ <br>import React, { Component } from 'react';<br>import { TodoList } from 'Components\/Widgets';<br> <br>\/\/ page title bar<br>import PageTitleBar from 'Components\/PageTitleBar\/PageTitleBar';<br> <br>\/\/ localize messages<br>import IntlMessages from 'Util\/IntlMessages';<br> <br>\/\/ collapsible card component use if you want to make todo list collapsible<br>import RctCollapsibleCard from 'Components\/RctCollapsibleCard\/RctCollapsibleCard';<br> <br>class Dashboard extends Component {<br>   render() {<br>      return (<br>         &lt;div className=\"dashboard-wrapper\"&gt;<br>            &lt;PageTitleBar title={&lt;IntlMessages id=\"sidebar.dashboard\" \/&gt;} match={this.props.match} \/&gt;<br>            &lt;div className=\"row\"&gt;<br>               &lt;RctCollapsibleCard<br>                  customClasses=\"to-do-list\" <br>                  colClasses=\"col-sm-6 col-md-4 col-lg-4 d-xs-half-block d-xxs-full\"<br>                  collapsible<br>                  reloadable<br>                  closeable<br>                  fullBlock<br>               &gt;<br>                  &lt;ToDoListWidget \/&gt;<br>               &lt;\/RctCollapsibleCard&gt;<br>            &lt;\/div&gt;<br>         &lt;\/div&gt;<br>      );<br>   }<br>}<br> <br>export default Dashboard;<\/pre>\n\n\n\n<p>4. Save the file and open your browser you will see your dashboard is ready.<\/p>\n\n\n\n<p><strong>If you want to integrate User Management page in your app then you need to follow these steps:-<\/strong>\u200c<\/p>\n\n\n\n<p>1.Copy the user management page from<code> reactify\/src\/routes\/users\/user-management<\/code> downloaded themeforest files and paste it into under the <code>your-app-directory\/src\/routes\/<\/code> directory.<\/p>\n\n\n\n<p>2.Now you need to define the route in the <code>your-app-directory\/src\/services\/_routerService.js<\/code> file.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">\/\/ routes<br>import Dashboard from 'Routes\/dashboard';<br>import UserManagement from 'Routes\/user-management';<br> <br>export default [<br>   {<br>       path: 'dashboard',<br>       component: Dashboard<br>   },<br>   {<br>       path: 'user-management',<br>       component: UserManagement<br>   }<br>]<\/pre>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h4 id=\"how-to-integrate-reactify-components-in-existing-app\">How to integrate reactify components in existing app?<a href=\"#how-to-integrate-reactify-components-in-existing-app\"><\/a><\/h4>\n\n\n\n<p>By following these steps you can easily use reactify components in your existing app.\u200c<\/p>\n\n\n\n<p>First of all you need to check your app dependencies and also you need to install all reactify dependencies in <code>package.json<\/code><\/p>\n\n\n\n<blockquote class=\"wp-block-quote\"><p>By following this step your existing styles may be overridden. You need to follow this step carefully.<\/p><\/blockquote>\n\n\n\n<p>Copy the styles from <code>reactify\/src\/assets\/scss<\/code> and paste where your app style is exist.\u200c<\/p>\n\n\n\n<p>If you want to use reactify components see faq <strong>How to build an app from scratch?<\/strong> skip the five lines and start building your app.<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h4 id=\"how-to-integrate-apis-in-reactify\">How to integrate Api&#8217;s in reactify?<a href=\"#how-to-integrate-apis-in-reactify\"><\/a><\/h4>\n\n\n\n<p>Reactify comes with Api&#8217;s ready means you can easily integrate api&#8217;s and connect with the back-end server as well. Follow these steps to integrate api&#8217;s:-\u200c<\/p>\n\n\n\n<p>1.Change your back-end base url under the <code>reactify\/src\/api\/index.js<\/code> file.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">import axios from 'axios';\n \nexport default\n   axios.create({\n      baseURL: 'https:\/\/reactify.theironnetwork.org\/data\/',\n      timeout: 1000\n   });<\/pre>\n\n\n\n<p>2.Here is an example for integrate api&#8217;s. Open <code>reactify\/src\/components\/Widgets\/TodoList.js<\/code> file.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"> <br>...<br>componentDidMount() {<br>   this.getTodo();<br>}<br> <br>getTodo() {<br>   this.setState({ sectionReload: true });<br>   api.get('todo.js')<br>   .then((response) =&gt; {<br>      this.setState({ toDoListData: response.data, sectionReload: false });<br>   })<br>   .catch(error =&gt; {<br>      console.log(error);<br>      this.setState({ toDoListData: null, sectionReload: false });<br>   })<br>}<br>...<\/pre>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h4 id=\"how-to-use-your-own-data\">How to use your own data?<a href=\"#how-to-use-your-own-data\"><\/a><\/h4>\n\n\n\n<p>You can easily use your own data. Just follow these steps to use your own data.\u200c<\/p>\n\n\n\n<p>1.Open your desired component in which you want to use your own data. e.g. we have taken a todo list component example in this case.<\/p>\n\n\n\n<p>2.Here we are getting data from backend in <code>componentDidMount() { } <\/code>method.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">...<br>componentDidMount() {<br>   this.getTodo();<br>}<br> <br>getTodo() {<br>   this.setState({ sectionReload: true });<br>   api.get('todo.js)<br>   .then((response) =&gt; {<br>      this.setState({ todoListData: response.data, sectionReload: false });<br>   })<br>   .catch(error =&gt; {<br>      console.log(error);<br>      this.setState({ sectionReload: false });<br>   })<br>}<\/pre>\n\n\n\n<p>3.You may change here your own api url e.g.,<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">...<br>componentDidMount() {<br>   this.getTodo();<br>}<br> <br>getTodo() {<br>   this.setState({ sectionReload: true });<br>   axios.get('https:\/\/jsonplaceholder.typicode.com\/todos') \/\/ your api url will be here<br>   .then((response) =&gt; {<br>      this.setState({ todoListData: response.data, sectionReload: false });<br>   })<br>   .catch(error =&gt; {<br>      console.log(error);<br>      this.setState({ sectionReload: false })<br>   })<br>}<br><\/pre>\n\n\n\n<p>Some components data are defined in <code>data.js<\/code>e.g. in<code>src\/routes\/dashboard\/dashboard-v1\/data.js<\/code> file there are some components data are declared you may also change their data from this file.\u200c<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h4 id=\"how-to-change-the-color-on-the-template\">How to change the color on the template ?<a href=\"#how-to-change-the-color-on-the-template\"><\/a><\/h4>\n\n\n\n<p>Here are step by step instructions to change the color on the template.\u200c<\/p>\n\n\n\n<p><strong>Case1: Change Primary Color:<\/strong>\u200c<\/p>\n\n\n\n<p>In order to change the primary color you need to following steps:\u200c<\/p>\n\n\n\n<p>1.Go to <code>AppConfig<\/code> file and then to <code>themeColors<\/code>, simply change the primary value as per your requirement.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">\/**\n * App Config File\n *\/\nconst AppConfig = {\n    appLogo: require('Assets\/img\/site-logo.png'),          \/\/ App Logo\n    appUrl: 'https:\/\/reactify.theironnetwork.org',             \/\/ App Url\n    brandName: 'Reactify',                                    \/\/ Brand Name\n    navCollapsed: false,                                      \/\/ Sidebar collapse\n    darkMode: false,                                          \/\/ Dark Mode\n    boxLayout: false,                                         \/\/ Box Layout\n    rtlLayout: false,                                         \/\/ RTL Layout\n    miniSidebar: false,                                       \/\/ Mini Sidebar\n    enableSidebarBackgroundImage: true,                       \/\/ Enable Sidebar Background Image\n    sidebarImage: require('Assets\/img\/sidebar-1.jpg'),     \/\/ Select sidebar image\n    locale: {\n        languageId: 'english',\n        locale: 'en',\n        name: 'English',\n        icon: 'en',\n    },\n    enableUserTour: true,                                      \/\/ Enable \/ Disable User Tour\n    copyRightText: 'Reactify \u00a9 2018 All Rights Reserved.',      \/\/ Copy Right Text\n    \/\/ light theme colors\n    themeColors: {\n        'primary': '#5D92F4',\n        'secondary': '#677080',\n        'success': '#00D014',\n        'danger': '#FF3739',\n        'warning': '#FFB70F',\n        'info': '#00D0BD',\n        'dark': '#464D69',\n        'default': '#FAFAFA',\n        'greyLighten': '#A5A7B2', \n        'grey': '#677080',\n        'white': '#FFFFFF',\n        'purple': '#896BD6',\n        'yellow': '#D46B08'\n    },\n    \/\/ dark theme colors\n    darkThemeColors: {\n        darkBgColor: '#424242'\n    }\n}\n \nexport default AppConfig;<\/pre>\n\n\n\n<p>2.Go to <code>src\/assets\/scss\/_bootstrap-override.scss<\/code> here you can change the value of ($blue: #722ED1 !default; \/\/Manage Primary color variable.)<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">\/\/App Background Scale<br> <br>$blue:             #5C6AC4 !default; \/\/Manage Primary Color<br>$cyan:             #47C1BF !default; \/\/Manage Info Color<br>$green:            #50B83C !default; \/\/Manage Success Color<br>$yellow:           #F49342  !default; \/\/Manage Warning Color<br>$red:              #DE3618 !default; \/\/Manage Danger Color<br> <br>$indigo:           #174176 !default;<br>$teal:             #007ACE !default; \/\/ Manage Secondary Color<br> <br>$purple:           #6f42c1 !default;<br>$pink:             #FF2B72 !default;<br>$orange:           #EEC200 !default;<\/pre>\n\n\n\n<p>Following the above two steps the primary color should be changed to your desired color.\u200c<\/p>\n\n\n\n<p><strong>Case2: Change Theme Color:<\/strong>\u200c<\/p>\n\n\n\n<p>Reactify comes with 6 predefined themes that you can use, you can also see them in action from demo under themeoption on right hand side. Incase you want any one of them, then you simply need to change the class on body to your desired  class for e.g <code>theme-primary<\/code>, <code>theme-warning<\/code>, <code>theme-danger<\/code> etc. In case you want to give your own custom class then you can go to <code>container -&gt; themes<\/code> and create your own file. You can follow the same structure as other files present there. In addition to this you need go to                           <code>src\/assets\/scss\/custom\/themes<\/code> and create the necessary sass file.\u200c<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h4 id=\"how-to-use-typescript-ts-code-in-reactify\">How to use typescript(.ts) code in reactify?<a href=\"#how-to-use-typescript-ts-code-in-reactify\"><\/a><\/h4>\n\n\n\n<p>Following steps to add typescript in react app :-\u200c<\/p>\n\n\n\n<p><strong>Step 1<\/strong>. install these modules <code>npm install --save typescript @types\/node @types\/react @types\/react-dom @types\/jest<\/code>\u200c<\/p>\n\n\n\n<p><strong>Step 2<\/strong>. <code>npm install --save ts-loader and react-scripts<\/code>\u200c<\/p>\n\n\n\n<p><strong>Step 3<\/strong>. Add some changes in webConfig file as follow below :-<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">resolve: {<br>         alias: {<br>            Actions: path.resolve(__dirname, 'src\/actions\/'),<br>            Components: path.resolve(__dirname, 'src\/components\/'),<br>            Assets: path.resolve(__dirname, 'src\/assets\/'),<br>            Util: path.resolve(__dirname, 'src\/util\/'),<br>            Routes: path.resolve(__dirname, 'src\/routes\/'),<br>            Constants: path.resolve(__dirname, 'src\/constants\/'),<br>            Helpers: path.resolve(__dirname, 'src\/helpers\/'),<br>            Api: path.resolve(__dirname, 'src\/api\/')<br>         },<br>         extensions: [\".ts\", \".tsx\", \".js\"]<br>      },<br>      module: {<br>         rules: [<br>            {<br>               test: \/\\.tsx?$\/,<br>               exclude: \/node_modules\/,<br>               use: {<br>                  loader: \"ts-loader\"<br>               }<br>            }<br>         ]   <br>   } <br>\u200c<br><\/pre>\n\n\n\n<p>\u200c<strong>Step 4. <\/strong>Create tsConfig.json file and add this code :-<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">{<br>      \"compilerOptions\": {<br>         \"module\": \"commonjs\",<br>         \"target\": \"es6\",<br>         \"noImplicitAny\": true,<br>         \"removeComments\": true,<br>         \"preserveConstEnums\": true,<br>         \"sourceMap\": true,<br>         \"jsx\": \"react\",<br>      },<br>      \"include\": [<br>         \".\/src\/**\/*\"<br>      ],<br>      \"exclude\": [<br>         \"node_modules\/@types\",<br>         \"**\/*.spec.ts\"<br>      ]<br>   } <\/pre>\n\n\n\n<p><strong>Step 5<\/strong>.  Create A component name test.tsx and add this code in file.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">import * as React from 'react';<br> <br>   export default class Test extends React.Component&lt;any, any&gt; {<br> <br>      public render() {<br>         return (<br>            &lt;h2&gt;<br>               Here is the integration of typescript<br>            &lt;\/h2&gt;<br>         );<br>      }<br>   }  <\/pre>\n\n\n\n<p><strong>Step 6<\/strong>. Import component in another file ,add on blank page component like this:-<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">\/**<br>          * Blank Page<br>          *\/<br>         import React, { Component } from 'react';<br>         import { Helmet } from \"react-helmet\";<br>         \/\/ page title bar<br>         import PageTitleBar from 'Components\/PageTitleBar\/PageTitleBar';<br> <br>         \/\/ intl messages<br>         import IntlMessages from 'Util\/IntlMessages';<br>         import Test from '..\/..\/..\/components\/test';<br> <br>         export default class Blank extends Component {<br>            render() {<br>               return (<br>                  &lt;div className=\"blank-wrapper\"&gt;<br>                     &lt;Helmet&gt;<br>                        &lt;title&gt;Blank Page&lt;\/title&gt;<br>                        &lt;meta name=\"description\" content=\"Reactify Blank Page\" \/&gt;<br>                     &lt;\/Helmet&gt;<br>                     &lt;PageTitleBar title={&lt;IntlMessages id=\"sidebar.blank\" \/&gt;} match={this.props.match} \/&gt;<br>                     &lt;Test \/&gt;<br>                  &lt;\/div&gt;<br>               );<br>            }<br>         }<\/pre>\n\n\n\n<p>After this you will able to use typescript code.\u200c<\/p>\n\n\n\n<p>For more information please checkout the following links: <\/p>\n\n\n\n<p>1. <a rel=\"noreferrer noopener\" href=\"https:\/\/www.typescriptlang.org\/docs\/handbook\/react-&amp;-webpack.html\" target=\"_blank\">https:\/\/www.typescriptlang.org\/docs\/handbook\/react-&amp;-webpack.html<\/a> <\/p>\n\n\n\n<p>2. <a rel=\"noreferrer noopener\" href=\"https:\/\/medium.com\/@justin.pathrose\/configure-react-project-using-typescript-and-webpack-f69faee3e915\" target=\"_blank\">https:\/\/medium.com\/@justin.pathrose\/configure-react-project-using-typescript-and-webpack-f69faee3e915<\/a>\u200b<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h4 id=\"how-to-add-predefined-component\">How to add predefined component?<a href=\"#how-to-add-predefined-component\"><\/a><\/h4>\n\n\n\n<p><strong>Step 1. <\/strong>Go to <code>src-&gt;components-&gt;Sidebar<\/code> &amp; open the <code>NavLinks.js<\/code> file and add following<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">{<br>         \"menu_title\": \"sidebar.ecommerce\",<br>         \"menu_icon\": \"zmdi zmdi-shopping-cart\",<br>         \"child_routes\": [<br>            {<br>               \"path\": \"\/app\/ecommerce\/shop\",<br>               \"menu_title\": \"sidebar.shop\"<br>            },<br>            {<br>               \"path\": \"\/app\/ecommerce\/cart\",<br>               \"menu_title\": \"sidebar.cart\"<br>            },<br>         ]<br>      }<\/pre>\n\n\n\n<p><strong>Step 2. <\/strong>Go to <code>src-&gt;components-&gt;AsyncComponent-&gt;AsyncComponent.js<\/code> and add component<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">const AsyncShopComponent = Loadable({<br>      loader: () =&gt; import(\"Routes\/ecommerce\/shop\"),<br>      loading: () =&gt; &lt;RctPageLoader \/&gt;,<br>   });<br> <br>   export {<br>      AsyncEcommerceDashboardComponent,<br>      ...<br>      AsyncShopComponent  \/\/ export new component <br>   };<\/pre>\n\n\n\n<p>make sure that you are exporting new component.\u200c<\/p>\n\n\n\n<p><strong>Step 3.<\/strong> Go to <code>src-&gt;services<\/code> and open the <code>_routerService.js<\/code> and import the component in it.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">   import Ecommerce from 'Routes\/ecommerce'; \/\/ import the component<\/pre>\n\n\n\n<p>and add component <\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">     export default [<br>      {<br>         path: 'dashboard',<br>         component: Dashboard<br>      },<br>      {<br>         path: 'ecommerce',     \/\/ add component<br>         component: Ecommerce<br>      }<br>   ]<\/pre>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h4 id=\"why-laraval-version-does-not-watch-the-files-and-also-not-loading-after-files-changes\">Why Laraval version does not watch the files and also not loading after files changes.<a href=\"#why-laraval-version-does-not-watch-the-files-and-also-not-loading-after-files-changes\"><\/a>\u200c<\/h4>\n\n\n\n<p>In react other versions , changes automatically reflect by reloading the browser but in laraval Each time when you made changes in the project files then you need to execute npm run dev command. It will compiles the all project files and bundled into a single or chunks files. If you not execute the npm run dev command the changes will not reflect.<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h4 id=\"how-can-i-use-sidebar-and-horizontal-menu-at-same-time\">How can i use sidebar and horizontal menu at same time.<a href=\"#how-can-i-use-sidebar-and-horizontal-menu-at-same-time\"><\/a><\/h4>\n\n\n\n<p>a). Go to src &gt; components &gt; RctAppLayout and open index file and find following code <\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">{this.renderPage()}<\/pre>\n\n\n\n<p>and add horizontal menu like this.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"> &lt;HorizontalMenu \/&gt; \/\/ add this component {this.renderPage()}<\/pre>\n\n\n\n<p>b) Now import this component to same file in component comment section.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">import HorizontalMenu from 'Components\/HorizontalMenu\/HorizontalMenu';<\/pre>\n\n\n\n<p>c) Go to <code>src-&gt;components-&gt;HorizontalMenu<\/code> &amp; open the <code>NavLinks.js<\/code> file.\u200c<\/p>\n\n\n\n<p>d)  Search for the <code>\"path\": \"\/horizontal\/...<\/code> &amp; just replace the <code>horizontal<\/code> keyword with <code>app<\/code> keyword.\u200c<\/p>\n\n\n\n<p>By these steps you will integrated both menus.\u200c<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h4 id=\"how-to-integrate-reactify-with-laravel\">How to integrate Reactify with Laravel?<a href=\"#how-to-integrate-reactify-with-laravel\"><\/a><\/h4>\n\n\n\n<p>Whether you need to integrate the laravel in reactify-redux-saga or in reactify-redux-thunk, the steps remains the same.\u200c<\/p>\n\n\n\n<p><strong>Note:<\/strong> You need to open the reactify, reactify-laravel(package that we provide) and your laravel project.\u200c<\/p>\n\n\n\n<p><strong>Step 1: <\/strong>Replace the contents of <code>webpack.mix.js<\/code> file of laravel project with the following code snippet:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">const mix = require('laravel-mix');<br> <br>\/*<br> |--------------------------------------------------------------------------<br> | Mix Asset Management<br> |--------------------------------------------------------------------------<br> |<br> | Mix provides a clean, fluent API for defining some Webpack build steps<br> | for your Laravel application. By default, we are compiling the Sass<br> | file for the application as well as bundling up all the JS files.<br> |<br> *\/<br>mix.autoload({<br>    'jquery': ['$', 'window.jQuery', 'jQuery'],<br>})<br> <br> mix.webpackConfig({<br>    resolve: {<br>        alias: {<br>            'Actions': path.resolve(__dirname, 'resources\/js\/actions\/'),<br>            'Components': path.resolve(__dirname, 'resources\/js\/components\/'),<br>            'Assets': path.resolve(__dirname, 'resources\/js\/assets\/'),<br>            'Util': path.resolve(__dirname, 'resources\/js\/util\/'),<br>            'Routes': path.resolve(__dirname, 'resources\/js\/routes\/'),<br>            'Constants': path.resolve(__dirname, 'resources\/js\/constants\/'),<br>            'Helpers': path.resolve(__dirname, 'resources\/js\/helpers\/'),<br>            'Api': path.resolve(__dirname, 'resources\/js\/api\/')<br>        }<br>    },<br>    output: {<br>        chunkFilename: 'js\/chunks\/[name].js',<br>    }<br>}); <br> <br>mix.js('resources\/js\/index.js', 'public\/js')<br>   .sass('resources\/sass\/app.scss', 'public\/css');<\/pre>\n\n\n\n<p><strong>Step 2:<\/strong> Open the reactify-laravel project that we have given to you and copy all the contents of <code>package.json<\/code> file and replace the contents of Laravel&#8217;s project <code>package.json<\/code>file with the contents copied.\u200c<\/p>\n\n\n\n<p><strong>Step 3: <\/strong>Create a file <code>.babelrc<\/code> in your project directory (projectName\/.babelrc) and put the following code in the file:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">{<br>    \"presets\": [<br>        \"env\",<br>        \"react\",<br>        \"stage-2\",<br>        [\"es2016\"]<br>    ],<br>    \"plugins\": [<br>        \"react-hot-loader\/babel\",<br>        \"babel-plugin-transform-class-properties\",<br>        \"babel-plugin-syntax-dynamic-import\"<br>    ]<br>}<\/pre>\n\n\n\n<p><strong>Step 4: <\/strong>In your laravel project, Open the <code>resources-&gt;js<\/code> folder and delete the <code>component<\/code> folder and <code>app.js<\/code> file.\u200c<\/p>\n\n\n\n<p><strong>Step 5: <\/strong>Now go to your reactify project <code>src<\/code> folder and copy all the folders &amp; files and paste it inside your laravel&#8217;s project <code>resources-&gt;js<\/code> folder.\u200c<\/p>\n\n\n\n<p><strong>Step 6: <\/strong>Now open the <code>index.js<\/code> file from your laravel&#8217;s project <code>resources-&gt;js<\/code> folder and add the line <code>require('.\/bootstrap');<\/code> after the first 2 lines of the code. Like in the code given below:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">import React from 'react';<br>import ReactDOM from 'react-dom';j<br>require('.\/bootstrap');  \/\/ Added Line<\/pre>\n\n\n\n<p><strong>Step 7: <\/strong>Now open the public folder of reactifyproject(that we have provided to you) and copy the favicon and replace it with the favicon inside your laravel&#8217;s project public folder.\u200c<\/p>\n\n\n\n<p><strong>Step 8: <\/strong>Now open the public folder of reactifyproject again and copy the content of <code>index.html<\/code> file, then open the <code>resources-&gt;views-&gt;welcome.blade.php<\/code> file of your laravel&#8217;s project and replace all the contents with the copied content.\u200c<\/p>\n\n\n\n<p><strong>Step 9: <\/strong>In <code>welcome.blade.php<\/code> file of your laravel&#8217;s project, you need to update few lines of code. They are:\u200c<\/p>\n\n\n\n<p>Replace the line:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;link rel=\"shortcut icon\" href=\"favicon.ico\"&gt;\u200c<\/pre>\n\n\n\n<p>with:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;link rel=\"shortcut icon\" href=\"{{asset('favicon.ico')}}\"&gt;<\/pre>\n\n\n\n<p>Now add the given code before the end tag of body.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;script type=\"text\/javascript\" src=\"{{asset('js\/index.js')}}\"&gt;&lt;\/script&gt;<\/pre>\n\n\n\n<p><strong>Step 10: <\/strong>Open the <code>web.php<\/code> file from your laravel&#8217;s project, <code>routes<\/code> folder and update the code as follows:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">Route::get('{any}', function () {<br>    return view('welcome');<br>})-&gt;where('any','.*');<br>\u200c<br><\/pre>\n\n\n\n<p><strong>Step 11: <\/strong>Now open terminal and go to your project directory and run the following commands:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">npm install \/\/To download the dependencies\u200c<\/pre>\n\n\n\n<p>If you want to run the project in development mode, then run this command:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">npm run dev \/\/compile everything in devlopment mode<\/pre>\n\n\n\n<p>If you want to run the project in production mode, then run this command:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">npm run prod \/\/compile everything in production mode<\/pre>\n\n\n\n<p>In the last, serve your project with the following command:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">php artisan serve<br><br><\/pre>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h4 id=\"how-to-set-default-layout-in-your-template-from-any-other-layout\">How to set default layout in your template from any other layout?<a href=\"#how-to-set-default-layout-in-your-template-from-any-other-layout\"><\/a><\/h4>\n\n\n\n<h6 id=\"from-horizontal-layout-to-default-layout\">From Horizontal Layout to Default Layout<a href=\"#from-horizontal-layout-to-default-layout\"><\/a><\/h6>\n\n\n\n<p><strong>Step 1: <\/strong>Go to <code>src-&gt;container<\/code> folder &amp; open the <code>App.js<\/code> file.\u200c<\/p>\n\n\n\n<p><strong>Step 2:<\/strong> Search for the condition <code>if (location.pathname === '\/')<\/code> in the file.\u200c<\/p>\n\n\n\n<p><strong>Step 3:<\/strong> Now replace the given code:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">if (location.pathname === '\/') {<br>  if (user === null) {<br>      return (&lt;Redirect to={'\/signin'} \/&gt;);<br>  } else {<br>      return (&lt;Redirect to={'\/horizontal\/dashboard\/saas'} \/&gt;);  }<br>  }<br>  return (<br>      &lt;RctThemeProvider&gt;<br>                &lt;NotificationContainer \/&gt;<br>                &lt;InitialPath<br>                   path={`${match.url}horizontal`}<br>                   authUser={user}<br>                   component={HorizontalLayout}<br>                \/&gt;<br>                ...<\/pre>\n\n\n\n<p>with the code given below:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">if (location.pathname === '\/') {<br>    if (user === null) {<br>       return (&lt;Redirect to={'\/signin'} \/&gt;);<br>    } else {<br>       return (&lt;Redirect to={'\/app\/dashboard\/ecommerce'} \/&gt;); \/\/ Return statement changed<br>    }<br>  }<br>  return (<br>      &lt;RctThemeProvider&gt;<br>             &lt;NotificationContainer \/&gt;<br>             &lt;InitialPath<br>                path={`${match.url}app`} \/\/ Path url changed<br>                authUser={user}<br>                component={RctDefaultLayout} \/\/ Component changed<br>             \/&gt;<br>           ...<\/pre>\n\n\n\n<h6 id=\"from-agency-layout-to-default-layout\">From Agency Layout to Default Layout<a href=\"#from-agency-layout-to-default-layout\"><\/a><\/h6>\n\n\n\n<p><strong>Step 1: <\/strong>Go to <code>src-&gt;container<\/code> folder &amp; open the <code>App.js<\/code> file.\u200c<\/p>\n\n\n\n<p><strong>Step 2:<\/strong> Search for the condition <code>if (location.pathname === '\/')<\/code> in the file.\u200c<\/p>\n\n\n\n<p><strong>Step 3:<\/strong> Now replace the given code:App.js<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">if (location.pathname === '\/') {<br>    if (user === null) {<br>         return (&lt;Redirect to={'\/signin'} \/&gt;);<br>    } else {<br>         return (&lt;Redirect to={'\/agency\/dashboard\/agency'} \/&gt;);  }<br>    }<br>    return (<br>        &lt;RctThemeProvider&gt;<br>               &lt;NotificationContainer \/&gt;<br>               &lt;InitialPath<br>                   path={`${match.url}agency`} <br>                   authUser={user}<br>                   component={AgencyLayout} <br>               \/&gt;<br>               ...<\/pre>\n\n\n\n<p>with the code given below:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">if (location.pathname === '\/') {<br>     if (user === null) {<br>         return (&lt;Redirect to={'\/signin'} \/&gt;);<br>     } else {<br>         return (&lt;Redirect to={'\/app\/dashboard\/ecommerce'} \/&gt;); \/\/ Return statement changed<br>     }<br>    }<br>    return (<br>         &lt;RctThemeProvider&gt;<br>                 &lt;NotificationContainer \/&gt;<br>                 &lt;InitialPath<br>                     path={`${match.url}app`} \/\/ Path url changed<br>                     authUser={user}<br>                     component={RctDefaultLayout} \/\/ Component changed<br>                 \/&gt;<br>               ...<br>\u200c<br><\/pre>\n\n\n\n<h6 id=\"from-boxed-layout-to-default-layout\">From Boxed Layout to Default Layout<a href=\"#from-boxed-layout-to-default-layout\"><\/a><\/h6>\n\n\n\n<p><strong>Step 1: <\/strong>Go to <code>src-&gt;container<\/code> folder &amp; open the <code>App.js<\/code> file.\u200c<\/p>\n\n\n\n<p><strong>Step 2:<\/strong> Search for the condition <code>if (location.pathname === '\/')<\/code> in the file.\u200c<\/p>\n\n\n\n<p><strong>Step 3:<\/strong> Now replace the given code:App.js<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">if (location.pathname === '\/') {<br>    if (user === null) {<br>         return (&lt;Redirect to={'\/signin'} \/&gt;);<br>    } else {<br>         return (&lt;Redirect to={'\/boxed\/dashboard\/news'} \/&gt;); <br>    }<br>   }<br>   return (<br>      &lt;RctThemeProvider&gt;<br>              &lt;NotificationContainer \/&gt;<br>              &lt;InitialPath<br>                  path={`${match.url}boxed`} <br>                  authUser={user}<br>                  component={RctBoxedLayout} <br>              \/&gt;<br>            ...<br>\u200c<br><\/pre>\n\n\n\n<p>with the code given below:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">if (location.pathname === '\/') {<br>    if (user === null) {<br>        return (&lt;Redirect to={'\/signin'} \/&gt;);<br>    } else {<br>        return (&lt;Redirect to={'\/app\/dashboard\/ecommerce'} \/&gt;); \/\/ Return statement changed<br>    }<br>   }<br>   return (<br>      &lt;RctThemeProvider&gt;<br>              &lt;NotificationContainer \/&gt;<br>              &lt;InitialPath<br>                  path={`${match.url}app`} \/\/ Path url changed<br>                  authUser={user}<br>                  component={RctDefaultLayout} \/\/ Component changed<br>              \/&gt;<br>            ...<br><br><\/pre>\n<div class=\"pld-like-dislike-wrap pld-template-1\">\n    <div class=\"pld-like-wrap  pld-common-wrap\">\n    <a href=\"javascript:void(0);\" class=\"pld-like-trigger pld-like-dislike-trigger \" title=\"\" data-post-id=\"332\" data-trigger-type=\"like\" data-restriction=\"cookie\" data-ip-check=\"0\" data-user-check=\"1\">\n                        <i class=\"fas fa-thumbs-up\"><\/i>\n                    <\/a>\n    <span class=\"pld-like-count-wrap pld-count-wrap\">2    <\/span>\n<\/div><div class=\"pld-dislike-wrap  pld-common-wrap\">\n    <a href=\"javascript:void(0);\" class=\"pld-dislike-trigger pld-like-dislike-trigger \" title=\"\" data-post-id=\"332\" data-trigger-type=\"dislike\" data-ip-check=\"0\" data-restriction=\"cookie\" data-user-check=\"1\">\n                        <i class=\"fas fa-thumbs-down\"><\/i>\n                    <\/a>\n    <span class=\"pld-dislike-count-wrap pld-count-wrap\"><\/span>\n<\/div><\/div>\n\n","protected":false},"excerpt":{"rendered":"<p>How to completely remove firebase? As we provided thunk and saga, so removing firebase is almost the same. Just a little bit different from one another. Please cross-check the following steps: NOTE: If you are using reactjs version of reactify then the given paths for files are ok because you find all the files\/folder inside [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":42,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/docs.theironnetwork.org\/reactify\/wp-json\/wp\/v2\/pages\/332"}],"collection":[{"href":"https:\/\/docs.theironnetwork.org\/reactify\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/docs.theironnetwork.org\/reactify\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/docs.theironnetwork.org\/reactify\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.theironnetwork.org\/reactify\/wp-json\/wp\/v2\/comments?post=332"}],"version-history":[{"count":31,"href":"https:\/\/docs.theironnetwork.org\/reactify\/wp-json\/wp\/v2\/pages\/332\/revisions"}],"predecessor-version":[{"id":741,"href":"https:\/\/docs.theironnetwork.org\/reactify\/wp-json\/wp\/v2\/pages\/332\/revisions\/741"}],"wp:attachment":[{"href":"https:\/\/docs.theironnetwork.org\/reactify\/wp-json\/wp\/v2\/media?parent=332"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}