Deploying your AppGyver web build for FREE

In this guide, we will walk you through the process of deploying your web application using either GitHub Pages or Firebase hosting. In case any step is unclear, or you encounter any problems during deployment, kindly post your question in this thread.

GitHub pages allow you to host a static website or a web application straight from your GitHub repository for free. With no infrastructure to set up, it is a quick and simple approach to get your web application running on the web. Similarly, with Firebase, you may host static web content including HTML, CSS, and JavaScript files. It additionally offers a real-time database and authentication.

Prerequisite

Start by building your web application in the build service. Choose ZIP as the File type and select the latest Client runtime version. Do not choose to deploy your app to *.appgyver.app. Add a desired version and press BUILD.

Once the build is done, download it and unpack it in any desired location on your local machine. Here are the relevant instructions:

Your folder should look a similar way:

image

If you decide to pursue GitHub pages deployment, make sure to install Git on your system.

For Firebase, you will need Node.js. Make sure to enable NPM in the installation process.

Deploy

Option 1: GitHub pages

  1. Create a free user account on GitHub.com.
  2. Create a repository via the plus (+) sign in the top right corner. Make it Public to enable access to GitHub pages, or keep it private in case you have a GitHub Pro subscription. Name your repository username.github.com in order to deploy the app as username.github.io. Any other name will be deployed as username.github.com/appname, where appname is the name of the repository.

See an example below. Here, the resulting URL will be username.github.io/appgyver-deploy.

Take note of the link displayed in the ‘Quick setup’ section. This is the git address of your repository.

  1. Return to your local folder and create an empty file called .nojekyll in the root directory. This is necessary since GitHub pages use Jekyll by default, which is incompatible with AppGyver-produced output.
  2. Open a terminal in the unpacked folder. Run these basic Git set-up commands in the folder:

Substitute {git_address} with the link noted earlier.

git init
git remote add origin {git_address}
  1. Now, push all the existing files:
git add -A
git commit -m "Initial commit"
git branch -M main
git push -u origin main

Navigate back to the repository and check that all files are now uploaded.

  1. While in the repository, go to Settings and choose the Pages tab. In the Branch field, choose main from the dropdown and press Save. Wait for several minutes, and you will get the deployment address on the top side of the screen.

Make sure that “Enforce HTTPS” is enabled.

Your app is now deployed!

Option 2: Firebase hosting

  1. Create a free account on Firebase.

  2. Install Firebase CLI by running the following command in the terminal:
    npm i firebase-tools -g

  3. Open the terminal inside the unpacked folder and run firebase login. Login to Firebase (Google) in the browser window.

  4. Run firebase init hosting in the terminal. You will be presented with a series of questions, answer them in the following way:

  • Please select an option: Create a new project
  • Please specify a unique project ID: Use any desired name
  • What would you like to call your project?: Human-readable name for the project
  • What do you want to use as your public directory?: .
  • Configure as a single-page app (rewrite all URLs to /index.html)?: N
  • Set up automatic builds and deploys with GitHub?: N
  • File ./404.html already exists. Overwrite? (y/N): N
  • File ./index.html already exists. Overwrite?: N

Here is an example of successful configuration output:

  1. Run firebase deploy to deploy the application.

image

You should see the deployment address and other stats on the Firebase Console.

2 Likes

Thank you!
It works in Firebase but when you reload or refresh the page It shows the 404 error do you know how to fix it?

1 Like

Hi,

I can’t reproduce that error on my end :frowning: Perhaps it might be a misconfiguration in your app. Could you submit a bug report to https://tracker.appgyver.com/ with your appID?

1 Like

May you please explain the above? what are you referring to as the local folder? is this the unpacked folder? and how does one create an “empty” file?

Thanks

I just did it!
Thank you

Hi @Kirill_Leventcov ,

I have one application in Community Edition of AggGyver. So as per your current wiki ,will my app be deprecated post March 31st and I can’t access it further? I don’t want to deploy it to pkaystore / appstore .I want to launch and preview it.

Also , I have exported my app from Community Edition of AggGyver to a .gpg file but I don’t see an option to replace it in SAP Build lobby as per this wiki SAP Help Portal

Attaching my screenshot as well

Kindly help!!

I had similar concerns, @Lohitha_Maddipoti. I think we were both a bit confused there. See this:

According to @Kirill_Leventcov, this is strictly referring to Appgyver (AG) hosting your AG-built website for free for you. The same way as Wix (another website builder), off the top of my head, would host your free website with them as something like yoursitename.mywixsite.com. This is completely unrelated to the mobile app stores and in no way affects your ability to build native apps or websites. You’ll still be able to preview them in the preview web portal online or in the preview apps. You’ll still be able to develop them indefinitely in the future. :slight_smile:

In short, unless you are hosting a website at yourappsname.appgyverapp.com, you should have nothing to worry about.

1 Like

sure , Thanks @Dominik_Greene for clearing this out.Thanks again!

1 Like

I have hosted the app successfully on Firebase, but when I go to the Firebase URL it does not show the initial page, as per the setup in Appgyver builder. My App ID is 521350.

Also , I have exported my app from Community Edition of AggGyver to a .gpg file but I don’t see an option to replace it in SAP Build lobby as per this wiki SAP Help Portal

Hi,

As seen from the screenshot, you are using SAP AppGyver Classic. From the linked document, you may find: “Projects exported from SAP AppGyver Classic or Community Edition can be imported into SAP Build Apps.” Which means that you can import into SAP Build Apps, but not Classic.

what are you referring to as the local folder? is this the unpacked folder? and how does one create an “empty” file?

Yes, local folder is the unpacked folder.

To create a .nojekyll file, you can use several methods, but the most common one is to create a new txt file and rename it to .nojekyll. On Windows, that might not work, so rename it to .nojekyll. instead, and it will drop the unnecessary dot by itself.

1 Like

The appgyver instructions didn’t work entirely but the ones on GitHub did.

there are a few more lines required than just the following (i didn’t get a chance to re-copy it):
git init
git remote add origin {git_address}

After that step 5 can be performed. if just those lines are used the files won’t “commit”.

Also the .nojekyll file is not recognized. it uploads as a .txt. and the website opens as a blank page.

@Brenton_Richards

Steps 4 and 5 were adapted from the following GitHub instructions:

echo "# d" >> README.md
git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin {url}
git push -u origin main

Although, we neglect the first command as we don’t need to create a README file. And on command 3, we add -A, meaning all.

1 Like

@Kirill_Leventcov do you know why Firebase hosting is not working? Is their any specific step that is missing in the document?

Check this tutorial Firebase Hosting Tutorial #1 - Intro & Installation - YouTube

This is not relevant to AppGyver deployment on Firebase.

I checked the link, it is relevant to firebase hosting.

It is relevant for Firebase hosting, but not really for appygyver web app. But nevertheless, I found the issue and it was a basic thing I was missing. When prompted for all the details during deployment, you just need to make sure you enter period (.) instead of just pressing enter in the directory selection.

  • What do you want to use as your public directory?: .

I thought the process for hosting on Firebase was not working. I assumed the start page was index.html, but it seems the first page in my application is page.Page1.html. How can I configure the AppGyver app to have index.html as the first page and default page?