alexabbott / firebase-cms Goto Github PK
View Code? Open in Web Editor NEWA CMS + E-commerce platform built with Angular and Firebase
Home Page: https://fir-cms-76f54.firebaseapp.com/
License: MIT License
A CMS + E-commerce platform built with Angular and Firebase
Home Page: https://fir-cms-76f54.firebaseapp.com/
License: MIT License
Hi @alexabbott
I placed a PR with more fixes. Let me know if you are good with the new approach on the routes
#30
Here is the sample application where you could see it ,as it stands with these changes
https://fir-cms-vnext.web.app/
you could login with [email protected] as originally :-)
Why:
How:
Need to check:
Hey, Can you share your firebase storage rules. I have been searching for several solution and I got this link in StackOverflow : https://stackoverflow.com/questions/42339313/firebase-security-rules-for-storage
But, I dont completely understand it. Thank you kindly
Hi what do think about
ERROR in C:/Users/MAREUIL/backend/firecms/firebase-cms-master/src/app/storefront-components/product/product.component.ts (22,20): Cannot find namespace 'firebase'.
ERROR in C:/Users/MAREUIL/backend/firecms/firebase-cms-master/src/app/storefront-components/cart/cart.component.ts (20,20): Cannot find namespace 'firebase'.
ERROR in C:/Users/MAREUIL/backend/firecms/firebase-cms-master/src/app/storefront-components/cart-icon/cart-icon.component.ts (14,20): Cannot find namespace 'firebase'.
Best regards
Hello,
when I paste my firebase config keys and run the project it only showing cart and sign in as well as nothing to show in admin panel to add products ! when I paste your Firebase keys
export const environment = {
production: false,
firebase: {
apiKey:"AIzaSyD9c0w1NE_-LCZ0fbaP0dcp-jiaFKE4mBI",
authDomain:"fir-cms-76f54.firebaseapp.com",
databaseURL:"https://fir-cms-76f54.firebaseio.com",
projectId:"fir-cms-76f54",
storageBucket:"fir-cms-76f54.appspot.com",
messagingSenderId:"1065458841365"
},
stripe: "pk_test_dMX8aZtfZSl4ZQ5W2kf7Af7l"
};
It works smoothly ! can you provide Json file of Database ? So i can import it to the My firebase Project !
I always get this error when trying to launch the project:
Cannot read property 'length' of undefined
TypeError: Cannot read property 'length' of undefined
at createSourceFile (C:\Users\William\Desktop\firebase-cms\node_modules\typescript\lib\typescript.js:12614:110)
at parseSourceFileWorker (C:\Users\William\Desktop\firebase-cms\node_modules\typescript\lib\typescript.js:12546:26)
at Object.parseSourceFile (C:\Users\William\Desktop\firebase-cms\node_modules\typescript\lib\typescript.js:12472:26)
at Object.createSourceFile (C:\Users\William\Desktop\firebase-cms\node_modules\typescript\lib\typescript.js:12313:29)
at VirtualFileStats.getSourceFile (C:\Users\William\Desktop\firebase-cms\node_modules\@ngtools\webpack\src\compiler_host.js:66:35)
at WebpackCompilerHost.getSourceFile (C:\Users\William\Desktop\firebase-cms\node_modules\@ngtools\webpack\src\compiler_host.js:242:38)
at findSourceFile (C:\Users\William\Desktop\firebase-cms\node_modules\typescript\lib\typescript.js:70693:29)
at processImportedModules (C:\Users\William\Desktop\firebase-cms\node_modules\typescript\lib\typescript.js:70860:25)
at findSourceFile (C:\Users\William\Desktop\firebase-cms\node_modules\typescript\lib\typescript.js:70741:17)
at processImportedModules (C:\Users\William\Desktop\firebase-cms\node_modules\typescript\lib\typescript.js:70860:25)
at findSourceFile (C:\Users\William\Desktop\firebase-cms\node_modules\typescript\lib\typescript.js:70741:17)
at args (C:\Users\William\Desktop\firebase-cms\node_modules\typescript\lib\typescript.js:70630:85)
at getSourceFileFromReferenceWorker (C:\Users\William\Desktop\firebase-cms\node_modules\typescript\lib\typescript.js:70603:34)
at processSourceFile (C:\Users\William\Desktop\firebase-cms\node_modules\typescript\lib\typescript.js:70630:13)
at processRootFile (C:\Users\William\Desktop\firebase-cms\node_modules\typescript\lib\typescript.js:70484:13)
at C:\Users\William\Desktop\firebase-cms\node_modules\typescript\lib\typescript.js:69676:60
environment files are created and project is configured according to the README file.
In addition to issue #10 and as evident from this report there are two security issues with the current Firebase Database Rules:
/admins
and /users
./products
. I'm not sure it's an issue.Getting error 403 in Firebase Storage as well as getting error in firebase funcions
ReferenceError: error is not defined at admin.database.ref.once.then.then.then.then (/user_code/index.js:78:32) at process._tickDomainCallback (internal/process/next_tick.js:135:7)
Here is the Actual Code
// Add a payment source (card) for a user by writing a stripe payment source token to Realtime database
exports.addPaymentSource = functions.database
.ref('/stripe_customers/{userId}/sources/{pushId}/token').onWrite((change, context) => {
const source = change.after.val();
if (source === null){
return null;
}
return admin.database().ref(/stripe_customers/${context.params.userId}/customer_id
)
.once('value').then((snapshot) => {
return snapshot.val();
}).then((customer) => {
return stripe.customers.createSource(customer, {source});
}).then((response) => {
return change.after.ref.parent.set(response);
}, (error) => {
return change.after.ref.parent.child('error').set(userFacingMessage(error));
}).then(() => {
return reportError(error, {user: context.params.userId});
});
});
angular/service-worker is a good option to cache files for returning users.
angular.io source code provides nice way to update service worker on navigation event.
Something along the lines of https://github.com/angular/angular/blob/master/aio/src/app/sw-updates/sw-updates.service.ts and RefresherService
import { SwUpdatesService } from '../modules/sw-updates/sw-updates.service';
import { Injectable, OnDestroy } from '@angular/core';
import { Router, NavigationStart } from '@angular/router';
import { LoggerService } from './logger.service';
import { Subject } from 'rxjs/Rx';
@Injectable()
export class RefresherService implements OnDestroy {
private swUpdateActivated = false;
private unsubscribe: Subject<void> = new Subject();
constructor( router: Router, swUpdatesService: SwUpdatesService, private logger: LoggerService) {
swUpdatesService.updateActivated
.takeUntil(this.unsubscribe)
.subscribe( () => this.swUpdateActivated = true);
router.events
.takeUntil(this.unsubscribe)
.filter( event => event instanceof NavigationStart )
.subscribe( (event: NavigationStart) => {
if (this.swUpdateActivated) {
this.log(`Update during navigation ${event.url}`);
window.location.assign( event.url );
} else {
this.log(`No need to update on navigation: ${event.url}`);
}
})
}
private log( message: string): void {
this.logger.log('Service Worker Refresher', message);
}
public ngOnDestroy() {
this.unsubscribe.next();
this.unsubscribe.complete();
}
}
I needed to migrate the app to angular 6+ in order to use @ng-select https://www.npmjs.com/package/@ng-select/ng-select
This migration has been problematic, current issues when using ng-serve
Error TS2307
ng serve throws error TS2307 for every custom module non node-modules under app/...
this was the case with angular 6 aswell
outdated unsupported depencencies
//these depend on @Angular5 as the latest
import { CKEditorModule } from 'ng2-ckeditor';
import { DndModule } from 'ng2-dnd';
Resolved many of them by removing ````javascript 'app/ or adding ```javascript ./
src/app/admin/admin-routing.module.ts(4,32): error TS2307: Cannot find module 'app/admin/admin-components/admin/admin.component'.
But I still only get the issues for modules that are children of app/admin or app/storefront
Another unresolved error
src/app/storefront-components/checkout-shipping/checkout-shipping.component.ts(54,13): error TS2345: Argument of type '{ duration: number; extraClasses: string[]; }' is not assignable to parameter of type 'MatSnackBarConfig<any>'.
Object literal may only specify known properties, and 'extraClasses' does not exist in type 'MatSnackBarConfig<any>'.
src/app/storefront-components/login/login.component.ts(44,96): error TS2339: Property 'take' does not exist on type 'Observable<{}>'.
This is what I did so far
migrated to angular.json
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"testapp": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {},
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/testapp",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss",
"src/variables.scss"
],
"stylePreprocessorOptions": {
"includePaths": [
"src/scss"
]
},
"scripts": []
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "testapp:build"
},
"configurations": {
"production": {
"browserTarget": "testapp:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "testapp:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"karmaConfig": "src/karma.conf.js",
"styles": [
"src/styles.scss"
],
"scripts": [],
"assets": [
"src/favicon.ico",
"src/assets"
]
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"src/tsconfig.app.json",
"src/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
},
"testapp-e2e": {
"root": "e2e/",
"projectType": "application",
"architect": {
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "testapp:serve"
},
"configurations": {
"production": {
"devServerTarget": "testapp:serve:production"
}
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": "e2e/tsconfig.e2e.json",
"exclude": [
"**/node_modules/**"
]
}
}
}
}
},
"defaultProject": "testapp"
}
Migrated to @Angular/fire
// Migrated to from @angularfire2 to @angular/fire //
import { AngularFireModule } from '@angular/fire';
import { AngularFireDatabaseModule } from '@angular/fire/database';
import { AngularFireAuthModule } from '@angular/fire/auth';
//Migrated theming //
@import "~@angular/material/_theming.scss";
Converted Md format into Mat type
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {
MatButtonModule,
MatNativeDateModule,
MatInputModule,
MatDatepickerModule,
MatCardModule,
MatSnackBarModule,
MatSlideToggleModule,
MatSidenavModule,
MatToolbarModule,
MatListModule,
MatDialogModule,
MatGridListModule,
MatIconModule,
MatSelectModule,
MatOptionModule,
MatCheckboxModule,
MatMenuModule,
MatProgressSpinnerModule
} from '@angular/material';
const components = [
CommonModule,
MatButtonModule,
MatCardModule,
MatDatepickerModule,
MatDialogModule,
MatCheckboxModule,
MatGridListModule,
MatIconModule,
MatInputModule,
MatListModule,
MatMenuModule,
MatNativeDateModule,
MatOptionModule,
MatSelectModule,
MatSidenavModule,
MatSlideToggleModule,
MatSnackBarModule,
MatToolbarModule,
MatProgressSpinnerModule
];
@NgModule({
imports: components,
exports: components
})
export class MaterialComponentsModule { }
Current Packagelock.json
{
"name": "firebase-cms",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"hashcode": "node scripts/hashcode.js",
"deploy": "ng build --prod; firebase deploy",
"build-static": "node scripts/static-generator.js",
"deploy-static": "ng build --prod; node scripts/static-generator.js; mv static/* dist/; firebase deploy"
},
"private": true,
"dependencies": {
"@angular/animations": "^7.1.2",
"@angular/cdk": "7.1.1",
"@angular/common": "7.1.2",
"@angular/compiler": "7.1.2",
"@angular/core": "7.1.2",
"@angular/forms": "7.1.2",
"@angular/http": "7.1.2",
"@angular/material": "7.1.1 ",
"@angular/platform-browser": "^7.1.2",
"@angular/platform-browser-dynamic": "^7.1.2",
"@angular/router": "^7.1.2",
"@ng-select/ng-select": "^2.13.1",
"@angular/fire": "5.1.1",
"core-js": "^2.4.1",
"enhanced-resolve": "^3.3.0",
"firebase": "^5.5.0",
"hammerjs": "^2.0.8",
"ng2-ckeditor": "1.2.2",
"ng2-dnd": "5.0.2",
"rxjs": "6.3.3",
"zone.js": "0.8.26"
},
"devDependencies": {
"@angular/cli": "^7.1.2",
"@angular/compiler-cli": "^7.1.2",
"@angular/language-service": "^7.1.2",
"@angular/service-worker": "7.1.2 ",
"@types/ckeditor": "^0.0.34",
"@types/jasmine": "~2.5.53",
"@types/jasminewd2": "~2.0.2",
"@types/node": "^8.0.19",
"cheerio": "^1.0.0-rc.2",
"codelyzer": "4.5.0",
"fs": "0.0.1-security",
"inquirer": "^3.2.1",
"jasmine-core": "~2.6.2",
"jasmine-spec-reporter": "~4.1.0",
"karma": "~1.7.0",
"karma-chrome-launcher": "~2.1.1",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"mkdirp": "^0.5.1",
"nightmare": "^2.10.0",
"protractor": "~5.1.2",
"ts-node": "^3.3.0",
"tslint": "^5.5.0",
"typescript": "3.1.6"
}
Angular version and node version
Angular CLI: 7.1.2
Node: 8.9.4
OS: win32 x64
Angular: 7.1.2
... animations, cli, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router, service-worker
Package Version
-----------------------------------------------------------
@angular-devkit/architect 0.11.2
@angular-devkit/build-angular 0.11.2
@angular-devkit/build-optimizer 0.11.2
@angular-devkit/build-webpack 0.11.2
@angular-devkit/core 7.1.2
@angular-devkit/schematics 7.1.2
@angular/cdk 7.1.1
@angular/fire 5.1.1
@angular/material 7.1.1
@ngtools/webpack 7.1.2
@schematics/angular 7.1.2
@schematics/update 0.11.2
rxjs 6.3.3
typescript 3.1.6
webpack 4.23.1
Ng serve results
chunk {admin-admin-module} admin-admin-module.js, admin-admin-module.js.map (admin-admin-module) 1.45 MB [rendered]
chunk {main} main.js, main.js.map (main) 268 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 223 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 8.83 kB [entry] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 9.38 MB [initial] [rendered]
//Followed by errors outlined above //
Hi @alexabbott
I placed a pr for this update
#27
I intent to continue updating the CMS if you are on board of course :-)
Thanks
When i executed firebase deploy --only functions
terminal gave me an error like import * as functions from 'firebase-functions';
So this won't work properly.
Can you please more understandable and readable ReadMe.md file for this project? Maybe you can add more screenshots or how to videos too.
Some improvements could be made to support SEO. Maybe using an extension such as:
https://github.com/vinaygopinath/ng2-meta
SEO:
http://tools.neilpatel.com/en/analyze/https%3A%2F%2Ffir-cms-76f54.firebaseapp.com%2F
Structured data results:
https://search.google.com/structured-data/testing-tool#url=https%3A%2F%2Ffir-cms-76f54.firebaseapp.com%2F
Pagespeed results:
https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Ffir-cms-76f54.firebaseapp.com%2F
Lighthouse results:
https://developers.google.com/web/tools/lighthouse/
addPaymentSource | TypeError: Cannot read property 'val' of undefined at exports.addPaymentSource.functions.database.ref.onWrite.event (/user_code/index.js:70:28) at Object. (/user_code/node_modules/firebase-functions/lib/cloud-functions.js:112:27) at next (native) at /user_code/node_modules/firebase-functions/lib/cloud-functions.js:28:71 at __awaiter (/user_code/node_modules/firebase-functions/lib/cloud-functions.js:24:12) at cloudFunction (/user_code/node_modules/firebase-functions/lib/cloud-functions.js:82:36) at /var/tmp/worker/worker.js:728:24 at process._tickDomainCallback (internal/process/next_tick.js:135:7) |
---|
Hey Alex,
Love this CMS. I just pulled it down and built it, but in both my local version and the demo app, at the confirmation screen, the Stripe spinner never fetches any information from stripe and keeps spinning infinitely. It just hangs on 'verifying payment method'.
Any clue as to what it is?
It appears to validate the card correctly in test mode, as using a non-test card will throw an error.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.