You can easily build your app from scratch, just follow the steps given below:
- Copy the project files from the downloaded project.
- Open the terminal and go to the root directory and then run
npm install
. - After installing npm then run
npm start
. - Open your browser and access
http://localhost:3000
.
Integrate New Widget
Please follow the Adding New Widgets section to learn how to add new widgets in the template.
Integrate New Component/Page
For seed project:
By default seed project contains dashboard page means you can easily build your dashboard.
If you want to add some pre-made components or pages then follow below steps:
Step 1: Copy the page template from hulk-redux-thunk->src->routes
of downloaded files and paste it into under the your-app-directory->src->routes
directory.
Step 2: Now you need to define the route in the your-app-directory->src->services->_routerService.js
file. Let us take an example of adding simply a Pages component that adds a blank page in your template. Also, you need to import the component in the desired area like in the code given below:
/** Router service file */ import Dashboard from 'routes/Dashboard' import Pages from 'routes/Pages' export default [ { path: 'dashboard', component: Dashboard }, { path: 'pages', component: Pages } ]
Step 3: Open the file components->AsyncComponent->AsyncComponent.js
and define the component in the async components and export it in the area defined in the given code snippet.
/** Code splitting Components AsyncComponents */ import React from 'react'; import Loadable from 'react-loadable'; import { HulkPageLoader } from '../GlobalComponents'; // Dashboard 1 const AsyncBlankComponent = Loadable({ loader: () => import("routes/Pages/blank"), loading: () => <HulkPageLoader/> }); export { AsyncBlankComponent };
Step 4: That’s it if you navigate http://localhost:3000/app/pages/blank
. The page has been built successfully.
Integrating Menu
If you want to add menu items then please check this section Adding Menu/Component In Different Layouts for the detailed information.