This post series is indexed at , you might like to know that a webapp that contains only client-side code would also have the option of deploying to free Firebase hosting. I'm not going to go into the details here as they'd only be a distraction, but chatGPT would happily supply them if you asked.
So, moving on, as indicated above, you need to find an App Engine "adapter" for your project. While there isn't an official Google Svelte adapter, a thriving Svelte community has posted several different adaptors as open software on Git repositories.
The one I recommend is the . This provides an umbrella for the numerous "sub-consoles" that let you configure and administer individual Cloud services.
Sadly, the App Engine isn't listed on the "pinned" Quick access list displayed on the IAM "Welcome" page. But you can easily find it by entering "app engine" in the search box and clicking the "Search" button. Select "Dashboard" from the list of consoles and documents thus revealed.
Now check that the name of your project is showing in the "triple dot" box at the top left of the screen and click the "Create application" button". This will invite you to select a Region (server location) for your project. You'll probably want to use the same regions as you are using for your database. Now, leaving the service account field set to "App Engine Default Service Account", press "Done" to complete the setup
3.3 Setting the App Engine/App Engine Deployer role in IAM
The IAM (Identity and Access Management console) lists the "roles" that have been issued to "principals" for your project. Principals may be people (identified by their Google accounts) or abstract system entities (identified by service accounts). If your Google email doesn't appear as an IAM principal with the "App Engine Deployer" role, your attempts to run a deploy command will be rejected. To access IAM, return to the Cloud console's welcome page and select "IAM and admin" from the Quick access list.
Now click the "Grant Access" button, enter your Gmail ID in the "new principals" field and then, in the Role field, scroll down to "App Engine" in the left-hand panel and select "App Engine Deployer" in the right-hand panel". "Save" this and you're done.
3.4 Installing the Gcloud tool on your system
The Gcloud tool enables you to to run a terminal gcloud command to deploy your software to your App Engine host. The installation procedure for the Google Cloud CLI (Command Line Interface) is documented at . For example, my own "svelte-dev" project is deployed with
gcloud app deploy build/app.yaml --project=svelte-dev-80286
The build.yaml file is an interesting feature of the command. This is a configuration file that was by the preceding Vite "build". It tells gcloud where to find the various artefacts and configurations in the "build" folder.
If all goes well you should see something like the following:
Beginning deployment of service [default]...
#============================================================#
#= Uploading 19 files to Google Cloud Storage =#
#============================================================#
File upload done.
Updating service [default]...-WARNING: *** Improve build performance by generating and committing package-lock.json.
Updating service [default]...done.
Setting traffic split for service [default]...done.
Deployed service [default] to [https://svelte-dev-80286.nw.r.appspot.com]
You can stream logs from the command line by running:
$ gcloud app logs tail -s default
To view your application in the web browser run:
$ gcloud app browse --project=svelte-dev-80286
This is a huge moment. Your webapp can now be run on the web at https://[Your Project Id].nw.r.appspot.com (https://svelte-dev-80286.nw.r.appspot.com in my case). As a short-cut you might use the terminal sessions suggestion to run it by copying and pasting "gcloud app browse --project=svelte-dev-80286" into the terminal session.
4. Summary
I hope that all went well for you. Unfortunately, I expect that if you have made it this far it will have been at the cost of much hair-tearing and, quite possibly, tears. Still, I'm sure that it will have been worth it.
This series concludes in the next section with posts designed to flesh out some aspects of earlier subjects. These would have simply got it in the way I'd introduced them earlier. Just at present, you might find it useful to have a look at . Check that your project name is displayed in the "three dot" field at top left and try not be too overwhelmed by the dizzying array of menus and sub-windows.
Your problem here is that Google logs absolutely everything that happens on your project. When you look for console.log messages, you'll find that these are buried in Google-generated messages about project build activity and page startup etc, etc. Furthermore, Google records this information in minute detail back to the dawn of time. Finding what you want can be a challenge.
To help you through this maze, the Explorer allows you to filter log entries using "Queries" based on log entry field values. If you open a log entry at random (by clicking the > button in its left-hand margin), you'll see that it is an object containing properties such as logName and textPayload. A console.log("In Actions 1") statement in your webapp, for example, would create a log entry with a textPayload value of "In Actions 1".
A query is specified by creating a list of "match" criteria for log properties. The example below matches log entries for console.log messages for my svelte-dev App Engine project that have the value "In Actions".
resource.type="gae_app"
log_name="projects/svelte-dev-80286/logs/stdout"
textPayload ="In Actions"
The Logs Explorer offers you various methods of setting up your query. The most basic approach would be to type your query specification directly into the "query specification" window revealed by toggling the "confused" square box icon on the RHS of the screen and enabling the "Show query" slider.
To save your typing, various pull-down menus let you select standard filters for "Resource type" and "Severity level" etc. Setting these to "GAE application" and "All severities" seems a good idea for present purposes.
Additionally, of course, you'll want to set the time range for the filter. You do this separately by clicking the "Pick time range" box at the top of the screen and adjusting the start/finish times.
Finally, to run your query spec you click the big blue "Run Query" button at the top right.
In the example below, I've used a "regular expression" in the textPayload spec to pick up console.log messages that start with the words "In Actions". This therefore picks up "In Actions 2" and "Action 3" messages as well as the precise "In Actions" matches.
resource.type="gae_app"
log_name="projects/svelte-dev-80286/logs/stdout"
textPayload =~ "^In Actions"
Here's a screenshot for this query displaying logging output for a series of webapp runs on App Engine.
SOCIAL SHARE CARD GENERATOR