How do i securely deploy to firebase using a github workflow? - reactjs

I'm a novice to web development, and I'm making a website with react.js. I have a workflow set up with Github to deploy the website to Firebase Hosting whenever i push/PR.
The problem is, i have a config.js file that is gitignored because it contains the authentication to the firestore database for the site. The workflow will fail because there is no config.js (since i import it).
How can i deploy to Firebase through Github while keeping the configuration secure?

Related

Update changes in website made using firebase after site is already deployed

I have created a website using react and firebase and hoisted on firebase. After making changes I want them to be visible on my website. What is the process for the same so that the website is not deployed on a different link ?
Most likely you deployed the web site to Firebase Hosting by running some variant of:
firebase deploy
To update it you can simply run the same command again.

How to deploy a react, strapi app on heroku

I'm creating a an app using react as the frontend and strapi as the backend with a mongobd database.
So I have two folders at the root of the app client and server
Is it possible to deploy both folders like this on heroku.
I have read in another tutorial that
If deploying your backend to a provider that does not persist storage
on the server like Heroku, the default Strapi local server upload will
not work as your files on the server are automatically wiped
periodically.
Just trying to find the best way to deploy this app
It just so happens that I just build a project like this. For the frontend I used Gatsby and Strapi for the CMS. I deployed the Strapi app on Heroku (and used a Postgresql database - you can add this as a plugin from the Heroku dashboard, or do the same with MongoDB) and the Gatsby app on Netlify (same thing you can do with a React app).
It's true that by default Heroku wipes your data once a day (I think), but since are connecting your app to Mongo that shouldn't be an issue. Just add the DB variables to the respective fields in your Heroku app's dashboard.
I like to keep the front and backend separate myself, so I would deploy them as separate repos, either on Heroku or anywhere else.

React app deploy complete with firebase but i did not get a hosting url ? What i do now for successful deploy

Why i did not get a hosting url? What I do now? See this pic
It looks like you never configured Firebase Hosting, so firebase deploy only deploys the rules for your Realtime Database.
To get it to deploy the web site too, add a hosting section to your firebase.json file like the one shown here or run firebase init hosting and follow the prompts.

How to access to a React Application from an external network?

I am running a React application on a Windows Server. I can access to it from browser using both the local machine and another pc on the same local network, but not from an external network.
I've tried both the development mode, ip:3000, and production mode with ip:5000.
Now I am wondering if it's a networking issue or I need to do something in my React code.
I didn't find anything in the documentation.
What do you do to make available an application to others?
Thanks.
You can setup firebase to you react app and deploy you application on firebase console.
Login in firebase using google account
Create project and app
Complete firebase setup to the project
Create Build and Deploy app on firebase.
Follow below link for steps :
https://medium.com/#aleemuddin13/how-to-host-static-website-on-firebase-hosting-for-free-9de8917bebf2
https://medium.com/swlh/how-to-deploy-a-react-app-with-firebase-hosting-98063c5bf425
Firebase project has free subdomains on the web.app and firebaseapp.com domains. You can access via these links.

How to add React App to a Firebase Hosting project

I have created a simple CRUD RESTful API using Firebase Functions/Hosting.
Now I would like to build the corresponding frontend using React to query my API.
However, I have no idea how to cleanly add a new React app to my project folder and deploy it to Firebase Hosting.
This is my folder structure at the moment:
https://imgur.com/a/WwDxji7
The whole API lives in "index.ts" in the functions folder. (I know, not good to have it all in one file).
Where/how do I add a React App and deploy it to Hosting?
Your API using Cloud Functions is a separate project and your front-end App is a separate project. You may keep the two projects separate or together in the same folder is your personal choice.
Having said that, firebase-tools installs the project for cloud functions in the functions folder, so that your main front-end project can reside as the parent folder. Firebase has few files in the parent folder to store the firebase settings which generally do not interfere with your front-end app.
For deployment, you can deploy API and front-end app in same hosting or different, choice again is yours. In case, you deploy on the same firebase hosting, you can set up rules in firebase.json to differentiate the routes for your functions and app.

Resources