Skip to content

List of Films and TV - a PWA written using React/TS and The Movie Database API

Notifications You must be signed in to change notification settings

jflanaganuk/lofat

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

LOFAT

List of Films and TV - Powered by The Movie Database

Installable as a PWA

Click for a live example!

Current Lighthouse Scores

Mobile - incognito

Desktop - incognito

Development steps

Development has been greatly simplified

  1. If this is the first time using the repo run npm install
  2. Run npm run watch:develop to start local development

Server Deployment steps

If you wish to run this on your own server copy the repo and do the following:

  1. Copy env.json.example to env.json
  2. Add your api key to env.json
  3. For first time use, run npm install
  4. For subsequent use, run npm run fetch
  5. Files then are written to public/outputs/ once per day (you may need to create this folder)

Serve html files

  1. Html and client side js is stored inside public
  2. In the local repo you will need to update the url stored in env.ts

Notes about AWS image params

  • You can set the desired quality of the images by adding @._V1_UX1000_CR0,6,1000,1375.jpg to the end of the request url.
  • The parameters appear to be as follows (after randomly testing):
  • UX How high res the image should be (assuming dpi)
  • CR0,6 appears to control cropping in some way, increasing the second number moves the image down?
  • The final two appear to be setting the aspect ratio, I have found best results to be to have the first number match the UX number (otherwise you end up with white where the image does not fit or a cropped image)

Apache config with React Router

Because react router pushes /the-new-page to the end of the URL, if you refresh the link, apache does not know where to send you.

The solution seems to be to get the app to redirect you back to index.html always so that the router can take care of it.

The following URLs helped to solve this issue:

Editing the .htaccess correctly

Knowing which .conf file to edit

Thanks to this the following link should take you to the film "nobody"

Apache CORS Settings

Solved by following: this guide

And adding

Header set Access-Control-Allow-Origin "*"

to the .conf and restarting

Apache settings for CacheMeIfYouCan

Setting the following in 000-default-le-ssl.conf

ProxyPreserveHost On
ProxyPass /ext http://localhost:4000
ProxyPassReverse /ext http://localhost:4000

Will make it so any requests to https://www.uploadr.co.uk/ext are sent to http://localhost:4000 (Where CacheMeIfYouCan is running)

About

List of Films and TV - a PWA written using React/TS and The Movie Database API

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published