Installation

Basic Installation

Steps to be followed for getting started with the template:

There are followings basics packages you should install before going further.

  1. Open terminal or CMD and go the root directory of the template
  2. Run in terminal or CMD: npm install Or if npm install gives error then run the command npm install --legacy-peer-deps
  3. To Run project on Local environment run: npm run start
  4. Then visit: http://localhost:3000

Development to production

Here is the steps of production:

  1. If you can deploy in subdirectory first you can copy and rename the following file .env.example to .env and set the production path by PUBLIC_URL="" this key
  2. To Deploy project on server create production build by running: npm run build
  3. This will generate /dist folder in project root directory you'll have to upload these file using a FTP on your server
  4. Now that you have followed these steps your basic installation is complete and ready to flaunt your site to the world.

Folder Structure

Here is the general structure of the template:


    xray-react
    | - public
         - favicon.ico
         - index.html
    
    | - src
      | - assets
        | - css
        | - fonts
        | - fullcalendar
        | - images
        | - scss
    
      | - components
        | - partials
    
      | - layouts
          - default-layout.js
    
      | - router
      | - store
      | - utilities
      | - views
      - App.js
      - index.js
    - .gitignore
    - .env.development.local
    - .env.production.local
    - package.json
    - README.md
    - tsconfig.json

For Favicon icon

Set favicon for replace favicon.ico and restart server

For Logo

Use the header style which is in components -> partials -> HeaderStyle -> header.js. Replace "logo.png" with your own logo image URL.

Layout Configure

Here is the layout and routing configure


     | - layouts
        - default-layout.js
    | - router
        - app-router.js
        - auth-router.js
        - error-router.js
        - index-router.js

Router url configure


    
    //import components
    import DefaultLayout from "../layouts/default-layout"
    
    import Index from '../views/index'
    
    // Set Layout in this route
    const IndexRouters = [
      {
        path: '',
        element: <DefaultLayout />,
        children: [
            {
                path: '/',
                element: <Index />,
            }
        ]
      }
    ]

Sidebar & Header

  1. You can add the new option in sidebar by simply following the example given in src -> components -> partials -> SideBarStyle -> verticalNav.js
  2. You can change header according to your likig by going to src -> components -> partials -> HeaderStyle -> header.js

Custom Components

Custom Card

We have build different types of custom card components. And these are the some prop and slots


    import React from 'react'
    
    const Card = (props) => <div className={`card ${props.className ? props.className : ''}`}> {props.children} </div>
    Card.Header = (props) => <div className={`card-header d-flex justify-content-between ${props.className ? props.className : `}> {props.children} </div>
    Card.Body = (props) => <div className={`card-body ${props.className ? props.className :''}`}> {props.children} </div>
    Card.Footer = (props) => <div className="card-footer"> {props.children} </div>
    Card.Header.Title = (props) => <div className={`header-title ${props.className ? props.className : ''}`}> {props.children} </div>
    Card.Header.Action = (props) => <div className={`header-action ${props.className ? props.className : ''}`}> {props.children} </div>
                                            
    export default Card;

Bootstrap Components

Bootstrap has wonderfull documentation on the following components::

React Bootstrap for extra component https://react-bootstrap.netlify.app/docs/getting-started/introduction

Browser Support

Supports all major Browsers like Google Chrome, Mozilla Firefox, Safari, Opera, Internet Explorer 9 and above.

Change Log

Version 1.0

- Initial Release

Source & Credits

All images and videos are for preview purposes only and are not included in the download files. Images are of copyrights under Creative Commons CC0.


Images



Plugins



CSS & Fonts