{"id":207,"date":"2020-04-10T03:36:18","date_gmt":"2020-04-10T03:36:18","guid":{"rendered":"https:\/\/docs.theironnetwork.org\/hulk\/?page_id=207"},"modified":"2020-04-14T06:01:02","modified_gmt":"2020-04-14T06:01:02","slug":"build-an-app-from-scratch","status":"publish","type":"page","link":"https:\/\/docs.theironnetwork.org\/hulk\/build-an-app-from-scratch\/","title":{"rendered":"Build an App from scratch"},"content":{"rendered":"\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p> You can easily build your app from scratch, just follow the steps given below: <\/p>\n\n\n\n<ol><li> Copy the project files from the downloaded project. <\/li><li> Open the terminal and go to the root directory and then run <code>npm install<\/code>. <\/li><li> After installing npm then run <code>npm start<\/code>. <\/li><li> Open your browser and access <a rel=\"noreferrer noopener\" href=\"http:\/\/localhost:3000\/\" target=\"_blank\"><code>http:\/\/localhost:3000<\/code><\/a>. <\/li><\/ol>\n\n\n\n<h4> <strong>Integrate New Widget<\/strong> <\/h4>\n\n\n\n<p> Please follow the <a href=\"https:\/\/docs.theironnetwork.org\/hulk\/adding-widgets\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\">Adding New Widgets<\/a> section to learn how to add new widgets in the template. <\/p>\n\n\n\n<h4><strong>Integrate New Component\/Page<\/strong> <\/h4>\n\n\n\n<h5>For <strong>seed project<\/strong>: <\/h5>\n\n\n\n<p>By default seed project contains dashboard page means you can easily build your dashboard. <\/p>\n\n\n\n<p>If you want to add some <strong>pre-made components or pages<\/strong> then follow below steps: <\/p>\n\n\n\n<p><strong>Step 1:<\/strong> Copy the page template from <code>hulk-redux-thunk->src->routes<\/code> of downloaded files and paste it into under the <code>your-app-directory->src->routes<\/code> directory. <\/p>\n\n\n\n<p><strong>Step 2: <\/strong>Now you need to define the route in the <code>your-app-directory-&gt;src-&gt;services-&gt;_routerService.js<\/code> 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: <\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"> \/**\n Router service file\n *\/ \n import Dashboard from 'routes\/Dashboard'\n import Pages from 'routes\/Pages'\n export default [\n     {\n         path: 'dashboard',\n         component: Dashboard\n     },\n    {\n       path: 'pages',\n       component: Pages\n    }\n ]<\/pre>\n\n\n\n<p><strong>Step 3: <\/strong>Open the file <code>components-&gt;AsyncComponent-&gt;AsyncComponent.js<\/code> and define the component in the async components and export it in the area defined in the given code snippet. <\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">\/**\n Code splitting Components\n AsyncComponents\n *\/\n import React from 'react';\n import Loadable from 'react-loadable';\n import { HulkPageLoader } from '..\/GlobalComponents'; \n \/\/  Dashboard 1\n const AsyncBlankComponent = Loadable({\n     loader: () =&gt; import(\"routes\/Pages\/blank\"),\n     loading: () =&gt; &lt;HulkPageLoader\/&gt;\n });\n export {\n      AsyncBlankComponent  \n };<\/pre>\n\n\n\n<p><strong>Step 4:<\/strong> That\u2019s it if you navigate <a rel=\"noreferrer noopener\" href=\"http:\/\/localhost:3000\/app\/pages\/blank\" target=\"_blank\"><code>http:\/\/localhost:3000\/app\/pages\/blank<\/code><\/a> . The page has been built successfully. <\/p>\n\n\n\n<p>Integrating Menu<\/p>\n\n\n\n<p>If you want to add menu items then please check this section <a href=\"https:\/\/docs.theironnetwork.org\/hulk\/adding-menu-item\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\">Adding Menu\/Component In Different Layouts<\/a> for the detailed information. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":7,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/docs.theironnetwork.org\/hulk\/wp-json\/wp\/v2\/pages\/207"}],"collection":[{"href":"https:\/\/docs.theironnetwork.org\/hulk\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/docs.theironnetwork.org\/hulk\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/docs.theironnetwork.org\/hulk\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.theironnetwork.org\/hulk\/wp-json\/wp\/v2\/comments?post=207"}],"version-history":[{"count":49,"href":"https:\/\/docs.theironnetwork.org\/hulk\/wp-json\/wp\/v2\/pages\/207\/revisions"}],"predecessor-version":[{"id":439,"href":"https:\/\/docs.theironnetwork.org\/hulk\/wp-json\/wp\/v2\/pages\/207\/revisions\/439"}],"wp:attachment":[{"href":"https:\/\/docs.theironnetwork.org\/hulk\/wp-json\/wp\/v2\/media?parent=207"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}