search

ProtonMail / WebClients

Monorepo hosting the proton web clients
GNU General Public License v3.0
4.36k stars 555 forks source link

[question] How do I build v4 for local run? #166

Closed vladimiry closed 4 years ago

vladimiry commented 4 years ago

It's currently in beta, but I thought I better be prepared in advance.

And a few more related questions:

dhoko commented 4 years ago

:wave:

Is the final Rest API used for v4 going to have breaking changes?

Yes it's the same API.

Is the v3 WebClient going to be functional for a while after the final v4 goes live

Yes, it's going to be available on https://old.protonmail.com

What's new with v4:

tl;dr No breaking changes. You will still be able to run the v3.

vladimiry commented 4 years ago

Thanks for the details. So I will have time for integrating v4 client in https://github.com/vladimiry/ElectronMail since even after the final v4 goes live the API deployed on https://mail.protonmail.com is going to be compatible with v3 client for a while at least, that's good to know.

But one question remains unanswered:

How do I build v4 for local run?

I mean is there a single CLI command I could run to build the same client as deployed here https://beta.protonmail.com/? I understand that there might be no such command yet (or it's not finalized yet), let's keep the issue open if so.

dhoko commented 4 years ago

For the v4, the branch is now available https://github.com/ProtonMail/WebClient/commits/v4 To run the v4 as it's on beta, from your localhost it's a bit complex but it can be done.

  1. Clone WebClient with branch v4 (+ install)
  2. Clone proton-mail-settings
  3. Follow https://github.com/ProtonMail/proton-mail-settings#how-to-dev-2
vladimiry commented 4 years ago

Thanks for the assistance. The final goal is to get a completely static v4 client bundle. So I think I better close this issue for now and get back to the topic when v4 client gets closer to the final state.

dhoko commented 4 years ago

The bundle will be similar as what you already have today.

On the beta we have:

When we build this branch v4, we move the bundle from contacts/mail-settings inside a dir contacts or and settings.

ex:

dist
├── 10.3df4fb0f42.chunk.js
├── 10.3df4fb0f42.chunk.js.map
├── 11.dfb80d207d.chunk.js
├── 11.dfb80d207d.chunk.js.map
├── 2.f36efdd495.css
├── 9.dfb709a299.chunk.js
├── 9.dfb709a299.chunk.js.map
├── appLazy.module.f2fb273b2f.chunk.js
├── appLazy.module.f2fb273b2f.chunk.js.map
├── assets
│   ├── bf
│   ├── changelog.tpl.html
│   ├── errors
│   ├── favicons
│   ├── fonts
│   ├── host.png
│   ├── img
│   ├── no-result-folder.svg
│   ├── no-result-inbox.svg
│   ├── no-result-search.svg
│   ├── no-results-found.svg
│   ├── sale
│   ├── selected-conversation-many.svg
│   ├── selected-conversation-single.svg
│   ├── selected-label-many.svg
│   ├── selected-label-single.svg
│   ├── small-spinner.gif
│   ├── v4-onboad
│   ├── valence.png
│   ├── version.json
│   └── welcome-message.svg
├── contacts
│   ├── 10.c500f9e0.chunk.js
│   ├── 10.c500f9e0.chunk.js.map
│   ├── 11.6e754a52.chunk.js
│   ├── 11.6e754a52.chunk.js.map
│   ├── 12.2de2dcec.chunk.js
│   ├── 12.2de2dcec.chunk.js.map
│   ├── 13.26218c77.chunk.js
│   ├── 13.26218c77.chunk.js.map
│   ├── 14.4232a5ec.chunk.js
│   ├── 14.4232a5ec.chunk.js.map
│   ├── 15.609df72e.chunk.js
│   ├── 15.609df72e.chunk.js.map
│   ├── 16.012fa836.chunk.js
│   ├── 16.012fa836.chunk.js.map
│   ├── 17.bdebd471.chunk.js
│   ├── 17.bdebd471.chunk.js.map
│   ├── 18.08ebfe2c.chunk.js
│   ├── 18.08ebfe2c.chunk.js.map
│   ├── 19.16f6169c.chunk.js
│   ├── 19.16f6169c.chunk.js.map
│   ├── 20.d736650b.chunk.js
│   ├── 20.d736650b.chunk.js.map
│   ├── 21.10671e7d.chunk.js
│   ├── 21.10671e7d.chunk.js.map
│   ├── 22.a56c611e.chunk.js
│   ├── 22.a56c611e.chunk.js.map
│   ├── 23.66ca65c5.chunk.js
│   ├── 23.66ca65c5.chunk.js.map
│   ├── 24.30469ae3.chunk.js
│   ├── 24.30469ae3.chunk.js.map
│   ├── 25.ac5f5d69.chunk.js
│   ├── 25.ac5f5d69.chunk.js.map
│   ├── 26.b6da30c6.chunk.js
│   ├── 26.b6da30c6.chunk.js.map
│   ├── 27.1e187bdf.chunk.js
│   ├── 27.1e187bdf.chunk.js.map
│   ├── 28.1dbedd03.chunk.js
│   ├── 28.1dbedd03.chunk.js.map
│   ├── 29.57a08404.chunk.js
│   ├── 29.57a08404.chunk.js.map
│   ├── 2.d15a0cdf.css
│   ├── 30.051b1870.chunk.js
│   ├── 30.051b1870.chunk.js.map
│   ├── 31.94cd7924.chunk.js
│   ├── 31.94cd7924.chunk.js.map
│   ├── 32.c82c4169.chunk.js
│   ├── 32.c82c4169.chunk.js.map
│   ├── 33.fec249b2.chunk.js
│   ├── 33.fec249b2.chunk.js.map
│   ├── 34.091970ef.chunk.js
│   ├── 34.091970ef.chunk.js.map
│   ├── 35.990b39c7.chunk.js
│   ├── 35.990b39c7.chunk.js.map
│   ├── 36.6bd0e35d.chunk.js
│   ├── 36.6bd0e35d.chunk.js.map
│   ├── 37.99015436.chunk.js
│   ├── 37.99015436.chunk.js.map
│   ├── 38.41c9f701.chunk.js
│   ├── 38.41c9f701.chunk.js.map
│   ├── 3.8cc6bd05.chunk.js
│   ├── 3.8cc6bd05.chunk.js.map
│   ├── 39.459f1e59.chunk.js
│   ├── 39.459f1e59.chunk.js.map
│   ├── 40.628e857b.chunk.js
│   ├── 40.628e857b.chunk.js.map
│   ├── 41.184cdca1.chunk.js
│   ├── 41.184cdca1.chunk.js.map
│   ├── 4.289eac7a.chunk.js
│   ├── 4.289eac7a.chunk.js.map
│   ├── 42.e893aea6.chunk.js
│   ├── 42.e893aea6.chunk.js.map
│   ├── 43.a458ed20.chunk.js
│   ├── 43.a458ed20.chunk.js.map
│   ├── 44.37493299.chunk.js
│   ├── 44.37493299.chunk.js.map
│   ├── 45.4deed603.chunk.js
│   ├── 45.4deed603.chunk.js.map
│   ├── 46.4c1a2f55.chunk.js
│   ├── 46.4c1a2f55.chunk.js.map
│   ├── 47.26991b7c.chunk.js
│   ├── 47.26991b7c.chunk.js.map
│   ├── 48.e415b576.chunk.js
│   ├── 48.e415b576.chunk.js.map
│   ├── 49.59a11d7d.chunk.js
│   ├── 49.59a11d7d.chunk.js.map
│   ├── 50.56cee7c7.chunk.js
│   ├── 50.56cee7c7.chunk.js.map
│   ├── 51.eb96219e.chunk.js
│   ├── 51.eb96219e.chunk.js.map
│   ├── 52.896d8463.chunk.js
│   ├── 52.896d8463.chunk.js.map
│   ├── 5.34349e75.chunk.js
│   ├── 5.34349e75.chunk.js.map
│   ├── 53.6e331f91.chunk.js
│   ├── 53.6e331f91.chunk.js.map
│   ├── 54.752e1167.chunk.js
│   ├── 54.752e1167.chunk.js.map
│   ├── 55.ac9be0c7.chunk.js
│   ├── 55.ac9be0c7.chunk.js.map
│   ├── 56.92580cea.chunk.js
│   ├── 56.92580cea.chunk.js.map
│   ├── 57.ba7fd9cf.chunk.js
│   ├── 57.ba7fd9cf.chunk.js.map
│   ├── 58.fe25594a.chunk.js
│   ├── 58.fe25594a.chunk.js.map
│   ├── 59.fbd3d022.chunk.js
│   ├── 59.fbd3d022.chunk.js.map
│   ├── 60.f764d01c.chunk.js
│   ├── 60.f764d01c.chunk.js.map
│   ├── 61.9d38de72.chunk.js
│   ├── 61.9d38de72.chunk.js.map
│   ├── 62.ac5ad630.chunk.js
│   ├── 62.ac5ad630.chunk.js.map
│   ├── 63.81184869.chunk.js
│   ├── 63.81184869.chunk.js.map
│   ├── 64.d08b3883.chunk.js
│   ├── 64.d08b3883.chunk.js.map
│   ├── 6.87e23fae.chunk.js
│   ├── 6.87e23fae.chunk.js.map
│   ├── 7.ce6bb801.chunk.js
│   ├── 7.ce6bb801.chunk.js.map
│   ├── 8.4fb07aef.chunk.js
│   ├── 8.4fb07aef.chunk.js.map
│   ├── 9.947f57b2.chunk.js
│   ├── 9.947f57b2.chunk.js.map
│   ├── assets
│   ├── elliptic.min.f51c1e772d034a2c4a71cf1348964ff96328baf5.js
│   ├── index.d03ba53b.js
│   ├── index.d03ba53b.js.map
│   ├── index.d15a0cdf.css
│   ├── index.html
│   ├── openpgp.min.2c5441117ed3564e9f573027fe36e9cedc38d4f1.js
│   ├── openpgp.min.compat.a1282ef3f444113a75dc6a23cd99a9122172abcd.js
│   ├── openpgp.worker.min.7cdae62c2f3f1f2053a513bd2b39193f48a77ee8.js
│   ├── unsupported.f39b7e73.js
│   ├── unsupported.f39b7e73.js.map
│   ├── vendors~index.ce93c635.chunk.js
│   └── vendors~index.ce93c635.chunk.js.map
├── elliptic.min.f51c1e772d034a2c4a71cf1348964ff96328baf5.js
├── form
│   ├── assets
│   ├── main.css
│   ├── main.ie11.js
│   ├── main.ie11.js.map
│   ├── main.js
│   └── main.js.map
├── .htaccess
├── i18n
│   ├── ca_ES.json
│   ├── cs_CZ.json
│   ├── de_DE.json
│   ├── es_ES.json
│   ├── fr_FR.json
│   ├── hr_HR.json
│   ├── id_ID.json
│   ├── it_IT.json
│   ├── ja_JP.json
│   ├── nl_NL.json
│   ├── pl_PL.json
│   ├── pt_BR.json
│   ├── pt_PT.json
│   ├── ro_RO.json
│   ├── ru_RU.json
│   ├── tr_TR.json
│   ├── uk_UA.json
│   ├── zh_CN.json
│   └── zh_TW.json
├── index.6d2af34837.js
├── index.6d2af34837.js.map
├── index.f36efdd495.css
├── index.html
├── manifest.json
├── openpgp.min.2c5441117ed3564e9f573027fe36e9cedc38d4f1.js
├── openpgp.min.compat.a1282ef3f444113a75dc6a23cd99a9122172abcd.js
├── openpgp.worker.min.7cdae62c2f3f1f2053a513bd2b39193f48a77ee8.js
├── robots.txt
├── settings
│   ├── 10.c500f9e0.chunk.js
│   ├── 10.c500f9e0.chunk.js.map
│   ├── 11.6e754a52.chunk.js
│   ├── 11.6e754a52.chunk.js.map
│   ├── 12.2de2dcec.chunk.js
│   ├── 12.2de2dcec.chunk.js.map
│   ├── 13.26218c77.chunk.js
│   ├── 13.26218c77.chunk.js.map
│   ├── 14.4232a5ec.chunk.js
│   ├── 14.4232a5ec.chunk.js.map
│   ├── 15.609df72e.chunk.js
│   ├── 15.609df72e.chunk.js.map
│   ├── 16.012fa836.chunk.js
│   ├── 16.012fa836.chunk.js.map
│   ├── 17.bdebd471.chunk.js
│   ├── 17.bdebd471.chunk.js.map
│   ├── 18.08ebfe2c.chunk.js
│   ├── 18.08ebfe2c.chunk.js.map
│   ├── 19.16f6169c.chunk.js
│   ├── 19.16f6169c.chunk.js.map
│   ├── 20.d736650b.chunk.js
│   ├── 20.d736650b.chunk.js.map
│   ├── 21.10671e7d.chunk.js
│   ├── 21.10671e7d.chunk.js.map
│   ├── 22.a56c611e.chunk.js
│   ├── 22.a56c611e.chunk.js.map
│   ├── 23.66ca65c5.chunk.js
│   ├── 23.66ca65c5.chunk.js.map
│   ├── 2.3c77aab6.css
│   ├── 24.30469ae3.chunk.js
│   ├── 24.30469ae3.chunk.js.map
│   ├── 25.ac5f5d69.chunk.js
│   ├── 25.ac5f5d69.chunk.js.map
│   ├── 26.b6da30c6.chunk.js
│   ├── 26.b6da30c6.chunk.js.map
│   ├── 27.1e187bdf.chunk.js
│   ├── 27.1e187bdf.chunk.js.map
│   ├── 28.1dbedd03.chunk.js
│   ├── 28.1dbedd03.chunk.js.map
│   ├── 29.57a08404.chunk.js
│   ├── 29.57a08404.chunk.js.map
│   ├── 30.051b1870.chunk.js
│   ├── 30.051b1870.chunk.js.map
│   ├── 31.94cd7924.chunk.js
│   ├── 31.94cd7924.chunk.js.map
│   ├── 32.c82c4169.chunk.js
│   ├── 32.c82c4169.chunk.js.map
│   ├── 33.fec249b2.chunk.js
│   ├── 33.fec249b2.chunk.js.map
│   ├── 34.091970ef.chunk.js
│   ├── 34.091970ef.chunk.js.map
│   ├── 35.990b39c7.chunk.js
│   ├── 35.990b39c7.chunk.js.map
│   ├── 36.6bd0e35d.chunk.js
│   ├── 36.6bd0e35d.chunk.js.map
│   ├── 37.99015436.chunk.js
│   ├── 37.99015436.chunk.js.map
│   ├── 38.41c9f701.chunk.js
│   ├── 38.41c9f701.chunk.js.map
│   ├── 3.8cc6bd05.chunk.js
│   ├── 3.8cc6bd05.chunk.js.map
│   ├── 39.459f1e59.chunk.js
│   ├── 39.459f1e59.chunk.js.map
│   ├── 40.628e857b.chunk.js
│   ├── 40.628e857b.chunk.js.map
│   ├── 41.184cdca1.chunk.js
│   ├── 41.184cdca1.chunk.js.map
│   ├── 4.289eac7a.chunk.js
│   ├── 4.289eac7a.chunk.js.map
│   ├── 42.e893aea6.chunk.js
│   ├── 42.e893aea6.chunk.js.map
│   ├── 43.a458ed20.chunk.js
│   ├── 43.a458ed20.chunk.js.map
│   ├── 44.37493299.chunk.js
│   ├── 44.37493299.chunk.js.map
│   ├── 45.4deed603.chunk.js
│   ├── 45.4deed603.chunk.js.map
│   ├── 46.4c1a2f55.chunk.js
│   ├── 46.4c1a2f55.chunk.js.map
│   ├── 47.26991b7c.chunk.js
│   ├── 47.26991b7c.chunk.js.map
│   ├── 48.e415b576.chunk.js
│   ├── 48.e415b576.chunk.js.map
│   ├── 49.59a11d7d.chunk.js
│   ├── 49.59a11d7d.chunk.js.map
│   ├── 50.56cee7c7.chunk.js
│   ├── 50.56cee7c7.chunk.js.map
│   ├── 51.eb96219e.chunk.js
│   ├── 51.eb96219e.chunk.js.map
│   ├── 52.896d8463.chunk.js
│   ├── 52.896d8463.chunk.js.map
│   ├── 5.34349e75.chunk.js
│   ├── 5.34349e75.chunk.js.map
│   ├── 53.6e331f91.chunk.js
│   ├── 53.6e331f91.chunk.js.map
│   ├── 54.752e1167.chunk.js
│   ├── 54.752e1167.chunk.js.map
│   ├── 55.ac9be0c7.chunk.js
│   ├── 55.ac9be0c7.chunk.js.map
│   ├── 56.92580cea.chunk.js
│   ├── 56.92580cea.chunk.js.map
│   ├── 57.ba7fd9cf.chunk.js
│   ├── 57.ba7fd9cf.chunk.js.map
│   ├── 58.fe25594a.chunk.js
│   ├── 58.fe25594a.chunk.js.map
│   ├── 59.fbd3d022.chunk.js
│   ├── 59.fbd3d022.chunk.js.map
│   ├── 60.f764d01c.chunk.js
│   ├── 60.f764d01c.chunk.js.map
│   ├── 61.9d38de72.chunk.js
│   ├── 61.9d38de72.chunk.js.map
│   ├── 62.ac5ad630.chunk.js
│   ├── 62.ac5ad630.chunk.js.map
│   ├── 63.81184869.chunk.js
│   ├── 63.81184869.chunk.js.map
│   ├── 64.d08b3883.chunk.js
│   ├── 64.d08b3883.chunk.js.map
│   ├── 65.ac9994d7.chunk.js
│   ├── 65.ac9994d7.chunk.js.map
│   ├── 66.40b07f5b.chunk.js
│   ├── 66.40b07f5b.chunk.js.map
│   ├── 67.0f903bad.chunk.js
│   ├── 67.0f903bad.chunk.js.map
│   ├── 6.87e23fae.chunk.js
│   ├── 6.87e23fae.chunk.js.map
│   ├── 68.f86d69bf.chunk.js
│   ├── 68.f86d69bf.chunk.js.map
│   ├── 69.9121dde8.chunk.js
│   ├── 69.9121dde8.chunk.js.map
│   ├── 70.6c6994c1.chunk.js
│   ├── 70.6c6994c1.chunk.js.map
│   ├── 71.5142c90a.chunk.js
│   ├── 71.5142c90a.chunk.js.map
│   ├── 72.7be84f92.chunk.js
│   ├── 72.7be84f92.chunk.js.map
│   ├── 73.07f5c7b2.chunk.js
│   ├── 73.07f5c7b2.chunk.js.map
│   ├── 74.cab925e1.chunk.js
│   ├── 74.cab925e1.chunk.js.map
│   ├── 7.ce6bb801.chunk.js
│   ├── 7.ce6bb801.chunk.js.map
│   ├── 8.4fb07aef.chunk.js
│   ├── 8.4fb07aef.chunk.js.map
│   ├── 9.947f57b2.chunk.js
│   ├── 9.947f57b2.chunk.js.map
│   ├── assets
│   ├── elliptic.min.f51c1e772d034a2c4a71cf1348964ff96328baf5.js
│   ├── index.3c77aab6.css
│   ├── index.b598ad6c.js
│   ├── index.b598ad6c.js.map
│   ├── index.html
│   ├── openpgp.min.2c5441117ed3564e9f573027fe36e9cedc38d4f1.js
│   ├── openpgp.min.compat.a1282ef3f444113a75dc6a23cd99a9122172abcd.js
│   ├── openpgp.worker.min.7cdae62c2f3f1f2053a513bd2b39193f48a77ee8.js
│   ├── unsupported.61f39788.js
│   ├── unsupported.61f39788.js.map
│   ├── vendors~index.739b0603.chunk.js
│   └── vendors~index.739b0603.chunk.js.map
├── vendor2Lazy.module.786ed32482.chunk.js
├── vendorEncoder.module.bb43b25289.chunk.js
├── vendorLazy.module.5ed47b8543.chunk.js
├── vendors~appLazy.module.6ef18c617b.chunk.js
├── vendors~index.a8538b6241.chunk.js
├── vendors~vendor2Lazy.module.0c26e9f4d2.chunk.js
└── vendors~vendorLazy.module.cc3a097dff.chunk.js

15 directories, 359 files
vladimiry commented 4 years ago

I got all 3 projects built, then I put proton-mail-settings and proton-contacts under the folders in webclient's bundle as shown above and got it working as a static bundle.

For proton-mail-settings and and proton-contacts I created the appConfig.json file:

{
    "electron-mail:app.protonmail.ch": {
        "api": "https://app.protonmail.ch/api"
    }
}

And then triggered the build running npm run build -- --api electron-mail:app.protonmail.ch command. This build task generates the src/app/config.ts file all the constants in which seem to be fine except these two:

@dhoko do I need to worry about these two constants? Maybe I need to put more props to appConfig.json so these constants get filled?

vladimiry commented 4 years ago

Reopening as CLIENT_SECRET/SECURE_URL constants filling importance is unclear (question in the previous message).

dhoko commented 4 years ago

:wave: Sorry didn't see your message. Secure URL is the one we use for our iframes -> ex when we load the captcha on the signup etc.

We should add this inside the readme yes.

{
    "electron-mail:app.protonmail.ch": {
        "api": "https://app.protonmail.ch/api",
+       "secure": "https://secure.protonmail.com"
    }
}

For the CLIENT_SECRET we don't need it for the app :)

vladimiry commented 4 years ago

4.0.0-beta5 is live but the code update is not published, please do.

vladimiry commented 4 years ago

Besides the proton-calendar project is not available in https://github.com/ProtonMail/ Where do I get it?

dhoko commented 4 years ago

4.0.0-beta5 is live but the code update is not published, please do.

:heavy_check_mark: voilà it's done ;)

For proton-calendar voilà, the source is available https://github.com/ProtonMail/proton-calendar We don't tag it yet.

vladimiry commented 4 years ago

Thanks, it's a lot of new stuff to dig into :)

vladimiry commented 4 years ago

Please publish 4.0.0-beta7 / 01557780595cd492e42ade9a388059c59b13fc42

vladimiry commented 4 years ago

I see beta 7 got published.

I would like to add a note regarding building the apps, which might be helpful for someone who also will be preparing the apps for the local run. I wrote above that I use similar appConfig.json file:

{
    "electron-mail:app.protonmail.ch": {
        "api": "https://app.protonmail.ch/api",
        "secure": "https://secure.protonmail.com"
    }
}

But it should also include the app-specific clientId value (possible values at the moment: WebMailSettings, WebContacts, WebCalendar)

{
    "appConfig": {
        "clientId": "WebCalendar"
    },
    "electron-mail:app.protonmail.ch": {
        "api": "https://app.protonmail.ch/api",
        "secure": "https://secure.protonmail.com"
    }
}

If you don't put the clientId value the app still works but something will be missing. For example, without proper clientId value the x-pm-appversion header will be wrong/general and I figured that then you will be missing live calendar updates. Means /api/events/* API response won't include the calendar-specific properties, like CalendarEvents or CalendarAlarms. I guess it's done that way in order to improve the performance and reduce traffic by filtering which values to put in /api/events/* response for specific apps depending on the x-pm-appversion header.

dhoko commented 4 years ago

Types available: Web -> ProtonMail WebClient WebMailSettings -> ProtonMail Settings WebCalendar -> ProtonCalendar WebContacts -> ProtonContacts WebVPNSettings -> ProtonVPN Settings

vladimiry commented 4 years ago

Web -> ProtonMail WebClient

Yep I better specify this value too in the config file, but If I get it right:

dhoko commented 4 years ago

hahaha we don't even use the config :man_facepalming: For the WebClient it's not an issue, what's inside the key appConfig is only for apps !Angular.