Add Template Files

Prepare for adding new files

In the project, you will find the folder public. This is the folder that contains the default template. Rename it to public_md. We will not use this folder anymore.

There is another folder public_example. Make new copy of that folder and rename it to public. This will be our new public folder.

In the folder you copied, there are one .css and one .js file we use cross template. You can modify the values and functions of them to suit your need.

This is how the folder structure should look now.

Download your HTML Admin Bootstrap template. If zipped, extract it. Most of the HTML admin templates contain asssets folder that contains all the image + js + css. Copy the asssets folder ( or similar ) and put in in the public folder.

Most HTML templates have blank.html (If there is no blank.html use index.html file). Put it in the same public folder. Rename blank.html to index.html

This is how the folder structure of the public folder should look now.

Set up index.htm

Open the index.html you just copied from your template. Change the title atribute to match your needs.

Delete everithing that is inside the body tag. In some admin panels, javascirp is loaded at the end of the body tag. Don't remove the Javascript library imports.

Step 1. Inside the body tag, add the folowing div element

 <div id="root"></div>

Step 2. In the <head>...</head> section add the folowing css import

<link rel="stylesheet" href="assets_vendor/css/fireadmin.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Step 3. On the bottom of the HTML code just before closing the html with </html> add the folowing

<script src="assets_vendor/vendors/js/noty/noty.min.js"></script>
    <script src="assets_vendor/js/interface.js"></script>
    <script type="text/javascript">
        function getReactInterfaceToJS(){
        return reactInterfaceToJS;
      }
    </script>

Prepare for adding new files

Download and place your files

Set up index.htm