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

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!

3 Likes

----- 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.

  1. File “main-*******.js” has now “startsWith(“page.Page”)” which previously doesn’t.
  2. 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(“”)

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 Live Server” vscode extension

NOTE: After completing steps 1 to 7, and it didn’t work…Go directly to THIRD CASE Instructions.
And skip steps 1 to 4, proceed to step 5!

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 Live Server” vscode extension

----- THIRD CASE Instructions

Actual web app built used for this example:

    • same as my SECOND CASE sample*

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. replace the text with below exact text:
startsWith(“”)

step 4: 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 5: Go to folder public_next\data*************

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

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

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

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

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

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

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

step 12. We’re done! try opening the index.html with “Open with Live Server” vscode extension

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

1 Like

Thanks for the instructions.

When I unzip my app, I get two sets of html files and two sets of JSON files-

For example for page 1:

html files-
page.Page1.html
m-page.Page1.html

And for JSON-
page.Page1.html.json
m-page.Page1.html.json

Do I change both file names (keeping the “m-“)?

Thanks

UPDATE
I was able to successfully change URL page extensions according to the instructions above for the first case followed by third case.

I did change both (for example):

html files-
page.Page1.html to home.html
m-page.Page1.html to m-home.html

And for JSON-
page.Page1.html.json to home.html.json
m-page.Page1.html.json to m-home.html.json

Interestingly, I host my website as a static website on AWS S3, and the app didn’t work correctly for about 24 hours after I uploaded the files, but eventually did (not sure why it took 24 hours). If any readers are doing the same thing, be patient :slight_smile:

1 Like