Fix client prod build #11

[tchojnacki]

Base path ustawiony zgodnie z podpowiedziami w issue #11. Na produkcji poprawnie przełącza na URL, ale bez wrzucenia na Heroku nie można w 100% zobaczyć czy działa, bo SOP poprawnie blokuje requesty localhost:4000 -> coderscamp2021-hk-fullstack.herokuapp.com.

---

Co zabawne na devie też jest błąd CSP, ale to nie kwestia tego PR (bo przed zmianami też były blokowane, nie ma regresji), napisałem na Discordzie co jest według mnie potencjalnym problemem, ale jeszcze przekopiuję tutaj żeby się nie zgubiło:

Tu nie powinno być === zamiast !==? Bo teraz pozwala na requesty z localhost na produkcji, a devie nie.

Jak coś to mogę dodać tą zmianę do tego brancha, żeby nie robić osobnego issue i PR na dosłownie jeden znak zmian.

EDIT: Poprawione.

---

Użycie import.meta popsuło testy i Storybooka, bo Vite na sztywno podmienia wszystkie import.meta na odpowiednie wartości, więc wszystko co nie przejdzie przez Vite będzie miało problem.

W Storybooku, proste rozwiązanie w stylu "if it works then it works" to podmiana każdego import.meta.PROD na false.

Co do Jesta, jedyny rekomendowany przez twórców ts-jest sposób to uruchomienie Jesta w trybie ESM, co jest eksperymentalne i ma spore problemy z mockami (i z tego co testowałem typizacją również). Rozwiązanie z Babelem podobne do Storybooka nie przejdzie, bo o ile ts-jest pozwala na dodanie pluginów do babela, to wykonują się one już na JS (a błąd wywala jeszcze w TS). Jedyne alternatywne rozwiązanie w całym internecie to wyodrębnienie kodu z import.meta do osobnego pliku i mockowanie go w każdym teście. Ani trochę mi się to nie podoba, także jak ktoś ma jakikolwiek inny pomysł z chęcią przyjmę, ale jest to dość znany problem (przeszedłem dziś przez jakieś 15-20 issue na GitHubie) i wychodzi na to, że bez sensownego rozwiązania.

[codecov]

Codecov Report

Merging #29 (ced35ed) into main (5b7115b) will increase coverage by 0.12%.
The diff coverage is 83.33%.

@@            Coverage Diff             @@
##             main      #29      +/-   ##
==========================================
+ Coverage   84.85%   84.98%   +0.12%     
==========================================
  Files          63       63              
  Lines         581      586       +5     
  Branches       59       60       +1     
==========================================
+ Hits          493      498       +5     
  Misses         82       82              
  Partials        6        6              

Flag	Coverage Δ
client	51.21% <100.00%> (+6.77%)	⬆️
server	87.52% <0.00%> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files	Coverage Δ
packages/server/src/config/setup/SecuritySetup.ts	36.36% <0.00%> (ø)
packages/client/src/App.tsx	100.00% <100.00%> (ø)

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 5b7115b...ced35ed. Read the comment docs.

[hkawalek]

Z tego co widzę vite wspiera podmianę env w stringach, więc można nasz problem rozwiązać w 2 linijkach bez potrzeby dodatkowych pluginów etc.

const mode = `import.meta.env.MODE` as string;
const isProduction = mode === `"production"`;

[tchojnacki]

Z tego co widzę vite wspiera podmianę env w stringach, więc można nasz problem rozwiązać w 2 linijkach bez potrzeby dodatkowych pluginów etc.

const mode = `import.meta.env.MODE` as string;
const isProduction = mode === `"production"`;

O, to też nie idealne rozwiązanie, ale na pewno 100x lepsze, popróbuję 👍

[hkawalek]

👍🏻