Where to host Elm application?

SimonLab commented 4 years ago

At the moment the Elm application is hosted with Github pages at https://dwyl.github.io/elm-pwa-example/

Github pages is easy to use and very to deploy a new version as it will get the new code from gh-pages branch automatically. However we can see that the url is using the repository name /elm-pwa-example, this makes the code dependent to how Github pages work. For example we can see on the index.html file that we need to prepend the name to the manifest.json and elm.js paths.

<html>
    <head>
        <title>Dwyl App</title>
        <link rel="manifest" href="/elm-pwa-example/manifest.json">
        <script src="/elm-pwa-example/elm.js"></script>
    </head>
</html>

This is also an issue when caching the pages with the service worker:

self.addEventListener('install', function (e) {
  e.waitUntil(
    caches.open('dwylapp').then(function (cache) {
      return cache.addAll([
        '/elm-pwa-example/manifest.json',
        '/elm-pwa-example/elm.js',
        '/elm-pwa-example/dwyl.png'
      ]);
    })
  );
});

Github pages are great to deploy rapidly and to test spike and features linked to PWA. However It would be nicer to have just /manifest.json and /elm.js.

We can look at how to deploy a static elm application with Heroku. Elm community seems also to be using Netlify

nelsonic commented 4 years ago

@SimonLab thanks for opening this issue/question! GitHub Pages works well for now. ✅ We can/should explore other options as needed. 🔍 If we were shipping a elm app without a Phoenix backend then Netlify could be an <option> ... 💭

The reason I have never considered Netlify before is that they don't support WebSockets. So while the deployment looks simple they don't have a feature I consider a "hygiene factor". 😞 I think it looks good for static sites with a REST API backend though ... but then you are stuck building your backend with their tools ... https://github.com/netlify/netlify-cms Even though their CMS claims to be "Open Source" it's not really because you can only deploy the CMS to their system. (to my knowledge I haven't seen how I can deploy it to my own VPS...) Most people will trade control [of their personal data] for convenience. 🤦‍♂ I'm not most people. 👎
I want to know where my data is. I want it encrypted at rest and to control the encryption keys. 🔐

SimonLab commented 4 years ago

As mentioned above, managing the urls with Elm and PWA are a bit tedious with Github pages. I'm focusing now on creating an Heroku application using a simple nodejs server which can be used to initiliase the Elm application. see https://github.com/dwyl/elm-pwa-example/issues/7#issuecomment-566599413

I'll create the Heroku app with my own account for now and when ready we can move it to the dwyl account.

SimonLab commented 4 years ago

Heroku application created:

https://dwyl-elm-pwa.herokuapp.com/

I had an issue where the npm scripts weren't running. Adding ---verbose=true to the commands I saw that I had defined ignore-scripts to false. To be able to test rapidly the new Heroku app I've set it back to true with npm config set ignore-scripts true but it's not ideal and I'll need to find a solution on how to run specific command with ignore-scripts set to false

SimonLab commented 4 years ago

"Heroku buildpack for handling static sites and single page web apps"

I have been reading/looking for an easier way to deploy static files. With Heroku there is the following buildpack: https://github.com/heroku/heroku-buildpack-static which I think will allow us to remove http-server:

It is using Nginx (I think to server static file) and also allows us to configure how the index.html file is returned and in our case to setup a redirection from http to https which is a requirement for PWA, see https://github.com/dwyl/elm-pwa-example/issues/7#issuecomment-571640707.

On localhost we can use elm-reactor (and remove npm packages and nodejs files) and on Heroku we can use directly the buildpack. Github review apps can also be used to test new PWA code. Having the app hosted simplify also the tests using real mobile device as we can play with PWA on real device easily.

ref:

SimonLab commented 4 years ago

Following the instruction on https://github.com/heroku/heroku-buildpack-static#deploying

[x] Created new Heroku app and added the buildpack
[x] Created an empty static.json file
[x] Deploy manually the new branch

The application was really quick to deploy however I have some error and I think this is due to not have any json configuration defined in the static.json file. It looks like Ruby is trying to parse the empty file:

adding the https_only config to test if some content in the config will fix this parsing error:

{
  "https_only": true
}

[x] Redeploy with new static.json config, the redirect http to https is working [x] Configure routing for Nginx to be able to serve the index.html file

The following static.json allow the app to run with Nginx:

{
  "root": ".",
  "https_only": true,
  "routes": {
    "/**": "index.html"
  }
}

see https://dwyl-pwa-app.herokuapp.com/

dwyl / elm-pwa-example

Where to host Elm application? #3