Self-hosting a Ionic-Stencil PWA

Stencil
1

Hi everyone,
I started learning about Ionic-Stencil and PWA in general around a month and a half ago.
I read ‘Creating Ionic Applications with StencilJS’ by Josh Morony. He’s got a lot of great resources on his website and I learned quite a lot through those and his book.

However, the book doesn’t cover the idea of self-hosting a PWA. Everywhere I read about this, people suggest to use either Netlify (as in the book) or Firebase, but I want it to be hosted on my server.

I suppose that a Node server would be able to serve the PWA, but I don’t know where to start with that.
My only previous notions of hosting websites with Node was to use Sailsjs, which makes the process trivial.
However, I would prefer to start from scratch, so ideally, not use Express or Sails to serve the website.

I am not asking for code that would allow me to do that, only for indications of resources that I should study in order to better understand the process and achieve my goal.
I checked all around for the last three days, and while there are different resources talking about that, most of the time they advise using Netlify or Firebase, and most of the time, the information is outdated.
A lot of lessons talks about how to make a Node server, but I don’t understand how to use that knowledge in order to host a Ionic-Stencil PWA.

Note that I am not interested in publishing the website on the internet, the only part I am interested in is to allow users from my network to access the page with their browser, and to install the PWA if desired.
So I don’t ask about DNS, redirection, etc. Only the step prior to that.

If you have any questions, please write me back.
Thanks in advance.

Edit: Obviously, just after writing that, I found some simple explanations. I will test test them and come back here to indicate if it worked.

For people interested by that question, see that page: https://stackoverflow.com/questions/51470188/deploying-and-hosting-a-pwa-in-nodejs

Simply put, you need to put the www folder in the node file structure and respond with index.html. I supposed that it was something like that.

2

Self-hosting an Ionic-Stencil PWA is basically the same as self-hosting any normal website. Run npm run build and copy the content of the www folder to the server. You don’t necessarily need a Node server. E.g. if you have an apache or nginx server, you can use that directly.

One thing to look out for in case you use hash-less routing is to configure the server to return the application’s host page ( index.html ) when asked for a file that it does not have, see here (this link is from the Angular documentation, but this applies to all single page apps with hash-less routing).

Also note that PWAs have to be served over https.

1 Like
3

Thank you for the fast and very useful answer @pwespi,
I knew I didn’t need a Node server, however I didn’t realize that I could run it from a Nginx directly, I’ll look more into that path.

I am not sure exactly what you mean by hash-less routing, but I will keep your link in mind and check Google if need be.

Once tested, I’ll come back to indicate that it was a working answer.

Thanks again and have a good day.

4

Regarding hash-less routing, see https://ionicframework.com/docs/api/router > useHash

5

Wow thanks, that’ll save me some time.

6

Hi @pwespi,
I was not sure where to ask these questions and as you have been helpful, I figured you may be able to help me once more.
I hope I am not bothering you with these questions, it is just that I am not sure where I should post those, and they are somewhat related to my previous question.

Thanks to the resources you gave me, I finally got a grip of the problem, and achieved my goal.
I have written a tutorial to explain all of this, but I am not sure it is appropriate to post it on this forum, as it is a bit long (7 pages in 12px font) and most of it is about how to set up Nginx, and doesn’t really concerns Ionic or Stencil (however, I explain how to serve a Ionic-Stencil PWA with Nginx.)
I can also make a PDF document of the tutorial and post it like that.

The other thing is that it is based on a couple of other tutorials I read elsewhere. I put links for every sites I have been using, but large sections of it are pretty much copies of the information from these sites. I am not sure if this is appropriate or not.

The other thing is that technically, your answer was the solution to my question, as it allowed me to solve my problem, but the tutorial I made would be a more complete solution. I feel like I should make your answer the solution for that topic, but I am not sure if it is the right decision.

Once again, I hope that I am not bothering you. I am not used to writing on forums, and while I read the rules, I really don’t want to make anyone frustrated because of some stupid error from my part.

Thanks for the links you sent me, it saved me a lot of headaches.
Have a good one.

7

add this code in stencil.config.ts

outputTargets: [{
    type: 'www',
    serviceWorker: {
      globPatterns: [
        '**/*.{js,css,json,html,ico,png}'
      ]
    }
  }],

create new .htaccess with below code

RewriteEngine On
# If an existing asset or directory is requested go to it as it is
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]

# If the requested resource doesn't exist, use index.html
RewriteRule ^ /index.html
1 Like
8

Hi,

It’s funny, I was looking to solve that problem today, and one of the link on Google led me back here.
Sorry @krunal_vaghela, I had not seen you wrote an answer.

For the first part, I found that in another tutorial.

For the second part, however, I use Nginx, which, by default, don’t use .htaccess. I don’t know much about htaccess, not even if it can be used with Nginx.

I’ll try to figure out what it means and adapt it to Nginx.
This page (Nginx documentation on W3Cub) seems to be what I am looking for.

Thank you a lot, it is very much appreciated.

1 Like
9