I'm still new to web development and I'm using Firebase to handle all my data right now.
I have everything up and running, but how do I make it so my Firebase website updates whenever I make a change to my files? Do I have to manually call firebase deploy after each change in order to see the updated site?
To deploy your changes to the Firebase Hosting server, you will indeed have to run firebase deploy.
But normally when I develop an application, I run a local web server for the most part. I then only push the changes to Firebase Hosting when I have finished the feature/bugfix that I'm working on.
For local execution, I either use http-server or a gulp script that also packs the files. The latter have the advantage that they can watch your local files for changes and execute the correct steps based on that.
I'm working on a Angular 4 app with Firebase as a backend, so the steps are
$ ng build --prod
$ firebase deploy
It really depends on what you are doing and what you're trying to deploy.
There's three different areas to deploy to:
Hosting - this is just a simple web server in which to house your HTML, JavaScript and any other static files
Database - your Firebase access rules are placed in here
Storage - access rules to the file store, typically user submitted files
Typically you'll be developing your HTML and JavaScript files locally and testing them there. When you're ready to deploy to the hosting environment you'll typically deploy via firebase deploy, this will deploy all of the local files and rules to the Firebase servers.
If your question relates to just the database rules then there is no local version or instance of this, you need to deploy changes as you make them in order to make them active.
You can perform a rules update by issuing the command firebase deploy --only database. Just make sure you have a firebase.json file with "database": { "rules": "firebase.rules.json" }, or similar defined in it.
Bonus: Use BOLT to build the rules, it transpiles into a Firebase JSON rules file but makes development so much easier especially when your rules inevitably become more complicated.
Related
I have a Wordle-esque app that I want to deploy using Azure. Repo here. It is a fork from a popular open-source project, and I can also locally build and run the game. Locally, it runs perfectly.
I am trying to use Azure App Services to deploy it, using a Github Action. All the Actions pass, and the App can be successfully built. However, when I try to view the deployment here the only error I am receiving is
You do not have permission to view this directory or page.
Since it runs locally, and it pass its github action build, I do not know how to proceed here. I have tried restarting the app, and changing the resources I am using to host it, but that does not work. Some other answers seem to suggest the problem is about it not finding index.html, but I can access that through https://shetland-wordle.azurewebsites.net/public/index.html and the page is blank.
If i look under wwwroot/ in the Azure debugger I see the following file structure:
Any help would be appreciated
turns out it was something strange with package.json. I needed to change the path to my react scripts:
"start": "node_modules/react-scripts/bin/react-scripts.js start"
Not sure if its good practise to do this, but it works now
I have a react.js website with a backend in Node/express hosted on Azure, right now the project is monolithic, every time I do a change in the front or backend everything is redeployed in production. What I would like to achieve is to be able to deploy the frontend and the backend independently from one another whenever I push a change on github, but also if they are both affected deploy them together to avoid inconsistencies. Do you know some best practices or services to achieve this? Thanks
The git deployment method of Azure app services is simple. However, as long as we modify the file, all deployment commands will be executed and the entire deployment process will start. This cannot be changed.
Based on your description, I probably know that your project is a fusion of front and back ends, without separation of front and back ends. So I guess, you want to use the same app services for the front-end app and the back-end app.
So I suggest that you still separate the front and back ends of the project. This is the mainstream. It is also convenient for later maintenance and expansion. If you just want to use a webapp service, you can use a webapp based on the windows environment, and just use a virtual application. In this way, the update program can be completely separated without any impact.
Note that at present I found that the virtual application does not support the react project and has raised a support ticket to confirm. If have any progress, I will tell you.
I created and initialized a Firebase the project on my machine and Firebase console. However during the CLI initialization process on my machine I did not tick/include Firebase-Functions feature during the feature selection process.
Halfway through the project I realized there where some features on my website that needed cloud functions and now I'm stuck trying to add firebase functions to the project.
Enabling Firebase functions on Firebase console is easy enough but it's making neccessary changes in the source code to enable it that are frustrating (e.g Creating a 'functions' folder in the code, creating a package.json etc). Is there a command to automatically generate this?
You should just be able to run firebase init in the same project again to add Cloud Functions. It will add extra information to your firebase.json for the new products you choose, but will not overwrite what you've already done for Hosting. If you don't trust that process, simply back up your files, run the comment, and revert the changes if you don't like them.
I have a small web application written in node.js and nuxt.js. The app is running on Heroku. I wan't to improve the speed of the page, however I have no idea which way would be the most practical to implement a CDN service.
The deployment flow is like: after pushing to Github I use auto deploy to Heroku. After deployment the node.js-buildpack generates the new build. I would like to host somewhere the static .js and .css files but I can't acces them on Heroku directly.
I was thinking on write a node function and simply upload the dist files after building every time onto my CDN provider.
I'm just curious wether a more simplier solution exist or not.
Thank you in advence.
I have an Angular4 web app, deployed on Azure. Now I want to deploy this app to other environments on Azure: one for testing, one for acceptance and one for production. Every environment has different API endpoints and may have other variables, like Application Insights. All those environments run Angular in production mode.
The way Angular advises you to do this, is by the Enviroment files (environment.test.ts, enviroment.acc.ts, environment.prod.ts). I could configure all the different API endpoints in those files, and run my build with --prod for production for example.
But that is not the way I want to do this. I want to use the exact same application package deployed to test for my acceptance environment, without rebuilding the project. In Visual Studio Online, this is also really simple to configure.
The point is: how can I make my API endpoints differ per environment in that way?
The way I want to do this, is by the App Settings in Azure. But Angular can't get to those environment variables because it's running on the client side. Node.js is running on serverside and could get those App Settings - but if that's the way I need to do it, how do I make Node.js (used in Angular4 CLI) to send those server variables to the client side? And what about performance impact for this solution?
How did you fix this problem for your Angular4 apps on Azure? Is it just impossible to fix this problem with the Azure App Settings?
For everyone with the same question: I didn't fix this problem the way I described above.
At the end, I did it the way Angular wants you to do it: so rebuild for dev, rebuild for acc and rebuild for prod.
In Visual Studio Online, at build time, it builds and tests our code and it saves the uncompiled/unminified code. At release time, it builds en tests it again and releases it to the right environment with the right environment variables (--prod for example).
I don't think there is another way to fix this.
The solution is pretty old school but it works! Although you can use branching or tag for this purpose instead of cloning the code to the package.
The best solution as you said is Azure app settings will be saved as environment variable so you should implement an API with node.js and share the variables you want.
Of course there is an impact because of additional http call, but it's just one time at application start which is about max 5ms and depends on each program policy whether is impact or not.
Another option could be move the variables to the JSON file in the asset folder, and change it at deploy runtime with release pipeline. that's easier implementation but the disadvantage is you will have to use release variables instead of app settings and if you have config changes you will have to update the variable value first and redeploy it, although that works most of the times but sometimes you want to change just like a connection string and you will have to redeploy.