React To Flatpak: How to Package Your React App as a Flatpak
If you found this helpful, please subscribe!
In my experience trying to do this, I've found this process filled with errors almost every step of the way, so I tried to put together the easiest way to accomplish this. Absolutely feel free to comment with any questions or any troubles you've run in to. I'll try to look at the comments regularly.
The purpose of this video is to show you how you can package your React app, which is usually a web app, into a regular desktop application, and then into a Flatpak that you can share with others or publish to Flathub.
Links Mentioned in the Video:
https://github.com/endlessm/electron-...
https://flatpak.org/setup/
https://docs.flathub.org/docs/for-app...
GitHub For Reference:
I'll provide two links. The first link is the repository of my project where I'll have main.js, package.js, etc that you can copy from if needed, and the second link is for reference if you actually want to publish your Flatpak to Flathub.
https://github.com/YomenT/sample-reac...
https://github.com/flathub/com.visual...
Commands Used in Video: These are commands that I've run in the video, but you might need some more if; especially if you don't already have Flatpak or flatpack-builder installed. You can find those commands in the links/documentation provided above.
-npm install electron
-npm run electron
-npm run build
-npm install -g electron-installer-flatpak
-electron-packager . app --platform linux --arch x64 --out dist/
-flatpak run org.flatpak.Builder --force-clean --sandbox --user --install --install-deps-from=flathub --ccache --mirror-screenshots-url=https://dl.flathub.org/media/ --repo=repo builddir com.CompanyName.AppName.json
-flatpak run com.CompanyName.AppName