GithubHelp home page GithubHelp logo

backend-cryto's Introduction

Documentation for React Dashlite application

React Quick Start:

  1. Make sure Node and npm package manager is installed, please check the version by the command node -v

  2. Install Dependencies

    a. npm install or yarn install

  3. Start the application / Run the dev-server:

    a. npm start or yarn start

    b. *Open your browser at localhost://3000*

Detailed Installation Process:

Installing Node:

  1. Download latest version of node.js from nodejs.org.

  2. Install and Setup Node.js using downloaded file in the development environment

  3. To check your node version, run **node -v **in a terminal/console window.

Installing Npm Package Manager:

  1. React CLI, and React apps depend on features and functionality provided by libraries that are available as npm packages. To download and install npm packages, you must have an **npm **package manager.

  2. This Quick Start uses the npm client command line interface, which is installed with Node.js by default. To check that you have the npm client installed, run **npm -v ** in a terminal/console window.

  3. For better understanding React we suggest you to once go through official documentation of React from ReactJS.org

Installing the React CLI:

  1. It is recommended to install the React CLI globally

  2. To Install just run the command npm install create-react-app

Running React-Dashlite:

  1. Download and extract Dashlite themes from themeforest.net

  2. Extract it and then go in to the extracted folder.

  3. Once in the folder, open the command prompt/git bash/Terminal application (Mac) and type in cd theme

  4. Import all dependency by installing npm command. Type in npm install

  5. After all the packages and dependencies have been installed successfully, run the application by typing in npm start

  6. Once you serve your application by default it will take their default port so you can open port using localhost://3000

Build Application

  1. Build you application for host on server just by typing npm run build in the terminal

  2. It will create a build file in the root directory. The application is ready to go into the server of your choice, simply the upload the zipped build file to the server. However, if the server is an apache server create a .htaccess file in the build folder of the application and paste the following code in it.

Options -MultiViews

RewriteEngine On

RewriteCond %{REQUEST_FILENAME} !-f

RewriteRule ^ index.html [QSA,L]

Copy the contents of the build file into the apache server, make sure the .htaccess file is included in the server.

Create New Directory / Page:

  1. To add a new directory or display contents on the side-panel. Add details in the object in the file src/layout/menu/MenuData.js.

    • Single Page: Add a JavaScript object with the properties of icon, text and link

    • Directory: Add a JavaScript object with properties of icon, text, link and submenu array where add all the sub-directory properties as an object.

  2. Once you have added a new nav as a directory or a page. Create the required page components in the pages folder. Make sure to export it, to make it available to all other places of the project.

  3. Include it in the route file in the directory routes/index.js. Make sure to import the created component in Step 2, through react-lazy process. And place the component in a route inside the Switch component such as <Route exact path="/your_link" component={Your_Component}/>. Make sure the link provided here is the same as in step one.

  4. Restart the application and visit the created route.

backend-cryto's People

Contributors

sunkanmi3 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.