Are you familiar with the error page below (see bottom of this post)? Well, I was too. This problem can happen with Firebase when you don’t want to use the useHash (the hashtag # in the url) in your app routing module. I am using Angular 10.0.3 here. Now what could be the issue is that when you initialized Firebase within the project with firebase init, you might have chosen to set the redirect all pages option to no, and well, and that was the issue for me. To resolve this issue once and for all, go to your firebase.json file and add the rewrites part.
If you are using something else rather than Firebase then you need to change your server settings where the mod rewrite executes. I would refer to this post on stackoverflow for more information which has information for some different servers: https://stackoverflow.com/posts/40833154/revisions
Error page below:
Page Not Found
This file does not exist and there was no index.html found in the current directory or 404.html in the root directory.
Why am I seeing this?
You may have deployed the wrong directory for your application. Check your firebase.json and make sure the public directory is pointing to a directory that contains an index.html file.
You can also add a 404.html in the root of your site to replace this page with a custom error page.
I believe that throughout the internet it is surprisingly little information about how to do deployments to various services. It is not complicated but the documentation just isn’t there at all times which lead me to make a post about it, explaining with simple terms. I am now using Google Cloud App Engine and using Windows 10 as a operative system, and focusing on Angular and React. This is meant to be guiding you through the build and deployment stage if you have a small angular or react app ready for a basic deployment!
So for your Angular or React application that is ready for deployment, you will be using Cloud SDK (gcloud command) in the terminal.
The Cloud SDK is a set of tools for Google Cloud. It contains gcloud, gsutil, and bq, which you can use to access Compute Engine, Cloud Storage, BigQuery, and other products and services from the command line. You can run these tools interactively or in your automated scripts.
It is an awesome tool as you can see that can do a lot. Go to your Google Cloud Console, make sure you have a project ready for your application deploy. If you have one, navigate to it and pay attention to the Project ID name, see image below. You might need to activate billing and the build api if not already done so before.
At this point your should have installed Google Cloud SDK. Now open up your terminal window in your working directory of your app and make sure you are on your Cloud project you want to deploy to, achieve this by the command below, using your project ID as you’ve found (in the image) and type in the following:
gcloud config set project deep-wares-123456
My project ID is called deep-wares-123456, so change that to yours. You will be greeted with the following message: Updated property [core/project] If you are curious where the settings are stored, take a look at: C:\Users\yourwindowsusername\AppData\Roaming\gcloud\configurations
To make sure you’ve selected the right project you can type
gcloud config get-value project
Build your app
Make sure you are in the workspace directory. Highlighting some of the importance of what is said in the documentations.
Angular We want to use the ng build.
ng build compiles an Angular app into an output directory named dist/ at the given output path. Must be executed from within a workspace directory.
The application builder uses the webpack build tool, with default configuration options specified in the workspace configuration file (angular.json) or with a named alternative configuration. A “production” configuration is created by default when you use the CLI to create the project, and you can use that configuration by specifying the –configuration=”production” or the –prod=”true” option.
React / Nodejs back-end application We can use npm build.
To deploy to Google Cloud AppEngine we need usually need an yaml file or the gcloud app deploy command will not work. Create a app.yaml file in your working directory. Here is some information about the yaml file if you care to read a bunch of settings without much of clear explanation.
There is a lot of information about which environment to use and when, you can read up on all of that here.
First off, what is the required settings? Well actually: runtime is the only one! However, depending on how your app look and how much you care about the server performance and cost, you might need to declare some things. Depending on what app we are deploying, the yaml configuration might look different, let’s go through some different types.
You can honestly just go with the runtime setting in your application.
This is what Google Cloud supports and not (see quote). Note that Node.js keeps updating and so does the services of the Cloud, so try stay updated!
The Node.js runtime supports Node.js 12, Node.js 10, and Node.js 8 (deprecated), and it uses the latest stable release of the version you choose. App Engine automatically updates to new release versions upon app deployment, but it will not automatically update the minor version.
Suppose you have a basic react app created through the create-react-app command.
For react app we need to declare handlers
# Serve all static files with url ending with a file extension
- url: /(.*\..+)$
# Catch all handler to index.html
- url: /.*
Suppose you have a PHP 5 application, then we need to specify this in runtime. The sample will serve files with extension of gif, png, or jpg as static resources. The files have been configured to be readable by the application code at runtime.
Suppose you have a firebase angularapp, created by the following commands: ng new myapp and ng add @angular/fire. Then you will get a firebase.json file which is used for deployment. The app.yaml file is not needed.
Read more about how to quick-start Firebase to your Angular app here. Note that you will type firebase deploy to deploy. Let’s take a look at the file. In this case, my firebase.json file looks like this.