firstorder-gmbh/firstorder.io

First Order Angular Universal Material + Firebase Firestore website

firstorder.io

ORDER, ORDER, ORDER!

First Order's mission is to develop websites with cutting edge technology and best web design guidelines that support all devices and browsers.

Packages & Features

• Angular 7+: Single-page application
• Universal: Prerender, Better performance, SEO friendly
• Material: Best design, angular components
• Theming: 6 Themes: Light-Grey, Dark-Grey, Light-Indigo, Dark-Pink, Light-Deeppurple, Dark-Purple
• Translate: English, German and Arabic
• Bidi: Right-To-Left for Arabic
• RxJS: Reactive Extensions for JavaScript
• HtmlLint: Lint all Html templates
• StyleLint: Lint all scss files
• TSLint: Lint all TypeScript files
• Travis CI: Continuous Integration with Travis
• Firebase: Deploy website on Firebase

Getting Started

Firebase

This website uses Google Firebase as back-end.

• You will need to create a Google account if you don't have one
• Get started with the Spark Plan, you can upgrade later
• Create a project in the Firebase Console, name it yourwebsite-com (if your domain is yourwebsite.com, we replace the dots with -)
• Goto Develop -> Authentication and click on Web Setup button on the upper right side, copy the config values there to src/environments/environment.ts and environment.prod.ts
• Edit in src/environments/environment.prod.ts the origin path with https://yourwebsite.com, to solve some CORS problems on production
• Edit .firebaserc file in this repo and put yourwebsite-com, you will use it with the firebase terminal commands
• Search the entire repo for 'firstorder', check carefully every occurrence and replace it with 'yourwebsite', particularly in angular.json and package.json

Database

This website uses Cloud Firestore as a database, it's a NoSQL cloud database to store and sync data for client- and server-side.

• In your Firebase Console goto Develop -> Database and select Cloud Firestore
• In this repo there is a backups/myDatabase dump which you can manually restore in the console data editor
• Or use firestore-backup-restore to restore it automatically

npm install -g firestore-backup-restore

• To restore the database, open terminal in the root project folder and run

firestore-backup-restore --accountCredentials path/to/account/credentials/file.json --backupPath backups/myDatabase

• To backup the database again, run

firestore-backup-restore --restoreAccountCredentials path/to/account/credentials/file.json --backupPath backups/myDatabase --prettyPrint

Note: All titles and descriptions MUST be defined in English in the database under the 'en' parameter, and optionally in other languages 'de', 'ar'. This to ensure proper fallback to 'en' in case a translation is not found.

Storage

Firebase Storage can keep all the files that are not static assets to the project. These can be product files, profile pictures or uploaded files.

We recommend storing file metadata in the Database using the same path and :fileid like is Storage:

Database/files/:fileid/metadata
Storage/files/:fileid/filename.ext

Installation & Build

• To view/debug/test the website we use Google Chrome.
• Install Visual Studio Code. Also install the recommended extensions when prompted.
• Install Node.js & npm
• Open the project in Visual Studio Code, goto -> View -> Terminal and run:

npm install or yarn
sudo npm install -g firebase-tools
cd functions && npm install && cd ..

For Development (Client-side only rendering)

• run npm run start which will start ng serve. You can now test your website locally with Chrome on http://localhost:4200

For Production (also for testing SSR/Pre-rendering locally)

• npm run build:ssr && npm run serve:ssr - Compiles your application and spins up a Node Express to serve your Universal application on http://localhost:4000.

• npm run build:prerender && npm run serve:prerender - Compiles your application and pre-renders your applications files, spinning up a demo http-server so you can view it on http://localhost:8080

Note: To deploy your static site to a static hosting platform you will have to deploy the dist/browser folder, rather than the usual dist

Hosting

Firebase Hosting can be used to host your static dist/browser website files. It takes care of your https security certificates for free, caches your files and much more.

• First connect your domain to the hosting in the Firebase console -> Development -> Hosting.

You should have 3 domains like this:

yourwebsite-com.firebaseapp.com => Default (already created)
yourwebsite.com => Serve traffic from this domain
www.yourwebsite.com => Redirect this domain to another -> yourdomain.com

• Here is how you can deploy your website

• In this repo the firebase.json file is already initialized to deploy your static pre-rendered files from the dist/browser folder to Firebase Hosting, so just run:

firebase login
firebase deploy

All done. Navigate to https://yourwebsite.com to see it live.

License