How to Deploy Your Ionic App as Website to Heroku


Beware of the introductory price – I found a good deal for hosting and signed up.. only 3 months later they start charging exactly 10 times the amount i was paying in the deal. after talking to them they said it was a limited time offer and now i have to pay this. i said i wanna take my site and domain so for domain they charged me 15$ which is fair enough but to transfer my site they charged me 250$ which i am still not sure why exactly. I was a mess talking back and forth to them and my web developer. Also the web developer blame a lot of things on the hosting company which i am not sure about as i am not that tech savy but yeah after moving to an another host all the problems went off.. whole process took me about 2 months. Ben


Learn to deploy your Ionic App as a Website to Heroku!

Join my special Ionic School today: https://ionicacademy.com/
Video Courses, Project Templates, Community & the Support you deserve to learn Ionic!

#############################

Want to read instead of watch? Here’s the full tutorial: https://devdactic.com/deploy-ionic-website-heroku/

Want more tutorials? Here you go! https://devdactic.com/

Just getting started? Take my 7 Day Ionic Crash Course: https://ionicacademy.com/ionic-crash-course/

#############################

My Private Daily Vlog: https://www.youtube.com/channel/UCyo_g3MZNTubqz2UbpLgmXw

You can also find me
on https://twitter.com/schlimmson
on https://www.facebook.com/devdactic
on http://instagram.com/simongrimm_

#############################

Simon Grimm

10 Comments
  • Legalas Elf
    Posted at 16:17h, 31 October

    is it a good idea to run production projects on ionic for web? i have to do for my job a dating website platform, which has to have mobile app as well as a website, but it's a pretty big project. What do you think? is it stable enough, what potential problems could arise? other option is to build on angular 4 and then port to ionic

  • braulio cortés
    Posted at 02:44h, 02 November

    Cool, thanks for yours tutorials

  • Daniel Bezerra de Menezes
    Posted at 00:26h, 08 November

    When i deleted the WWW and ran the npm build, my app wont compile anymore lol, and it was working fine this is the error > message:"Uncaught (in promise): InvalidCharacterError: String contains an invalid character
    DefaultDomRenderer2.prototype.setAttribute@http://localhost:8100/build/vendor.js:34902:13
    DebugRenderer2.prototype.setAttribute@http://localhost:8100/build/vendor.js:14038:9
    createElement@http://localhost:8100/build/vendor.js:9548:13
    createViewNodes@http://localhost:8100/build/vendor.js:12528:44
    callViewAction@http://localhost:8100/build/vendor.js:13011:13
    execComponentViewsAction@http://localhost:8100/build/vendor.js:12920:13
    createViewNodes@http://localhost:8100/build/vendor.js:12589:5
    createRootView@http://localhost:8100/build/vendor.js:12457:5
    callWithDebugContext@http://localhost:8100/build/vendor.js:13843:39
    debugCreateRootView@http://localhost:8100/build/vendor.js:13160:12
    ComponentFactory_.prototype.create@http://localhost:8100/build/vendor.js:10229:37
    ComponentFactoryBoundToModule.prototype.create@http://localhost:8100/build/vendor.js:3690:16
    NavControllerBase.prototype._viewInit@http://localhost:8100/build/vendor.js:44598:27
    NavControllerBase.prototype._nextTrns/<@http://localhost:8100/build/vendor.js:44390:17
    M</l</t.prototype.invoke@http://localhost:8100/build/polyfills.js:3:14354
    onInvoke@http://localhost:8100/build/vendor.js:4247:24
    M</l</t.prototype.invoke@http://localhost:8100/build/polyfills.js:3:14281
    M</c</r.prototype.run@http://localhost:8100/build/polyfills.js:3:9504
    f/<@http://localhost:8100/build/polyfills.js:3:19620
    M</l</t.prototype.invokeTask@http://localhost:8100/build/polyfills.js:3:15029
    onInvokeTask@http://localhost:8100/build/vendor.js:4238:24
    M</l</t.prototype.invokeTask@http://localhost:8100/build/polyfills.js:3:14942
    M</c</r.prototype.runTask@http://localhost:8100/build/polyfills.js:3:10195
    o@http://localhost:8100/build/polyfills.js:3:7267

    Im rolling back my ubuntu to few hours ago when it was working, but if u know what im doing wrong please tell me , i really wnt to deploy to heroku. Ty
    "

  • Wal li
    Posted at 01:36h, 09 November

    thanks !

  • NappDev
    Posted at 18:44h, 13 March

    hi, first of all great tutorial as always. Loyal follower here :-).

    Unfortunately I can't seem to deploy to heroku. I followed all your steps and when its time to to npm run build I get an error (see link for screenshot) -> https://gyazo.com/9d60752c1...

    I hope you can really help me out. Its my last step to my whole pet project. Thanks in advance for any help

  • ofir332
    Posted at 22:04h, 26 April

    great video, side note – ionic by default adds www/ path to .gitignore file, what interrupting the deployment to heroku.

  • Kin Chung CKC Chui
    Posted at 08:09h, 19 May

    Success. Thank you.

  • Kiran Goud
    Posted at 07:18h, 28 May

    Do one for FIrebase Hosting too

  • Bruno Martínez
    Posted at 18:26h, 14 July

    Great video! Using the –prod flag on the build command is advised

  • Thanakorn Ariyagusolsuthi
    Posted at 15:29h, 28 September

    Its application error for open the website after deploy