alt-text-editor

Free Ebook Foundation alt text PG react app

Table of Contents

1. Setting up React app
2. NodeJS proxy server and how it works with React and Vite

Setting up React app

I'm using NodeJS v22.13.1 and npm v10.9.2 for this project. Older versions shouldn't matter unless they're really old but if there's issues compiling or executing I'm putting this here for reference. I'm not using Docker because proxy server communication doesn't work between containers, so you'll have to run it locally.

1. Clone the repo and open terminal/CLI ("terminal 1") at alt-text-react-app directory. Make sure you have NodeJS and npm installed.
   1. Run npm install in terminal 1.
2. Open separate terminal ("terminal 2") at alt-text-test-server directory.
   1. Run node webserver.js in terminal 2.
3. Run npm run dev in terminal 1.
4. You should now be able to access the React app at http://localhost:5173/ on your machine in a browser.

NodeJS proxy server and how it works with React and Vite

You can ignore the .csv file and the Python script with env dependency files. That was just to download the images to host locally all at once.

index.html is the Winnie the pooh book, and webserver.js is the NodeJS server, which hosts the page and the static image files at http://localhost:8000/ when running.

The React app uses the vite.config.js file to proxy http://localhost:8000/ like subpages of the localhost port that it's running on. The node webserver hosts the html file at '/iframe', which the React app is redirected to by the config file when it requests it. This eliminates CORS issues with being able to access the DOM of Winnie the Pooh.

This doesn't work with Docker because they can only proxy within their own contains, not between. It also means that this way of testing only works on the dev build, not the production build, because the vite.config.js file isn't included (like package.json), hence npm run dev instead of npm run build and serve -s dist.