This topic contains 18 replies, has 4 voices, and was last updated by  ugomonte 5 hours, 19 minutes ago.

My personal guide on how to use the build tools with Metronic 5.0.2


  • JimOQuinn
    Participant

    Posts: 59
    Member Reply #11394

    This works with the default configuration shipped with the 5.0.2 version of Metronic, will walk you through the build process (not the Preview/Layout Builder), and worked on a clean 32bit Win10 system. Do not run on a production system or with an active XAMPP install because you’ll be removing the HTML root.  All the 3rd party apps like xampp, git, and nodeJS are installed with the defaults.  This was tested on my machine only so beware and good luck.

    1. Download and install xampp with the Installation Folder as c:\xampp. Once the install is done delete all the files in c:\xampp\htdocs directory.
    https://www.apachefriends.org/xampp-files/7.1.9/xampp-win32-7.1.9-0-VC14-installer.exe

    2. Download and install NodeJS:
    https://nodejs.org/dist/v8.6.0/node-v8.6.0-x86.msi

    3. Download and install latest git and going forward I only use Git Bash for the command line.

    https://github.com/git-for-windows/git/releases/download/v2.14.2.windows.1/Git-2.14.2-32-bit.exe

    4. From the Start menu, launch Git Bash. Run all remaining commands in this tutorial inside this window.

    5. Now make yourself a working directory in your home  (remember, from here forward you are in the bash shell):

    cd $HOME
    mkdir mwd && cd mwd

    6. Download the 5.0.2 version of the Metronic theme into your working directory mwd, change the name to a.zip and unzip. I’m on a 32bit Win10 box and the long file name plus directory structure causes the unzip to fail unless you shorten the name of the file.  Pay attention to the YOURID, be sure to use your own.

    mv themeforest-YOURID-metronic-responsive-admin-dashboard-template.zip a.zip
    unzip a.zip

    7 . Build the theme.  I like to run everything out of the tools directory, so all commands will be relative from that directory.

    cd metronic_v5.0.2/metronic_v5.0.2/tools
    npm install npm@latest -g
    npm install bower -g
    npm install gulp-cli -g
    npm install
    bower install
    gulp –prod
    cp -R ../themes/dist/html/default/. /c/xampp/htdocs

    8. Fire up the browser and go to http://localhost/. This will get you the theme called “default”. To use the other demos, delete c:\xampp\htdocs, and use these commands:

    Demo #2

    cp -R ../themes/dist/html/demo2/   . /c/xampp/htdocs

    Demo #3

    cp -R ../themes/dist/html/demo3/    . /c/xampp/htdocs

    Demo #3

    cp -R ../themes/dist/html/demo4/    . /c/xampp/htdocs

    What can go wrong?

    1. You already have a web server running on port 80? Make sure IIS is disabled or you don’t have apache already running.

    2. Check that you ran commands in the Git Bash shell and not the CMD/DOS box.

    3. Node, bower, most of the build process will spit out errors. I ignored them, but do so at your own peril.

    4. Why do I have to rename the .zip file? I attempted to unzip with Windows Explorer and it kept complaining about the filename being so long. Figured it was a 32bit issue and renamed the .zip and used the unzip command in bash. That seems to work fine.

    5. What if I want to change the colors, rounded corners, and style? Read the instructions posted in the link above, they will give you insight on _framework-config.scss.

    • This topic was modified 2 weeks, 5 days ago by  JimOQuinn. Reason: Added additional warning, so are doubly warned to run this on a clean install and not a production system
    • This topic was modified 2 weeks, 5 days ago by Sean Sean.
    • This topic was modified 2 weeks, 5 days ago by Sean Sean.
    • This topic was modified 2 weeks, 5 days ago by Sean Sean.
    • This topic was modified 2 weeks, 5 days ago by Sean Sean.

    JimOQuinn
    Participant

    Posts: 59
    Member Reply #11396

     

    No offense mods, but this forum needs to be upgraded.  Editing causes posts that previously looked good to fall apart.  It breaks spacing in the tags on edit, it mysteriously decides to wrap a box around some <code> tags and not others.  Anytime I hit a key while editing it jumps the browser to the top of the page.  The width is fixed even though it's a technical forum and at times commands are really long, they end up broken looking.  Girr...

    • This reply was modified 2 weeks, 5 days ago by Sean Sean.
    • This reply was modified 2 weeks, 5 days ago by Sean Sean.
    Sean
    Sean
    Keymaster

    Posts: 3913
    Support Staff Reply #11411

    Hi :),

    Thanks for the post and sharing your experience. Yes, we are working on the new version of the site and the forum engine will be improved and we will add knowledge base as well.

    Thanks.


    ugomonte
    Participant

    Posts: 15
    Member Reply #11501

    Hi,

    I ask if this procedure is also recommended when developing an asp net application into visual studio environment?

    Thanks.
    Ugo


    JimOQuinn
    Participant

    Posts: 59
    Member Reply #11504

    Never used any of the dev tools you mentioned, but I suspect you can use partials (partials is the theme broken into smaller HTML pages) and integrate them into your .ASP .NET and Visual Studio development environment.

    You’ll want to use the Layout Builder to do this.   I assume that you have unzipped the theme somewhere, so lets cd to that directory.  Then we’ll cd down to the directory where we’ll start PHP’s internal web server, use the Layout Builder and export partials in a .zip which you can include in .ASP/.NET code and maybe import into VS.  I don’t know, never used them before.  I can’t get the Export -> Export as HTML Layout to work in 5.0.3 so use 5.0.2.

    1.  cd metronic_v5.0.2/metronic_v5.0.2/theme/dist
    2.  php -S localhost:8888

    In your browser type in this URL:  http://localhost:8888/preview/

    This should get you the theme with the layout builder (look towards the bottom of the left nav menu), futz around with whatever settings you want, press the Preview button then press Export -> Export HTML Layout Package.  Your browser should prompt you to download a .zip or it’ll automatically download it for you.  If not, we have a problem so stop and post a note here.

    If you do get a zip. inside you’ll find lots of files that can be plugged into your dev environment like;  header, side menu, footer, etc.

    My file was named html-default.zip and contained the following:

    Archive:  html-default.zip

    Length      Date    Time    Name

    ———  ———- —–   —-

    1604  09-15-2017 03:45   partials/_footer-default.html

    2211  09-15-2017 03:45   partials/_topbar-quick-actions.html

    53293  09-15-2017 03:45   partials/_aside-left.html

    1479  09-15-2017 03:45   partials/_topbar-search-default.html

    217  09-15-2017 03:45   partials/_layout-scroll-top.html

    7860  09-15-2017 03:45   partials/_topbar-notifications.html

    1222  09-15-2017 03:45   partials/_header-brand.html

    797  09-15-2017 03:45   partials/_header-topbar.html

    3454  09-15-2017 03:45   partials/_topbar-user-profile.html

    666  09-15-2017 03:45   partials/_subheader-default.html

    546  09-15-2017 03:45   partials/_header-base.html

    1173  09-15-2017 03:45   partials/_layout-tooltips.html

    20019  09-15-2017 03:45   partials/_layout-quick-sidebar.html

    2527  09-15-2017 03:45   index.html

    876  09-15-2017 03:45   _layout.html

    ———                     ——-

    97944                     15 files

    • This reply was modified 2 weeks, 2 days ago by  JimOQuinn.

    ugomonte
    Participant

    Posts: 15
    Member Reply #11528

    Thanks Jim,

    i have tried your suggestions, but i cannot execute php command (php -S localhost:8888) because it isn’t recognized as program or batch file. So i cannot get the theme with the layout builder and export HTML Layout Package.

    I never installed php envirenoment in my pc. I am using windows 10 professional and visual studio 2017 community.

    So at the moment i assume i need:
    1) unzip the “themeforest-4021469-metronic-responsive-admin-dashboard-template.zip” file and create a new folder in my documents as “metronic_v5.0.3” (containing the old 4.7.5 and new version 5.0.3).
    2) Copy the entire directory metronic_v5.0.3\metronic_v5.0.3\theme\dist\html\default\assets with all subdir/files into my visual studio solution.
    3) Bundle in my web application css and script present into the above copied directory (assets).

    I am able to use and show the new layout in my web application but i am not able to use datatable plugin.
    Thank you
    Ugo

    Sean
    Sean
    Keymaster

    Posts: 3913
    Support Staff Reply #11564

    Hi,

    You don’t have to copy the unpacked theme source into your project directory. You can put your the theme source anywhere outside your project folder and setup the build tools following the documentation. Whenever you run complication commands you will get final css/js in the assets folder of the HTML version(theme/dist/html/[demo_id]/assets) then you just need to copy this assets folder into your web directory. Also you can get the HTML code from the template(e.g: index.html) and use it with your server side code.

    Thanks.


    ugomonte
    Participant

    Posts: 15
    Member Reply #11579

    Thanks Sean,
    i have managed unzipped metronic package as you describe into “DOCUMENTATION->QUICK START” procedure:
    1 Download and install Node.js from nodejs.org/en/download/
    2 Open command terminal and make sure to change directory to [unzipped_metronic_folder]/tools
    cd tools
    3 Install the latest version of npm.
    npm install -g npm@latest
    4 Install bower.
    npm install -g bower
    5 Install gulp.
    npm install -g gulp-cli
    6 Install npm dependencies.
    npm install
    7 Install bower dependencies.
    bower install
    8 Compile scss and javascript using gulp.
    gulp

    You can see the attached the copy of command lines showing during installation.

    At the end I tried to open metronic_v5.0.3\theme\dist\html\default\index.html but i opened a web page without css as you can see into second attached file.

    Thank you very much. Best regards.
    Ugo

    Attachments:
    You must be logged in to view attached files.

    ugomonte
    Participant

    Posts: 15
    Member Reply #11581

    Sorry here the second attached file..

    Attachments:
    You must be logged in to view attached files.

    JimOQuinn
    Participant

    Posts: 59
    Member Reply #11609

    When you ran “bower install” I see the following error:

    git is not installed or not in the PATH

    Did you install git?

    • This reply was modified 1 week, 4 days ago by  JimOQuinn.

    ugomonte
    Participant

    Posts: 15
    Member Reply #11619

    No! i haven’t install git.

    I will install git.

    After that what have i to do? To reinstall bower? is it possible to disinstall it before?

    Thanks


    JimOQuinn
    Participant

    Posts: 59
    Member Reply #11620

    I don’t think it hurts to reinstall these packages.  I’ve uninstalled, reinstalled, and installed them several times while learning the build process for this theme and unless the Keen Themes support says otherwise, I’m going to assume that it is safe.  Having said that, I’m the voice of one, largely run on a UNIX box, and can’t speak for Windows.

    Given your error, you have to run “bower install” command again and when you run gulp, be sure to to run “gulp -prod” which will build production ready files and put them in ../themes/dist/html/default.

    Copy everything in ../themes/dist/html/default to your webserver.


    ugomonte
    Participant

    Posts: 15
    Member Reply #11639

    Hi Jim,

    i restart installation starting from unzip file and go forward with the quick start steps. For the last step i used your suggestion “gulp -prod” and now finally i can open metronic 5.0.3 application without problems (attached log installation command).
    I am going to try to include /themes/dist/html/default/assets into my visual studio solution. I’ll let you know how it goes.

    Thank you very much for me you are super!
    Ugo

    Attachments:
    You must be logged in to view attached files.

    ugomonte
    Participant

    Posts: 15
    Member Reply #11661

    Hi,

    following the above post i copy ..\metronic_v5.0.3\metronic_v5.0.3\theme\dist\html\default directory, as it was after the “Quick Start” compilation, under the root directory of my IIS web server (wwwroot) and after that i try to navigate between the datatable pages. Some pages are ok with sample data like “data-local” and “html-table” but some other like “http://localhost/default/components/datatables/base/data-ajax.html” don’t show data and opening chrome debugger console i see some errors:

    inc/api/datatables/demos/default.php Failed to load resource: the server
    responded with a status of 404 (Not Found)
    scripts.bundle.js:1755 Uncaught TypeError: Cannot read property ‘length’ of null
    at Object.insertData (scripts.bundle.js:1755)
    at fullRender (scripts.bundle.js:1056)
    at dispatch (vendors.bundle.js:sourcemap:5206)
    at elemData.handle (vendors.bundle.js:sourcemap:5014)
    scripts.bundle.js:1755 Uncaught TypeError: Cannot read property ‘length’ of null
    at Object.insertData (scripts.bundle.js:1755)
    at fullRender (scripts.bundle.js:1056)
    at dispatch (vendors.bundle.js:sourcemap:5206)
    at elemData.handle (vendors.bundle.js:sourcemap:5014)
    scripts.bundle.js:1755 Uncaught TypeError: Cannot read property ‘length’ of null
    at Object.insertData (scripts.bundle.js:1755)
    at fullRender (scripts.bundle.js:1056)
    at dispatch (vendors.bundle.js:sourcemap:5206)
    at elemData.handle (vendors.bundle.js:sourcemap:5014)

    You can see attached print screen.
    Have you some suggestions.
    Thank you.
    Ciao
    Ugo


    ugomonte
    Participant

    Posts: 15
    Member Reply #11662

    Sorry here the attached file..

    Attachments:
    You must be logged in to view attached files.

You must be logged in to reply to this topic.