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

1. Clone the repository.

   git clone https://github.com/webceyhan/ng-organic-shop.git

2. Get inside the cloned project folder.

   cd ng-organic-shop

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

1. Create a Firebase account.

2. Install the firebase-cli globally.

   npm install -g firebase-tools

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

• Node.js
• Angular
• Bootstrap
• TypeScript
• Firebase Realtime Database
• GitHub Actions
  • Firebase
  • action-hosting-deploy