Detailed Guide on How to create a Windows Store App with HTML5 exporter

Welcome to our brand new Clickteam Community Hub! We hope you will enjoy using the new features, which we will be further expanding in the coming months.

A few features including Passport are unavailable initially whilst we monitor stability of the new platform, we hope to bring these online very soon. Small issues will crop up following the import from our old system, including some message formatting, translation accuracy and other things.

Thank you for your patience whilst we've worked on this and we look forward to more exciting community developments soon!

Clickteam.
  • There are a few ways to create a Windows App Store App, for x64,x86 and ARM.

    There are a few things that you need in order to be successfully.

    1a. MS VS 2013 Express. (The US Version = 4.3 gb. There is a 700 Mb version on the MS site, but that one is missing the Java App section)
    (Please login to see this link.)
    This comes with the whole package, including for Windows Phone and Phone Testing App.
    (vs2013.3_winexp_ret_ENU.iso)

    1b. The Windows App Certification Kit is needed for testing your application. (You can test html5 and EXE/Setup files with it)
    Please login to see this link. for detailed information.
    Please login to see this link. (The download page)


    Once you installed all of this, then lets start with the fun part :)


    In MF 2.5 Export your project as HTML5
    Make SURE that the Output is set to UTF-8

    Please login to see this attachment.


    1. Lets fire up MS VS 2013 and select new project, and under JavaScript select Store Apps --> Windows Apps --> Blank App.

    Please login to see this attachment.

    2. Go to the folder, where you exported your HTML5 project in Fusion.

    Please login to see this attachment.

    3. Highlight the folders and file, and Drag them ONTO the project name (JS -...... ) The one that is highlighted on the right side.
    The files and folders are now copied into the project.

    4. Now bring up the PACKAGE.APPXMANIFEST file

    Please login to see this attachment.

    And fill out the basic information.
    - Display name

    CHANGE the Start page, to the newly copied html page (index.html)

    5. Since the HTML5 Exporter does not export to UTF-8 with signature, we have to manually save 2 files again
    - index.html
    - runtime.js

    For both you need open the file, and then select File--->Save As
    Then on the Save screen, click on the dropdown box to change the Save type

    Please login to see this attachment.

    Make SURE it says UTF-8 With Signature!

    6. Under the Packaging Tab you can fill out the Version number, and other info.

    Please login to see this attachment.

    7. There is a Visual Tab, which we are skipping for now.

    Please login to see this attachment.

    8. Now we are going to create the package.
    Go to STORE and select Create App Package

    Please login to see this attachment.


    9. Select No since we Don't want to upload yet.
    If you select Yes, you need to have a Windows Dev Account for uploading apps to the Windows Store.

    Please login to see this attachment.


    10. The next step is to select for what Platform you want the App for
    Just select all of them, and make SURE that you select "RELEASE" and not the "DEBUG" version

    Please login to see this attachment.

    11. Select Local Machine for testing

    Please login to see this attachment.

    And select "Launch Windows App Cert. Kit"


    12. Once The Kit App launches, leave everything default and hit Next

    Please login to see this attachment.


    13. Oh oohhh.... The Test failed.

    Please login to see this attachment.

    The reason why it failed is this

    Please login to see this attachment.


    Windows have some default icons, which are blank, so they need to be replaced.
    (This is Step 7, which we skipped for now, since there are a LOT of images you can do)

    14. I only changed the default images, which have a filename in the folder box, right above the images.

    Please login to see this attachment.

    So replace the 4 images, with the new ones, and make sure the Sizes are correct.
    (I will be developing a small tool, that creates all the different sizes of images later on)

    15. Repeat Step 8 - 12 and this will be the result.

    Please login to see this attachment.


    Congratulations!!!
    You just made your 1st Windows 8.x App for the Tablet and/or Phone.

    Now you can upload it to the Store, and make big $$$.
    Please contact me for my Paypal, so I can get a percentage :)

    Good luck with it, and if you have any questions, don't hesitate to contact me, or drop a message here.

    Edited once, last by Sparckman (August 11, 2014 at 10:11 PM).

  • Hello Perry,

    Thank you for this excellent tutorial. Do you think it possible that you believe a PDF guide with larger images? You can ask for help to the friend Sparckman who is a genius doing this! :)

    José Rafael Marcano
    Please login to see this link.

  • The PDF is now for Free in the Click store!

    Please login to see this link.

    Perry you are the best! :)

    I have not tried the stuck because I need Windows 8 to build and test. Tomorrow I buy a license to use it on my Parallels Desktop.

    Someone from the Forum has done and to run an App on a Surface Pro, for example?

    José Rafael Marcano
    Please login to see this link.

  • Thanks.

    Sorry for the Delay... I've been working on some things.
    Hopefully this weekend, I will get my license done for Windows, and upload my 1st game to Windows.
    (Playing with the window screen settings. on how I can get a perfect full screen. ) (Since you cannot make it fit for display, like with other exporters)

  • Can this be done with Visual Studio 2015 Community Edition? Why do you recommend Visual Studio 2013 Express?

    Looking in the new projects of Visual Studio 2015, under Javascript, I see only Apache Cordova Apps, whatever that is. It appears to be the way to make a HTML5 app with Windows 10. Can you confirm?

    Please login to see this link.

  • Hi,
    I tried with Visual Studio 2015 with a basic html5 app with an orange background (cf. CorrectApp.jpg).
    But it's running as if the Runtime.js, the .cch or the .cc1 is missing : the windows open with correct borders but nothing inside (cf. from VS.jpg).

    I tried to create the Web.config as marius said here : Please login to see this link.
    but nothing better !
    VS analyse, debug, and create package properly with no error and no alert ... but at the end the app is not running !!

    Any idea ?

  • Hi,
    I tried with Visual Studio 2015 with a basic html5 app with an orange background (cf. CorrectApp.jpg).
    But it's running as if the Runtime.js, the .cch or the .cc1 is missing : the windows open with correct borders but nothing inside (cf. from VS.jpg).
    I tried to create the Web.config as marius said here : Please login to see this link.
    but nothing better !
    VS analyse, debug, and create package properly with no error and no alert : the windows opne but the app is not running inside

    Any idea ?

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!