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:
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
- Create a free user account on GitHub.com.
- 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 asusername.github.io
. Any other name will be deployed asusername.github.com/appname
, whereappname
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.
- 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. - 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}
- 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.
- 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
-
Create a free account on Firebase.
-
Install Firebase CLI by running the following command in the terminal:
npm i firebase-tools -g
-
Open the terminal inside the unpacked folder and run
firebase login
. Login to Firebase (Google) in the browser window. -
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:
- Run
firebase deploy
to deploy the application.
You should see the deployment address and other stats on the Firebase Console.