FAQ's(Frequently Asked Questions)

PreviousInstallation Reactify Laravel NextCredits

Last updated 5 years ago

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.

Material Design Iconic Font - Icons ListGitHub

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.

Google FontsGoogle Fonts

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.

ProductReports.js

/**
 * 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 (
            <Scrollbars className="rct-scroll" autoHeight autoHeightMin={100} autoHeightMax={410} autoHide>
                <ul className="list-group">
                    {products && products.map((product, key) => (
                        <li className="list-group-item d-flex justify-content-between border-0" key={key}>
                            ...
                            <IconButton
                                color="primary"
                                className="import-report"
                                component={Link} // add the component props
                                to={product.link} // add the to props to this component
                            >
                                <i className="ti-import"></i>
                            </IconButton>
                        </li>
                    ))}
                </ul>
            </Scrollbars>
        );
    }
}

export default ProductReportsWidget;

2 . Update the data file. Add the link for each products e.g.,

[
    {
        "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"
    }
]

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 :

Copy the seed project from downloaded themeforest files.
Open terminal and go to the seed directory and then run npm install.
After installing npm then run npm start.
Open your browser and access 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:-

Open src/routes/dashboard/index.js
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.

Import TodoList widget from src/components/TodoList.js

index.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;

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:-

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.

Now you need to define the route in the your-app-directory/src/services/_routerService.js file.

index.js

// routes
import Dashboard from 'Routes/dashboard';
import UserManagement from 'Routes/user-management';

export default [
	{
		path: 'dashboard',
		component: Dashboard
	},
	{
		path: 'user-management',
		component: UserManagement
	}
]

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

By following this step your existing styles may be overridden. You need to follow this step carefully.

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:-

Change your back-end base url under the reactify/src/api/index.js file.

index.js

import axios from 'axios';

export default
   axios.create({
      baseURL: 'http://reactify.theironnetwork.org/data/',
      timeout: 1000
   });

Here is an example for integrate api's. Open reactify/src/components/Widgets/TodoList.js file.

TodoList.js


...
componentDidMount() {
   this.getTodo();
}

getTodo() {
   this.setState({ sectionReload: true });
   api.get('todo.js')
   .then((response) => {
      this.setState({ toDoListData: response.data, sectionReload: false });
   })
   .catch(error => {
      console.log(error);
      this.setState({ toDoListData: null, sectionReload: false });
   })
}
...

How to use your own data?

You can easily use your own data. Just follow these steps to use your own data.

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.

Here we are getting data from backend in componentDidMount() { } method.

TodoList.js


...
componentDidMount() {
   this.getTodo();
}

getTodo() {
   this.setState({ sectionReload: true });
   api.get('todo.js)
   .then((response) => {
      this.setState({ todoListData: response.data, sectionReload: false });
   })
   .catch(error => {
      console.log(error);
      this.setState({ sectionReload: false });
   })
}

You may change here your own api url e.g.,

TodoList.js

...
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.jse.g. insrc/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:

Go to AppConfig file and then to themeColors, simply change the primary value as per your requirement.

AppConfig.js

/**
 * App Config File
 */
const AppConfig = {
    appLogo: require('Assets/img/site-logo.png'),          // App Logo
    appUrl: 'http://reactify.theironnetwork.org',             // App Url
    brandName: 'Reactify',                                    // Brand Name
    navCollapsed: false,                                      // Sidebar collapse
    darkMode: false,                                          // Dark Mode
    boxLayout: false,                                         // Box Layout
    rtlLayout: false,                                         // RTL Layout
    miniSidebar: false,                                       // Mini Sidebar
    enableSidebarBackgroundImage: true,                       // Enable Sidebar Background Image
    sidebarImage: require('Assets/img/sidebar-1.jpg'),     // Select sidebar image
    locale: {
        languageId: 'english',
        locale: 'en',
        name: 'English',
        icon: 'en',
    },
    enableUserTour: true,                                      // Enable / Disable User Tour
    copyRightText: 'Reactify © 2018 All Rights Reserved.',      // Copy Right Text
    // light theme colors
    themeColors: {
        'primary': '#5D92F4',
        'secondary': '#677080',
        'success': '#00D014',
        'danger': '#FF3739',
        'warning': '#FFB70F',
        'info': '#00D0BD',
        'dark': '#464D69',
        'default': '#FAFAFA',
        'greyLighten': '#A5A7B2', 
        'grey': '#677080',
        'white': '#FFFFFF',
        'purple': '#896BD6',
        'yellow': '#D46B08'
    },
    // dark theme colors
    darkThemeColors: {
        darkBgColor: '#424242'
    }
}

export default AppConfig;

Go to src/assets/scss/_bootstrap-override.scss here you can change the value of ($blue: #722ED1 !default; //Manage Primary color variable.)

_bootstrap-override.scss

//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 :-

webConfig

   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"
               }
            }
         ]   
   }

Step 4. Create tsConfig.json file and add this code :-

tsConfig.json

   {
      "compilerOptions": {
         "module": "commonjs",
         "target": "es6",
         "noImplicitAny": true,
         "removeComments": true,
         "preserveConstEnums": true,
         "sourceMap": true,
         "jsx": "react",
      },
      "include": [
         "./src/**/*"
      ],
      "exclude": [
         "node_modules/@types",
         "**/*.spec.ts"
      ]
   }

Step 5. Create A component name test.tsx and add this code in file

test.tsx

   import * as React from 'react';

   export default class Test extends React.Component<any, any> {

      public render() {
         return (
            <h2>
               Here is the integration of typescript
            </h2>
         );
      }
   }

Step 6. Import component in another file ,add on blank page component like this:-

     /**
          * 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 (
                  <div className="blank-wrapper">
                     <Helmet>
                        <title>Blank Page</title>
                        <meta name="description" content="Reactify Blank Page" />
                     </Helmet>
                     <PageTitleBar title={<IntlMessages id="sidebar.blank" />} match={this.props.match} />
                     <Test />
                  </div>
               );
            }
         }

After this you will able to use typescript code.

For more information please checkout the following links: 1. https://www.typescriptlang.org/docs/handbook/react-&-webpack.html 2. https://medium.com/@justin.pathrose/configure-react-project-using-typescript-and-webpack-f69faee3e915

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: () => <RctPageLoader />,
   });

   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.

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';

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:

webpack.mix.js

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');

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.jsonfile with the contents copied.

Step 3: Create a file .babelrc in your project directory (projectName/.babelrc) and put the following code in the file:

.babelrc

{
    "presets": [
        "env",
        "react",
        "stage-2",
        ["es2016"]
    ],
    "plugins": [
        "react-hot-loader/babel",
        "babel-plugin-transform-class-properties",
        "babel-plugin-syntax-dynamic-import"
    ]
}

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:

index.js

import React from 'react';
import ReactDOM from 'react-dom';j
require('./bootstrap');  // Added Line

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:

<link rel="shortcut icon" href="favicon.ico">

with:

<link rel="shortcut icon" href="{{asset('favicon.ico')}}">

Now add the given code before the end tag of body.

<script type="text/javascript" src="{{asset('js/index.js')}}"></script>

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:

App.js

if (location.pathname === '/') {
			if (user === null) {
				return (<Redirect to={'/signin'} />);
			} else {
				return (<Redirect to={'/horizontal/dashboard/saas'} />); 			}
		}
		return (
			<RctThemeProvider>
				<NotificationContainer />
				<InitialPath
					path={`${match.url}horizontal`}
					authUser={user}
					component={HorizontalLayout}
				/>
				...

with the code given below:

App.js

if (location.pathname === '/') {
			if (user === null) {
				return (<Redirect to={'/signin'} />);
			} else {
				return (<Redirect to={'/app/dashboard/ecommerce'} />); // Return statement changed
			}
		}
		return (
			<RctThemeProvider>
				<NotificationContainer />
				<InitialPath
					path={`${match.url}app`} // Path url changed
					authUser={user}
					component={RctDefaultLayout} // Component changed
				/>
				...

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:

App.js

if (location.pathname === '/') {
			if (user === null) {
				return (<Redirect to={'/signin'} />);
			} else {
				return (<Redirect to={'/agency/dashboard/agency'} />); 			}
		}
		return (
			<RctThemeProvider>
				<NotificationContainer />
				<InitialPath
					path={`${match.url}agency`} 
					authUser={user}
					component={AgencyLayout} 
				/>
				...

with the code given below:

App.js

if (location.pathname === '/') {
			if (user === null) {
				return (<Redirect to={'/signin'} />);
			} else {
				return (<Redirect to={'/app/dashboard/ecommerce'} />); // Return statement changed
			}
		}
		return (
			<RctThemeProvider>
				<NotificationContainer />
				<InitialPath
					path={`${match.url}app`} // Path url changed
					authUser={user}
					component={RctDefaultLayout} // Component changed
				/>
				...

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:

App.js

if (location.pathname === '/') {
			if (user === null) {
				return (<Redirect to={'/signin'} />);
			} else {
				return (<Redirect to={'/boxed/dashboard/news'} />); 
			}
		}
		return (
			<RctThemeProvider>
				<NotificationContainer />
				<InitialPath
					path={`${match.url}boxed`} 
					authUser={user}
					component={RctBoxedLayout} 
				/>
				...

with the code given below:

App.js

if (location.pathname === '/') {
			if (user === null) {
				return (<Redirect to={'/signin'} />);
			} else {
				return (<Redirect to={'/app/dashboard/ecommerce'} />); // Return statement changed
			}
		}
		return (
			<RctThemeProvider>
				<NotificationContainer />
				<InitialPath
					path={`${match.url}app`} // Path url changed
					authUser={user}
					component={RctDefaultLayout} // Component changed
				/>
				...