This is a very simple online grocery shop application which covers many aspects of the Angular Framework using Firebase Authentication and Realtime Database as backend.
View Demo | Report Issue | Request Feature | @webceyhan
You need to install the Node.js
and npm
package manager first.
Recommended IDE: VSCode + Angular Essentials
- Clone the repository.
git clone https://github.com/webceyhan/ng-organic-shop.git
- Get inside the cloned project folder.
cd ng-organic-shop
- Install NPM packages.
npm install
You can use following commands to do various task with the project.
npm start # start development server
npm run test # run test suits
npm run build # build for production
Take a look at the other scripts in
package.json
Run ng serve
for a dev server. Navigate to https://localhost:4200/
. The app will automatically reload if you change any of the source files.
Run ng test
to execute the unit tests via Karma.
Run ng e2e
to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
Run ng build
to build the project. The build artifacts will be stored in the dist/
directory.
A GitHub Action will automatically deploy the project to Firebase on every push.
See the details in .github/workflows/firebase.yml
-
Create a Firebase account.
-
Install the
firebase-cli
globally.npm install -g firebase-tools
-
Initialize new Firebase project inside your project folder.
firebase init # Configure files for Firebase Hosting and (optionally) st up GitHub Action deploys # ? What do you want to use as your public directory? dist # ? Configure as a single-page app (rewrite all urls to /index.html)? Yes # ? Set up automatic builds and deploys with GitHub? Yes # ? File dist/index.html already exists. Overwrite? No # ? For which GitHub repository would you like to set up a GitHub workflow? (format: user/repository) webceyhan/vue-splendid-food # ? Set up the workflow to run a build script before every deploy? Yes
This will create a new application on Firebase cloud, a firebase.json configuration for hosting and a GitHub Action for deployment, inside your project folder.
It also generates the required secrets in your GitHub repository as follows;
FIREBASE_SERVICE_ACCOUNT_ORGANIC_SHOP_92B11