Ionic React Static web site?

Is it possible to export a project made with Ionic React to a static website?
I’m using my project in firebase, but I need to run it on my Apache server, and I didn’t understand this part in the documentation.

I’m a beginner on the subject … is it a stupid question?

Yes, it’s possible. You’ll want to use it with Gatsby or Next.js. Note: Ionic React doesn’t fully support Server Side Rendering just yet but we are working on making it work well with Next.js’s SSR first

If you run ionic build it will generate a build folder with all the static files. You just need to upload that folder to your web server.

Hi,

I’m having the same question. I’m new to Ionic (disclaimer).

My static website has a single page with some nifty animations (link here, if you care to take a look), which I deployed in the past as a website (native html5/javascript/css development) and as an Android app, built using phonegap. I got some feedback that performance of the app was bad, so I’m taking my bets that a refactoring using ionic would be an improvement AND provide me with a more consistent process to deploy to all targets.

I’ve installed ionic v6.5 + react + capacitor. I chose react over angular for no particular reason and capacitor over cordova because it was presented as an upgrade of the latter.

For experimenting, I’ve started a project using the blank template. Serve and build work fine. In Android Studio, I’ve been able to build a signed APK. So far so good.

But I’m completely puzzled on how I should deploy my code as a static website. I expect to find a set of files to upload to my server (i.c. rsync to google cloud storage).

I see the files in the build folder, but I can’t get them to work. Once deployed, the index.html is served, but I see a blank page and no errors at all in the chrome debugger console. Here’s a link to the deployed build folder: http://test.gelovenleren.net/index.html (mind, this is a test bucket, it may be updated at any time)

I have the same when I serve the build folder on localhost using python -m SimpleHTTPServer. This is strange: when I do a ionic serve, the page is displayed OK on the localhost with the port chosen by ionic, AND as long as ionic serve is running, I also get the page displayed OK on the localhost port where SimpleHTTPServer is running. When I close ionic serve, the SimpleHTTPServer goes blank again… Quite puzzling how they interact?

In the docs for ionic build, I find the option --engine=browser, but no explaination on what it does. Is it relevant?

With all the claims for ionic to be used as platform for both mobile apps and websites, I’d have expected a clear tutorial on how to actually deploy the website, but so far I’ve only found articles referring to older ionic releases, which seem to be quite different from the later versions?

I hope that someone can take the time to guide me through this, so I can attempt some real coding…

Thanks!!

Best regards,
Vic

That’s the right approach, the build folder contains all the static files that you need for deployment.

Why it doesn’t work in your case it’s difficult to tell without seeing the code. Looking at your link, I suspect it’s showing a blank page simply because there is no Route in your code matching /index.html as the path.

Client-side page navigation relies on the browser History API. For it to work the server needs to be configured to serve index.html for all paths.

I don’t think python -m SimpleHTTPServer does that. Locally you can try with serve:

npx serve -s build/

Hi,

thanks! That solved it. On Google Cloud Storage, I had to update the “Website configuration” of the bucky, to have it load index.html by default.

Best regards,
Vic