Theme creation: Improve theme creation process; hosting WIP themes (was: Loading from local fails)

[tordans]

I found a different solution now, but still wanted to document this. Should this be a general problem, the docs should be updated IMO. I am using Chrome on MacOS.

---

I followed the guide in theme-template.json

"To actually load your theme: on linux: run a local webserver (e.g. webfsd) and go to https://mapcomplete.osm.be/theme?userlayout=http://127.0.0.1:8080/path-to-your-theme.json",

1. I copied the bookcase-theme in a tmp-folder and remerged the layer.

2. I ran npx serve ./ in the tmp-folder

3. Check: I can view the json at http://192.168.178.97:57465/my-theme.json

4. I open https://mapcomplete.osm.be/theme?userlayout=http://192.168.178.97:57465/street-pumps.json as suggested by the docs

5. => I get the error

   http://192.168.178.97:57465/street-pumps.json is invalid - probably not found or invalid JSON: [object ProgressEvent]

   

The same theme-file does work with the base64 option.

---

This is related to https://github.com/pietervdvn/MapComplete/issues/707.

[pietervdvn]

Hi,

The reason your local file failed, is because of the mixed-content: your local server serves over http, whereas mapcomplete is served via https.

[tordans]

A new idea to improve this process:

1. Setup Netlify branch deployment
2. Every contributor can create her theme in a new branch, which gets auto deployed and has a public URL
3. Use this branch-deploy-theme-url as a theme-source for the main website

This would be a much improved version to the github pages or gist workflow, since it would allow everyone to test new themes without the need to first merge things in some main branch. Or to work around the hassle of caching with gist and other places.

Netlify offers a OpenSource plan under conditions https://www.netlify.com/legal/open-source-policy/#:~:text=Netlify%20loves%20open%20source!,the%20community%20around%20that%20software.

We could set this up for https://github.com/tordans/MapComplete-ThemeHelper first and see how that goes…

[RobinLinde]

Each branch is currently being deployed to github.io through this workflow already, but deployment through Netlify (or other alternatives), would probably have better performance than the current setup. (In short: 👍)

[eMerzh]

Each branch is currently being deployed to github.io through this workflow already, but deployment through Netlify (or other alternatives), would probably have better performance than the current setup. (In short: 👍)

the improvement here would be that even non-member contributors could deploy a preview branch ... so it might help the overall contributions

[RobinLinde]

Just tested out both Netlify and Vercel on my fork, seems that they're both capable of building and publishing in 10-15 minutes, which also seems like an improvement over the current workflow.

[RobinLinde]

As mentioned in https://github.com/pietervdvn/MapComplete/issues/1142#issuecomment-1384097770, Both Vercel and Netlify are easy to setup, just making sure the correct build command (npm run prepare-deploy) and output folder (dist) have been selected. For now on my fork Vercel is the only one enabled since it has 6000 build minutes by default, but Netlify with Open Source Plan would also work

Steps for deployment

As easy as creating a new site/project, selecting repo and changing 1 or 2 settings

1. Import project
2. Choose GitHub repo
3. Change deploy command (npm run prepare-deploy) (maybe change branch to master)

[thibaultmol]

@pietervdvn this can be closed I suppose?

[pietervdvn]

Indeed! With the new studio and Hetzner host this is implemented.