Technologies used
I have a TODO app developed in Gatsby, using Firebase Firestore to store the data and read from it
I have used gatsby-starter-capacitor project as a starter template. Why? I want my app to run both on iOS and Android.
What I have right now?
My local build when using npx gatsby develop, I can see the site I have created. I have successfully deployed my app to Netlify as well.
Also, I can run my app on iOS device, I did npm run build && npx cap copy ios && npx cap open ios
For Firebase, I have created a web app in my Firebase console, and used the details on my Gatsby App template. The Firebase details for the WebApp, e.g. Keys and etc, are in a .env file, which I have declared and uploaded on Netlify Environment Variables section
This launches my app on my iPhone - Fantastic.
Localhost: I can save and read data from Firebase and can see the data appearing saved on Firebase console. (Awesome)
Problem
App on iPhone/Netlify loads on a fresh slate, the data is not read from Firebase.
How do I productionise my app so my friends can use it when I release it in Appstore. Because, currently when my app runs on an iOS device, it is running on its localhost? or something that I am not sure of. My app is already running on Netlify, how do I connect this iOS project to go to that URL?
Basically, I want users to be able use this app and read/write to Firebase (which currently works on localhost).
Related
I am uploading my Ionic Capacitor app to TestFlight using a paid developer account and it continues to be configured to use the localhost hostname for the URL.
I have tried a plethora of commands for building the project out to XCode.
ionic capacitor run ios --external --prod
ionic build
ionic cap sync
ionic cap copy
ionic capacitor build ios --prod
I am still learning the process, is it supposed to run on localhost when you use TestFlight?
This is the capacitor.config.ts file:
import { CapacitorConfig } from "#capacitor/cli";
const config: CapacitorConfig = {
appId: "com.traineraid",
appName: "Traineraid",
webDir: "build",
bundledWebRuntime: false,
server: {},
};
export default config;
One of the main reasons I am having difficulty is the I have firebase emulators set up that run instead of the production server when using a localhost URL, so when open the app using TestFlight on my phone, it warns me it is trying to use the emulators, which I don't have running, and it obviously can't work.
Is there a step of piece that is missing from this that is causing these problems? Or is this how it actually is supposed to operate and the code is what needs to change?
Capacitor apps ship with the app files bundled inside the app, so there is no “production server”, all the files are local.
Capacitor serves the local files from capacitor://localhost on iOS and http://localhost on Android, because you need an url to load in the app, but the url doesn’t really matter much.
When you run ionic capacitor run ios --external --prod it uses a local dev web server, but that’s just to allow live reload and making development easier, but for publishing the app you don’t need a server. Just run ionic build and then npx cap copy and all the files will be copied to the app bundle.
I created a server-side and deployed it on Heroku so I have a URL from Heroku that I can see the data transferred from the backend when I enter that URL.
I put that link in the react app package.json file as "proxy" and when I run the react app locally I can see the data from the backend rendered on the website.
I have tried to deploy the react app on Heroku and netlify and on both you can see only the react components rendered without the data that is supposed to be transferred from the backend.
any idea why is that?
In my opinion it has to be something related to the build folder since that run the app locally works great
****update:
After running the build version locally i can see the data is not passed so I'm assuming something is wrong with the build version
I am learning web development. At now I'm practicing some react projects with firebase authentication. But after finishing the deployment, I'm only getting this(image mentioned)[here image says "Firebase Hosting Setup Complete
You're seeing this because you've successfully set up Firebase Hosting. Now it's time to go build something extraordinary!"][1] But I was supposed to get the project output in the browser.
I followed every steps of firebase Hosting. Maybe I missed something.
[1] https://i.stack.imgur.com/z5iqk.png
If you deployed the App via> firebase deploy in the console, there should be a URL mentioned in the console pointing to the active website.
Generic: What kind of services must a hosting vendor provide in order to make it possible to have a React app hosted?
More Specific: If I create a website with React and React Router, is it possible to deploy it by just uploading the bundled output folder? This could be for example a dist folder containing index.html, bundle.js and an images folder.
Could this be as simple as deploying a simple web page (like one built with plain HTML, CSS and JS)?
Sure just do: npm run build
and you will have a folder with the static files. Upload those with your choice of file transfer method and set the permissions to the web host appropriately.
100% Working Example.
React App Hosting in Firebase .
You can read this blog
Host Your React Web App in few minutes.
Command runnning in Wrong sequence =>
firebase login
firbase init
firebase deploy
npm run build
Command runnning in Correct sequence =>
firebase login
firbase init
npm run build
firebase deploy
I currently have a Ratpack Groovy application hosted on heroku, I've managed to get it working correctly and deploying to the URL Heroku created for me. I decided to make a ReactJS application, which grabs the data from my database from an API I've built in Ratpack, my React application acts as a basic CMS where I can post data back to Ratpack and update the database.
My front end templates get rendered from within my Ratpack handlers, this all works fine locally. I followed
https://github.com/gschrader/ratpack-react-boilerplate
Here is my basic project structure
So I can run ./gradlew run which builds the react app and starts up my Ratpack app in the root of my project and then yarn start in my React directory which starts up my react application on localhost:3000.
My question is how do I deploy this on Heroku, at the moment it's in one big directory, so could I deploy it as one project? I'd like the cms to be on a sub domain such as admin.application.com. I am pretty confused as to how this would work, if anyone has any documentation that would be very helpful.