Change the web app URL page extension or URL page ID from page.Page# to your preferred page name

Elbert_Pacheco · March 16, 2023, 6:42pm

Hi Guys, just want to share a work around on how to change the web app URL from page.Page# to your preferred page name.
So instead of myappname/page.page1, we will change it to myappname/home and so on.

There are 2 cases i’ve found so far to make this work.

Actual web app built i used for this example:

web app’s number of pages is 3
with firebase authentication: NO
i’ve only used logic flow “open page” with modal as FALSE

What you need:

your web app zip file
vs code

----- FIRST CASE Instructions

step 1. After downloading your web app zip file, unzip it in a folder (e.g. public, for firebase hosting).

step 2. Open the folder in VS CODE, then go to Search (from left tab), then search this exact text:
startsWith(“page.Page”)

step 3. If there’s a match then follow step 4, otherwise try the SECOND CASE.

step 4. replace the text with below exact text:
startsWith(“/”)

step 5a. next, paste below text in the search field
“key”:“page.Page1”

step 5b. replace the page.Page1 with your prepared page name (will use “home” for this example)
“key”:“home”

NOTE: this will replace all the “key”:“page.Page1” to “key”:“home” on all files inside the folder.

step 5c. replace the page.Page2 with your prepared page name (will use “about”)
“key”:“about”

step 5d. replace the page.Page3 with your prepared page name (will use “contact”)
“key”:“contact”

step 5e. continue this until you replace all your pages…i only used 3 pages for this example

step 6. Then, will now rename the html files, i rename below files as per my example:

page.Page1.html —> home.html
page.Page2.html —> about.html
page.Page3.html —> contact.html

step 7. We’re done! try opening the index.html with “Open with Liver Server” vs code extension
Screenshot 2023-03-17 013401
Screenshot 2023-03-17 013418

step 8. Then publish your web app with firebase.
You can try my published web app:
https://test-pages.web.app

----- SECOND CASE Instructions

Actual web app built i’ve used for this example:

web app’s number of pages is 7
with firebase authentication: YES
i’ve used logic flow “open page” with modal as FALSE
and back to initial page logic flow

What you need:

your web app zip file
vs code

step 1: Unzip the all the files to a folder(e.g public)

step 2: Rename the html files, i rename below files as per my example:

page.Page1.html —> home.html
page.Page2.html —> signin.html
page.Page3.html —> contact.html
…and so on

step 3: Go to folder public_next\data*************

step 4: Rename the json files, i rename below files as per my example:

page.Page1.json —> home.json
page.Page2.json —> signin.json
page.Page3.json —> contact.json
…and so on

step 5. Open the folder in VS CODE, then go to Search (from left tab), then search this exact text:
page.Page1

step 6. replace the text with below exact text (your preferred page name): will use “home” for this example.
home

NOTE: this will replace all the “page.Page1” to “home” on all files inside the folder.

step 7. replace the page.Page2 with your prepared page name (will use “signin”)
signin

step 8. replace the page.Page3 with your prepared page name (will use “contact”)
contact

step 9. do this until you finished all your pages…

step 10. We’re done! try opening the index.html with “Open with Liver Server” vs code extension

I hope one of these cases will match yours and be of help to your projects. Cheers!

Elbert_Pacheco · March 19, 2023, 6:50am

----- UPDATES

Update 1: Re-Posting Guide with added THIRD CASE
Update 2: Correction on FIRST CASE Instruction from Original Post
FROM startsWith(“/”) TO startsWith(“”)

When I made some changes with my SECOND CASE web app sample in AppGyver, after re-building and downloading the ZIP file, there were changes on the codes and filenames.

File “main-*******.js” has now “startsWith(“page.Page”)” which previously doesn’t.
Folder “_next\data\**********” has json files with filenames with “html” added…
now “page.Page1.html.json” w/c previously “page.Page1.json” only.

Then I tried doing the FIRST CASE but didn’t work.
So this will fall under my THIRD CASE.

----- FIRST CASE Instructions

Actual web app built used for this example:

- web app’s number of pages is 3*
- with firebase authentication: NO*
- i’ve only used logic flow “open page” with modal as FALSE *

What you need:

- your web app zip file*
- vs code*

step 1. After downloading your web app zip file, unzip it in a folder (e.g. public, for firebase hosting).

step 2. Open the folder in VS CODE, then go to Search (from left tab), then search this exact text:
startsWith(“page.Page”)

step 3. If there’s a match then proceed step 4, otherwise Go to the SECOND CASE.

step 4. replace the text with below exact text:
startsWith(“”)