Where to host Elm application? #3

SimonLab · 2019-12-17T11:01:47Z

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

The text was updated successfully, but these errors were encountered:

nelsonic · 2019-12-17T11:52:15Z

@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 · 2020-01-07T11:18:03Z

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 #7 (comment)

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

SimonLab · 2020-01-07T14:16:54Z

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 · 2020-01-07T22:50:36Z

"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 #7 (comment).

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 · 2020-01-08T08:25:59Z

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

Created new Heroku app and added the buildpack
Created an empty static.json file
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/

Heroku buildpack static #3

SimonLab added enhancement New feature or request question Further information is requested labels Dec 17, 2019

SimonLab mentioned this issue Dec 17, 2019

Search and Apply Lighthouse suggestions #7

Open

SimonLab added a commit that referenced this issue Jan 7, 2020

create simple http server with nodejs, #3

77595c1

SimonLab mentioned this issue Jan 7, 2020

PWA Elm application #6

Closed

SimonLab added a commit that referenced this issue Jan 8, 2020

create static.json file for buildpack, #3 (comment)

977c16f

SimonLab added a commit that referenced this issue Jan 8, 2020

add https_only configuration, #3 (comment)

9292f26

SimonLab added a commit that referenced this issue Jan 8, 2020

update config to avoid 404 with nginx, #3

0377f29

SimonLab added a commit that referenced this issue Jan 8, 2020

update root directory to . for nginx, #3

683e9d9

SimonLab added a commit that referenced this issue Jan 8, 2020

update Readme with steps, #3

ae5ea4b

SimonLab mentioned this issue Jan 8, 2020

Heroku buildpack static #3 #10

Merged

nelsonic added a commit that referenced this issue Jan 8, 2020

Merge pull request #10 from dwyl/heroku-buildpack-static-#3

7ab35e3

Heroku buildpack static #3

SimonLab mentioned this issue Feb 14, 2020

initialise elm application with routes dwyl/app-mvp-elm#2

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Where to host Elm application? #3

Where to host Elm application? #3

SimonLab commented Dec 17, 2019 •

edited

Loading

nelsonic commented Dec 17, 2019

SimonLab commented Jan 7, 2020 •

edited

Loading

SimonLab commented Jan 7, 2020

SimonLab commented Jan 7, 2020 •

edited

Loading

SimonLab commented Jan 8, 2020 •

edited

Loading

Where to host Elm application? #3

Where to host Elm application? #3

Comments

SimonLab commented Dec 17, 2019 • edited Loading

nelsonic commented Dec 17, 2019

SimonLab commented Jan 7, 2020 • edited Loading

SimonLab commented Jan 7, 2020

SimonLab commented Jan 7, 2020 • edited Loading

SimonLab commented Jan 8, 2020 • edited Loading

SimonLab commented Dec 17, 2019 •

edited

Loading

SimonLab commented Jan 7, 2020 •

edited

Loading

SimonLab commented Jan 7, 2020 •

edited

Loading

SimonLab commented Jan 8, 2020 •

edited

Loading