Repository files navigation

FirebasCMS is an e-commerce and blogging platform with a storefront and CMS built with Angular 4 (Angular CLI), Firebase (AngularFire2), Angular Material and Stripe. Create, moderate and manage pages, blog posts, products, orders, customers, carts, navigation, themes, admins and more with this web application.

• Check out the front end application:https://fir-cms-76f54.firebaseapp.com
• Check out the admin interface:https://fir-cms-76f54.firebaseapp.com/login
  • Admin login details:admin@admin.com / admin123
    • This user has an 'editor' role
    • All of the data will be reset once a week

InstallAngular CLI

npm install -g @angular/cli

Install NPM packages

Run `npm install` or `yarn install`cd functions/Run `npm install`

Create aFirebase account, create a new project, and copy the config code for your project.

Enable Google, Email/Password and Anonymous in the 'Sign-In Method' tab of the Authentication section in your Firebase project Console.

Within the project folder, run:

cd srcmkdir environmentscd environmentstouch environment.tstouch environment.prod.ts

Open 'environment.ts' and add your Firebase config as follows:

exportconstenvironment={production:false,firebase:{apiKey:"xxxx",authDomain:"xxxxx",databaseURL:"xxxxx",projectId:"xxxxx",storageBucket:"xxxx",messagingSenderId:"xxxx"}};

Open 'environment.prod.ts' and add your Firebase config as follows:

exportconstenvironment={production:true,firebase:{apiKey:"xxxx",authDomain:"xxxxx",databaseURL:"xxxxx",projectId:"xxxxx",storageBucket:"xxxx",messagingSenderId:"xxxx"}};

Create aStripe account.

Add your Stripe API Secret Key to firebase config:

firebase functions:config:set stripe.token=<YOUR STRIPE SECRET KEY>

Open 'environment.ts' and add your Stripe Publishable API Key as follows:

exportconstenvironment={production:false,firebase:{apiKey:"xxxx",authDomain:"xxxxx",databaseURL:"xxxxx",projectId:"xxxxx",storageBucket:"xxxx",messagingSenderId:"xxxx"},stripe:"<YOUR STRIPE PUBLISHABLE KEY>"};

Open 'environment.prod.ts' and add your Stripe Publishable API Key as follows:

exportconstenvironment={production:true,firebase:{apiKey:"xxxx",authDomain:"xxxxx",databaseURL:"xxxxx",projectId:"xxxxx",storageBucket:"xxxx",messagingSenderId:"xxxx"},stripe:"<YOUR STRIPE PUBLISHABLE KEY>"};

You'll need to manually add your first admin account. To generate a hashcode for it...

1. Runnpm run hashcode and enter your email. Copy hashcode
2. Create new entry in your firebaseDB under,/admins/<YOUR HASHCODE>/ as follows:

admins:{<YOURHASHCODE>:{{email:'<YOUR EMAIL>',role:'super-admin'}}}

3. Create user in firebase user management with same email.

1. To allow the app to send confirmation emails through a Gmail account: enable access toLess Secure Apps andDisplay Unlock Captcha. For accounts with 2-step verification enabled,Generate an App Password.
2. Set the gmail.email and gmail.password Google Cloud environment variables to match the email and password of the Gmail account used to send emails (or the app password if your account has 2-step verification enabled). For this use:

firebase functions:config:set gmail.email="<EMAIL ADDRESS>" gmail.password="<PASSWORD>"

Runng serve for a dev server. The app will automatically reload if you change any of the source files.

Navigate tohttp://localhost:4200/ to access the front end.

Navigate tohttp://localhost:4200/login to access the login page (login is via Google).

Navigate tohttp://localhost:4200/admin to access the CMS (user must be logged in and must be part of '/admins' in the Firebase database to access the CMS).

Runng generate component component-name to generate a new component. You can also useng generate directive|pipe|service|class|module.

Runng build to build the project. The build artifacts will be stored in thedist/ directory. Use the-prod flag for a production build.

Runnpm run deploy to deploy your project. This command will first build the app for production and then deploy it to Firebase hosting.

There are 3 Admin Roles:

• super-admin
• admin
• editor