> For the complete documentation index, see [llms.txt](https://iron-network.gitbook.io/reactify/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://iron-network.gitbook.io/reactify/faqs.md).
# FAQ's(Frequently Asked Questions)
## How to completely remove firebase?
To completely remove firebase from the app just follow the steps given below :-
1\. Open the `src` folder and delete the firebase directory from it.
2\. Go to the `src` folder and open `App.js` file and delete the `import './firebase';` statement.
3\. Go to the `src->actions` folder and delete the `AuthActions.js` file and also remove import file statement of this file from the `index.js` file.
4\. Remove Signin and Signup methods from the Signin and Signup pages. To remove them Go to `src->container` and Open `SigninFirebase.js` and `SignupFirebase.js` files.
After removing the actions you also need to remove the signin and signup buttons from the Signin and Signup pages.
5\. Uninstall the firebase dependency. To uninstall the firebase run the command in your project directory.
`npm uninstall --save firebase`
That's It, The above steps will completely remove the firebase from your project.
## Where can I find the fonts and icons?
We have used material design iconic font icons in the template. To get this font icons refer to it's official documentation.
{% embed url="" %}
For fonts, we have used **Heebo** font in the template. We have integrated this font by google fonts. To get this font refer to it's official documentation.
{% embed url="" %}
## How to add link in Product Reports Widget?
Here are the step by step instructions to add link in Product Reports Widget.
1\. Go to `src->components->Widgets` and edit the `ProductReports.js` file.
* Import the Link component from the react-router-dom.
* Add the **component** and to **attribute** in the **IconButton** element.
{% code title="ProductReports.js" %}
```javascript
/**
* Product Report Widget
*/
import React, { Component } from 'react';
...
// import the Link component from the react-router-dom
import { Link } from "react-router-dom";
class ProductReportsWidget extends Component {
...
render() {
const { products } = this.state;
return (
{products && products.map((product, key) => (
...
))}
);
}
}
export default ProductReportsWidget;
```
{% endcode %}
2 . Update the data file. Add the link for each products e.g.,
```javascript
[
{
"id": 1,
"name": "Event Promo",
"photoUrl": "http://reactify.theironnetwork.org/data/images/icon1.png",
"date": "10 Jun - 10 Jul",
"link": "http://reactify.theironnetwork.org/product1"
},
{
"id": 2,
"name": "Toon City",
"photoUrl": "http://reactify.theironnetwork.org/data/images/icon2.png",
"date": "10 Jun - 10 Jul",
"link": "http://reactify.theironnetwork.org/product2"
},
{
"id": 3,
"name": "Chanya Theme",
"photoUrl": "http://reactify.theironnetwork.org/data/images/icon3.png",
"date": "10 Jun - 10 Jul",
"link": "http://reactify.theironnetwork.org/product3"
},
{
"id": 4,
"name": "Gene Theme",
"photoUrl": "http://reactify.theironnetwork.org/data/images/icon4.png",
"date": "10 Jun - 10 Jul",
"link": "http://reactify.theironnetwork.org/product4"
},
{
"id": 5,
"name": "Adminify Theme",
"photoUrl": "http://reactify.theironnetwork.org/data/images/icon5.png",
"date": "10 Jun - 10 Jul",
"link": "http://reactify.theironnetwork.org/product5"
},
{
"id": 6,
"name": "Beast Theme",
"photoUrl": "http://reactify.theironnetwork.org/data/images/icon6.png",
"date": "10 Jun - 10 Jul",
"link": "http://reactify.theironnetwork.org/product6"
}
]
```
## How to use Campaign Performance Widget?
Here are the some instructions to use CampaignPerformance widget:-\
\
There are two variation of the chart i.e., \
\- static or single data.\
\- dynamic chart with animation to show multiple campaign.
**Static or single data**\
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\
\
\- Define the data with the key last5Days note this key will be used as to analyze what data will display on chart as default.
\- Set the default data
\
That's it this will show the last5Days data.
**Dynamic chart with animation to show multiple campaign.**\
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.\
\
1\. Define data for each key of the campaign, we have taken an example of four campaign data as in the screenshot:
2\. - 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.\
\
3\. Update the select list.
## How to build an app from scratch?
You can easily build your app from scratch just follow these steps :
1. Copy the seed project from downloaded themeforest files.
2. Open terminal and go to the seed directory and then run `npm install`.
3. After installing npm then run `npm start`.
4. Open your browser and access [`http://localhost:3000`](http://localhost:3000)
By default seed project contains dashboard page means you can easily build your dashboard.
**If you want to integrate Todo List in you dashboard then you need to follow these steps:-**
1. Open `src/routes/dashboard/index.js`
2. Copy TodoList widget from `reactify/src/components/Widgets/TodoList.js` themeforest downloded file and paste it into under the `your-project-directory-name/src/components/Widgets/` directory.
3. Import TodoList widget from `src/components/TodoList.js`
/**
* Dashboard Page
*/
import React, { Component } from 'react';
import { TodoList } from 'Components/Widgets';
// page title bar
import PageTitleBar from 'Components/PageTitleBar/PageTitleBar';
// localize messages
import IntlMessages from 'Util/IntlMessages';
// collapsible card component use if you want to make todo list collapsible
import RctCollapsibleCard from 'Components/RctCollapsibleCard/RctCollapsibleCard';
class Dashboard extends Component {
render() {
return (
<div className="dashboard-wrapper">
<PageTitleBar title={<IntlMessages id="sidebar.dashboard" />} match={this.props.match} />
<div className="row">
<RctCollapsibleCard
customClasses="to-do-list"
colClasses="col-sm-6 col-md-4 col-lg-4 d-xs-half-block d-xxs-full"
collapsible
reloadable
closeable
fullBlock
>
<ToDoListWidget />
</RctCollapsibleCard>
</div>
</div>
);
}
}
export default Dashboard;
4. Save the file and open your browser you will see your dashboard is ready.
**If you want to integrate User Management page in your app then you need to follow these steps:-**
1. Copy the user management page from `reactify/src/routes/users/user-management` downloaded themeforest files and paste it into under the `your-app-directory/src/routes/` directory.
2. Now you need to define the route in the `your-app-directory/src/services/_routerService.js` file.
## How to integrate reactify components in existing app?
By following these steps you can easily use reactify components in your existing app.
First of all you need to check your app dependencies and also you need to install all reactify dependencies in `package.json`
{% hint style="warning" %}
By following this step your existing styles may be overridden. You need to follow this step carefully.
{% endhint %}
Copy the styles from `reactify/src/assets/scss` and paste where your app style is exist.
If you want to use reactify components see faq **How to build an app from scratch?** skip the five lines and start building your app.
## How to integrate Api's in reactify?
Reactify comes with Api's ready means you can easily integrate api's and connect with the back-end server as well. Follow these steps to integrate api's:-
1. Change your back-end base url under the `reactify/src/api/index.js` file.
## How to use your own data?
You can easily use your own data. Just follow these steps to use your own data.
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.
2. Here we are getting data from backend in `componentDidMount() { }` method.
...
componentDidMount() {
this.getTodo();
}
getTodo() {
this.setState({ sectionReload: true });
axios.get('https://jsonplaceholder.typicode.com/todos') // your api url will be here
.then((response) => {
this.setState({ todoListData: response.data, sectionReload: false });
})
.catch(error => {
console.log(error);
this.setState({ sectionReload: false })
})
}
Some components data are defined in `data.js`e.g. in`src/routes/dashboard/dashboard-v1/data.js` file there are some components data are declared you may also change their data from this file.
## How to change the color on the template ?
Here are step by step instructions to change the color on the template.
**Case1: Change Primary Color:**
In order to change the primary color you need to following steps:
1. Go to `AppConfig` file and then to `themeColors`, simply change the primary value as per your requirement.
2. Go to `src/assets/scss/_bootstrap-override.scss` here you can change the value of ($blue: #722ED1 !default; //Manage Primary color variable.)
//App Background Scale
$blue: #5C6AC4 !default; //Manage Primary Color
$cyan: #47C1BF !default; //Manage Info Color
$green: #50B83C !default; //Manage Success Color
$yellow: #F49342 !default; //Manage Warning Color
$red: #DE3618 !default; //Manage Danger Color
$indigo: #174176 !default;
$teal: #007ACE !default; // Manage Secondary Color
$purple: #6f42c1 !default;
$pink: #FF2B72 !default;
$orange: #EEC200 !default;
Following the above two steps the primary color should be changed to your desired color.
**Case2: Change Theme Color:**
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 `theme-primary`, `theme-warning`, `theme-danger` etc. In case you want to give your own custom class then you can go to `container -> themes` and create your own file. You can follow the same structure as other files present there. In addition to this you need go to `src/assets/scss/custom/themes` and create the necessary sass file.
## How to use typescript(.ts) code in reactify?
Following steps to add typescript in react app :-
**Step 1**. install these modules `npm install --save typescript @types/node @types/react @types/react-d`\
`om @types/jest`
**Step 2**. `npm install --save ts-loader and react-scripts`
**Step 3**. Add some changes in webConfig file as follow below :-
{% code title="webConfig" %}
```jsx
resolve: {
alias: {
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/')
},
extensions: [".ts", ".tsx", ".js"]
},
module: {
rules: [
{
test: /\.tsx?$/,
exclude: /node_modules/,
use: {
loader: "ts-loader"
}
}
]
}
```
{% endcode %}
**Step 4.** Create tsConfig.json file and add this code :-
{% code title="tsConfig.json" %}
```jsx
{
"compilerOptions": {
"module": "commonjs",
"target": "es6",
"noImplicitAny": true,
"removeComments": true,
"preserveConstEnums": true,
"sourceMap": true,
"jsx": "react",
},
"include": [
"./src/**/*"
],
"exclude": [
"node_modules/@types",
"**/*.spec.ts"
]
}
```
{% endcode %}
**Step 5**. Create A component name test.tsx and add this code in file
{% code title="test.tsx" %}
```typescript
import * as React from 'react';
export default class Test extends React.Component {
public render() {
return (
Here is the integration of typescript
);
}
}
```
{% endcode %}
**Step 6**. Import component in another file ,add on blank page component like this:-
{% code title="" %}
```jsx
/**
* Blank Page
*/
import React, { Component } from 'react';
import { Helmet } from "react-helmet";
// page title bar
import PageTitleBar from 'Components/PageTitleBar/PageTitleBar';
// intl messages
import IntlMessages from 'Util/IntlMessages';
import Test from '../../../components/test';
export default class Blank extends Component {
render() {
return (
Blank Page} match={this.props.match} />
);
}
}
```
{% endcode %}
After this you will able to use typescript code.
For more information please checkout the following links:\
\
1\. \
\
2\.
## How to add predefined component?
**Step 1.** Go to `src->components->Sidebar` & open the `NavLinks.js` file and add following
```
{
"menu_title": "sidebar.ecommerce",
"menu_icon": "zmdi zmdi-shopping-cart",
"child_routes": [
{
"path": "/app/ecommerce/shop",
"menu_title": "sidebar.shop"
},
{
"path": "/app/ecommerce/cart",
"menu_title": "sidebar.cart"
},
]
}
```
**Step 2.** Go to `src->components->AsyncComponent->AsyncComponent.js` and add component
```
const AsyncShopComponent = Loadable({
loader: () => import("Routes/ecommerce/shop"),
loading: () => ,
});
export {
AsyncEcommerceDashboardComponent,
...
AsyncShopComponent // export new component
};
```
make sure that you are exporting new component.
**Step 3.** Go to `src->services` and open the `_routerService.js` and import the component in it.
```
import Ecommerce from 'Routes/ecommerce'; // import the component
```
and add component
```
export default [
{
path: 'dashboard',
component: Dashboard
},
{
path: 'ecommerce', // add component
component: Ecommerce
}
]
```
## Why Laraval version does not watch the files and also not loading after files changes.
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.
## How can i use sidebar and horizontal menu at same time.
a). Go to src > components > RctAppLayout and open index file and find following code
```
{this.renderPage()}
```
and add horizontal menu like this.
```
// add this component {this.renderPage()}
```
b) Now import this component to same file in component comment section.
```
import HorizontalMenu from 'Components/HorizontalMenu/HorizontalMenu';
```
c) Go to `src->components->HorizontalMenu` & open the `NavLinks.js` file.
d) Search for the `"path": "/horizontal/...` & just replace the `horizontal` keyword with `app` keyword.
By these steps you will integrated both menus.
## How to integrate Reactify with Laravel?
Whether you need to integrate the laravel in reactify-redux-saga or in reactify-redux-thunk, the steps remains the same.
**Note:** You need to open the reactify, reactify-laravel(package that we provide) and your laravel project.
**Step 1:** Replace the contents of `webpack.mix.js` file of laravel project with the following code snippet:
{% code title="webpack.mix.js" %}
```javascript
const 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.autoload({
'jquery': ['$', 'window.jQuery', 'jQuery'],
})
mix.webpackConfig({
resolve: {
alias: {
'Actions': path.resolve(__dirname, 'resources/js/actions/'),
'Components': path.resolve(__dirname, 'resources/js/components/'),
'Assets': path.resolve(__dirname, 'resources/js/assets/'),
'Util': path.resolve(__dirname, 'resources/js/util/'),
'Routes': path.resolve(__dirname, 'resources/js/routes/'),
'Constants': path.resolve(__dirname, 'resources/js/constants/'),
'Helpers': path.resolve(__dirname, 'resources/js/helpers/'),
'Api': path.resolve(__dirname, 'resources/js/api/')
}
},
output: {
chunkFilename: 'js/chunks/[name].js',
}
});
mix.js('resources/js/index.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
```
{% endcode %}
**Step 2:** Open the reactify-laravel project that we have given to you and copy all the contents of `package.json` file and replace the contents of Laravel's project `package.json`file with the contents copied.
**Step 3:** Create a file `.babelrc` in your project directory (projectName/.babelrc) and put the following code in the file:
{% code title=".babelrc" %}
```
{
"presets": [
"env",
"react",
"stage-2",
["es2016"]
],
"plugins": [
"react-hot-loader/babel",
"babel-plugin-transform-class-properties",
"babel-plugin-syntax-dynamic-import"
]
}
```
{% endcode %}
**Step 4:** In your laravel project, Open the `resources->js` folder and delete the `component` folder and `app.js` file.
**Step 5:** Now go to your reactify project `src` folder and copy all the folders & files and paste it inside your laravel's project `resources->js` folder.
**Step 6:** Now open the `index.js` file from your laravel's project `resources->js` folder and add the line `require('./bootstrap');` after the first 2 lines of the code. Like in the code given below:
{% code title="index.js" %}
```javascript
import React from 'react';
import ReactDOM from 'react-dom';j
require('./bootstrap'); // Added Line
```
{% endcode %}
**Step 7:** Now open the public folder of reactify project(that we have provided to you) and copy the favicon and replace it with the favicon inside your laravel's project public folder.
**Step 8:** Now open the public folder of reactify project again and copy the content of `index.html` file, then open the `resources->views->welcome.blade.php` file of your laravel's project and replace all the contents with the copied content.
**Step 9:** In `welcome.blade.php` file of your laravel's project, you need to update few lines of code. They are:
Replace the line:
```
```
with:
```
```
Now add the given code before the end tag of body.
```
```
**Step 10:** Open the `web.php` file from your laravel's project, `routes` folder and update the code as follows:
```
Route::get('{any}', function () {
return view('welcome');
})->where('any','.*');
```
**Step 11:** Now open terminal and go to your project directory and run the following commands:
```
npm install //To download the dependencies
```
If you want to run the project in development mode, then run this command:
```
npm run dev //compile everything in devlopment mode
```
If you want to run the project in production mode, then run this command:
```
npm run prod //compile everything in production mode
```
In the last, serve your project with the following command:
```
php artisan serve
```
## How to set default layout in your template from any other layout?
### From Horizontal Layout to Default Layout
**Step 1:** Go to `src->container` folder & open the `App.js` file.
**Step 2:** Search for the condition `if (location.pathname === '/')` in the file.
**Step 3:** Now replace the given code:
{% code title="App.js" %}
```javascript
if (location.pathname === '/') {
if (user === null) {
return ();
} else {
return (); }
}
return (
...
```
{% endcode %}
with the code given below:
{% code title="App.js" %}
```javascript
if (location.pathname === '/') {
if (user === null) {
return ();
} else {
return (); // Return statement changed
}
}
return (
...
```
{% endcode %}
### From Agency Layout to Default Layout
**Step 1:** Go to `src->container` folder & open the `App.js` file.
**Step 2:** Search for the condition `if (location.pathname === '/')` in the file.
**Step 3:** Now replace the given code:
{% code title="App.js" %}
```javascript
if (location.pathname === '/') {
if (user === null) {
return ();
} else {
return (); }
}
return (
...
```
{% endcode %}
with the code given below:
{% code title="App.js" %}
```javascript
if (location.pathname === '/') {
if (user === null) {
return ();
} else {
return (); // Return statement changed
}
}
return (
...
```
{% endcode %}
### From Boxed Layout to Default Layout
**Step 1:** Go to `src->container` folder & open the `App.js` file.
**Step 2:** Search for the condition `if (location.pathname === '/')` in the file.
**Step 3:** Now replace the given code:
{% code title="App.js" %}
```javascript
if (location.pathname === '/') {
if (user === null) {
return ();
} else {
return ();
}
}
return (
...
```
{% endcode %}
with the code given below:
{% code title="App.js" %}
```javascript
if (location.pathname === '/') {
if (user === null) {
return ();
} else {
return (); // Return statement changed
}
}
return (
...
```
{% endcode %}
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://iron-network.gitbook.io/reactify/faqs.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.