Logo

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