FirebasCMSisane-commerceandbloggingplatformwithastorefrontandCMSbuiltwithAngular4(AngularCLI),Firebase(AngularFire2),AngularMaterialandStripe.Create,moderateandmanagepages,blogposts,products,orders,customers,carts,navigation,themes,adminsandmorewiththiswebapplication.
DemoCheckoutthefrontendapplication:https://fir-cms-76f54.firebaseapp.comCheckouttheadmininterface:https://fir-cms-76f54.firebaseapp.com/loginAdminlogindetails:admin@admin.com/admin123Thisuserhasan'editor'roleAllofthedatawillberesetonceaweekInstallationInstallAngularCLI
npminstall-g@angular/cliInstallNPMpackages
Run`npminstall`or`yarninstall`cdfunctions/Run`npminstall`FirebasesetupCreateaFirebaseaccount,createanewproject,andcopytheconfigcodeforyourproject.
EnableGoogle,Email/PasswordandAnonymousinthe'Sign-InMethod'taboftheAuthenticationsectioninyourFirebaseprojectConsole.
Withintheprojectfolder,run:
cdsrcmkdirenvironmentscdenvironmentstouchenvironment.tstouchenvironment.prod.tsOpen'environment.ts'andaddyourFirebaseconfigasfollows:
exportconstenvironment={production:false,firebase:{apiKey:"xxxx",authDomain:"xxxxx",databaseURL:"xxxxx",projectId:"xxxxx",storageBucket:"xxxx",messagingSenderId:"xxxx"}};Open'environment.prod.ts'andaddyourFirebaseconfigasfollows:
exportconstenvironment={production:true,firebase:{apiKey:"xxxx",authDomain:"xxxxx",databaseURL:"xxxxx",projectId:"xxxxx",storageBucket:"xxxx",messagingSenderId:"xxxx"}};StripesetupCreateaStripeaccount.
AddyourStripeAPISecretKeytofirebaseconfig:
firebasefunctions:config:setstripe.token=<YOURSTRIPESECRETKEY>Open'environment.ts'andaddyourStripePublishableAPIKeyasfollows:
exportconstenvironment={production:false,firebase:{apiKey:"xxxx",authDomain:"xxxxx",databaseURL:"xxxxx",projectId:"xxxxx",storageBucket:"xxxx",messagingSenderId:"xxxx"},stripe:"<YOURSTRIPEPUBLISHABLEKEY>"};Open'environment.prod.ts'andaddyourStripePublishableAPIKeyasfollows:
exportconstenvironment={production:true,firebase:{apiKey:"xxxx",authDomain:"xxxxx",databaseURL:"xxxxx",projectId:"xxxxx",storageBucket:"xxxx",messagingSenderId:"xxxx"},stripe:"<YOURSTRIPEPUBLISHABLEKEY>"};CreateSuperAdminAccountYou'llneedtomanuallyaddyourfirstadminaccount.Togenerateahashcodeforit...
Runnpmrunhashcodeandenteryouremail.CopyhashcodeCreatenewentryinyourfirebaseDBunder,/admins/<YOURHASHCODE>/asfollows:admins:{<YOURHASHCODE>:{{email:'<YOUREMAIL>',role:'super-admin'}}}Createuserinfirebaseusermanagementwithsameemail.EmailConfirmationsetupToallowtheapptosendconfirmationemailsthroughaGmailaccount:enableaccesstoLessSecureAppsandDisplayUnlockCaptcha.Foraccountswith2-stepverificationenabled,GenerateanAppPassword.Setthegmail.emailandgmail.passwordGoogleCloudenvironmentvariablestomatchtheemailandpasswordoftheGmailaccountusedtosendemails(ortheapppasswordifyouraccounthas2-stepverificationenabled).Forthisuse:firebasefunctions:config:setgmail.email="<EMAILADDRESS>"gmail.password="<PASSWORD>"DevelopmentserverRunngserveforadevserver.Theappwillautomaticallyreloadifyouchangeanyofthesourcefiles.
Navigatetohttps://localhost:4200/toaccessthefrontend.
Navigatetohttps://localhost:4200/logintoaccesstheloginpage(loginisviaGoogle).
Navigatetohttps://localhost:4200/admintoaccesstheCMS(usermustbeloggedinandmustbepartof'/admins'intheFirebasedatabasetoaccesstheCMS).
CodescaffoldingRunnggeneratecomponentcomponent-nametogenerateanewcomponent.Youcanalsousenggeneratedirective|pipe|service|class|module.
BuildRunngbuildtobuildtheproject.Thebuildartifactswillbestoredinthedist/directory.Usethe-prodflagforaproductionbuild.
DeployRunnpmrundeploytodeployyourproject.ThiscommandwillfirstbuildtheappforproductionandthendeployittoFirebasehosting.
AdminRolesThereare3AdminRoles:
super-adminadmineditorPermissionsuper-adminadmineditorcreatenewentities✓✓✓editentities✓✓✓submitentitiesforapproval✓✓✓saveentities✓✓×deleteentities✓✓×publish/unpublishentities✓✓×edititemsawaitingapproval✓✓×approve/disapprovechanges✓✓×view/add/edit/deleteorders✓✓×view/add/edit/deletecustomers✓✓×view/add/edit/deletemenus✓✓×view/add/edit/deletethemesettings✓✓×view/add/edit/deleteadmins✓××
评论