An online coding course website written in pure HTML, CSS and Javascript
MPL-2.0 License
An online coding course website written in pure HTML, CSS and Javascript
This guide assumes that you are developing this project in Windows operating system and uses VScode as your primary code editor.
Clone the repository into your local machine
git clone https://github.com/AlstonChan/ApexCode.git
If you need to develop/test the firebase related code locally, install firebase-tools
or the CLI so you can use Firebase emulator.
npm install firebase-tools -g
If you do not want to install the package globally, run the following command to install the package scoped to the current project.
npm install
To access the package, append npx
before running any command. For example: npx firebase -h
.
For full firebase setup, please refer to the section Firebase setup below.
Open index.html
directly or by running a live server for hot reloading too see the web page.
If you have setup the firebase, and wish to develop using firebase emulators, run the following command:
npm run emulators:import
This will populate the emulator with data instead of having a empty emulator with no data. The default user for testing is:
Firstly, go to Firebase, you should see this page. Click the top right Sign in button if you haven't sign in yet and click Get started button.
Next, click Add project and enter a project name you desired (ApexCode), then proceed to create your Firebase project.
Below is your firebase console, create a web app and register a name.
firebase-config.js
.Go to your Firebase console, select the project and navigate to Authentication
section. Click get started and enable Email/Password
auth, this app will use the selected providers to authenticate user.
Next, navigate to Firestore Database
section. Click get started and create a database, select any location you want the data to be stored (This setting cannot be changed later). Next, select Start in Test mode so that you can access to your firestore later without getting unauthorized error, unless you know what you are doing.
Lastly, navigate to Storage
section. Select Start in Test mode so that you can access to your firestore later without getting unauthorized error, unless you know what you are doing.
Make sure you have done the Firebase Setup before proceeding to this section, as error will occur if the firebase isn't setup in the interface with this guide.
Go to your text editor, in my case, I am using Visual Studio Code. Login to the Firebase CLI using the following command, You will be redirected to your browser to login.
npx firebase login
After you have successfully login to the Firebase CLI, enter this command to initialize your firebase project to this application.
npx firebase init
You will be greeted with a big FIREBASE word and you will be asked the following question:
Are you ready to proceed?
Response: type y
Which Firebase features do you want to set up for this directory? Press Space to select features, then Enter to confirm your choices.
Response: select Firestore
, Storage
and Emulators
by pressing space. Use arrow key to navigate your option up and down. After you have selected these three options, press Enter
.
Select a default Firebase project for this directory: (Use arrow keys)
Response: Use a existing project and select the Firebase project that you just initialize. Press Enter
to proceed.
What file should be used for Firestore Rules?
Response: press Enter
; Use the default firestore.rules
File firestore.rules already exists. Do you want to overwrite it with the Firestore Rules from the Firebase Console?
Response: type n
What file should be used for Firestore indexes?
Response: press Enter
; Use the default firestore.indexes.json
File firestore.indexes.json already exists. Do you want to overwrite it with the Firestore Indexes from the Firebase Console?
Response: type n
What file should be used for Storage Rules?
Response: press Enter
; Use the default storage.rules
File storage.rules already exists. Overwrite?
Response: type n
Which Firebase emulators do you want to set up? Press Space to select emulators, then Enter to confirm your choices.
Response: select Firestore Emulator
, Storage Emulator
and Authentication Emulator
by pressing space. Use arrow key to navigate your option up and down. After you have selected these three options, press Enter
.
Which port do you want to use for the auth emulator?
Response: press Enter
; Use the default port 9099
Which port do you want to use for the firestore emulator?
Response: press Enter
; Use the default port 8080
Which port do you want to use for the storage emulator?
Response: press Enter
; Use the default port 9199
Would you like to enable the Emulator UI?
Response: type y
Which port do you want to use for the Emulator UI (leave empty to use any available port)?
Response: press Enter
or type 4000
Would you like to download the emulators now?
Response: type y
Note: You might not meet the same questions as listed in the order above, I might missed some questions.
The following VScode extension is recommended to install to provide a better developer experience (DX) and streamline your development.
This project uses Mozilla Public License Version 2.0.