So I recently accomplished making a website using Ionic3 (https://pjaguar.com/) for my company. I’d like to give a big shoutout to all the Ionic developers for this amazing framework. Anyway, here’s how I did it:
1: Make an Ionic 3 project directory. You can find out how almost anywhere.
2: Run ionic serve (Using Ionic-lab would be futile)
3: Make a separate directory using the firebase-cli command: firebase serve
4: Ionic serve makes a folder in your Ionic Project Directory’s /www called: build.
Copy build (and assets if needed).
<img src="//cdck-file-uploads-global.s3.dualstack.us-west-2.amazonaws.com/ionicframework/original/3X/7/a/7a3d19302b2d1b5d53d9407a5a6cdc76fcf29240.png" width=600" height=“300”>
5: Paste them into your firebase directory public folder.
You may also want to copy over your index.html for SEO and website meta data.
5: Run firebase deploy in your Firebase project directory and you should be able to see your progress in your hosting site URL.
Making URLS
2: Now, in Ionic 3 lazy loading, it actually makes a URL for every page with the @IonicPage decorator. You can modify this URL using the segment in @IonicPage object
@IonicPage({
segment : "new-assignment"
})
@Component({
selector: 'page-new-assignment',
templateUrl: 'new-assignment.html',
})
export class NewAssignment {
constructor(
public navCtrl: NavController,
public navParams: NavParams) {}
3: For pages that are details for items or whatnot…
@IonicPage({
// defaultHistory: ["HomePage"],
segment: 'assignments/:sbaid/drive&=sdk/:timestamp',
})
@Component({
selector: 'assignment-content',
templateUrl: 'assignment-content.html',
})
export class AssignmentContent {
constructor(
public navCtrl: NavController,
public navParams: NavParams) {}
Connecting to Domain
I bought my domain from https://domains.google.com . Google all the way.
The process of connecting your Firebase Hosting Site to your domain is quite easy. The domain info screen should have a DNS configuration section at the bottom. Firebase Hosting will give you the 2 DNS config numbers in which you input into your Site Config.
Detailed explanation: https://stackoverflow.com/a/43301248
Extra Resources I used
1:
Code to find out if an ID/Item exists in Firebase database:
Taken from: https://gist.github.com/anantn/4323949
My modifications in my project:
@IonicPage({
// defaultHistory: ["HomePage"],
segment: 'assignments/:sbaid/drive&=sdk/:timestamp',
})
@Component({
selector: 'assignment-content',
templateUrl: 'assignment-content.html',
})
export class AssignmentContent {
constructor(
public navCtrl: NavController,
public navParams: NavParams) {
this.validateID()
}
validateID(){
this.eventsdata.getrequestDetail( this.navParams.get('sbaid')).once('value', ((snapshot)=> {
var exists = (snapshot.val() !== null);
this.AssignmentExistsCallback( this.navParams.get('sbaid') , exists);
})
)
}
AssignmentExistsCallback(sbaId, exists) {
if (exists) {
this.show = true
this.Sbaiid = sbaId
this.LoadAnswers()
setTimeout(()=>{
this.LoadAnswers()
},3000)
} else {
this.veryCustomShowAlert("Whoops 🛫","Sorry, the assignment you requested does not exist", "Ok","Cancel")
}
}
this.eventData.getRequestDetail()
getrequestDetail(aid): any {
return this.sbaList.child(aid);
}
Example: This URL contains an ID that does not exist in my Firebase database. Observe how the code handles it:
https://pjaguar.com/#/assignments/paIdye0DFZ/drive&=sdk/1234525345.54
2:
Code to center items on page and applies padding where needed to improve website UX
(Taken from the Ionic 3 conference app)
app.scss
.innercontent-padding ion-card-header .item {
padding: 4px 30px;
}
.innercontent-padding ion-card-header,
.innercontent-padding ion-card-content,
.innercontent-padding ion-card-content .list ion-item-content, {
padding: 0;
}
@media (min-width: 600px) {
.innercontent-padding {
width: 60%;
margin: 23px auto;
}
}
Usage anypage.html
<ion-header >
</ion-header>
<ion-content class="outer-content speaker-list">
<ion-card class="innercontent-padding" text-wrap>
</ion-card>
</ion-content>
(Taken from Ionic 3 Conference app: list of speakers page)
- Hints and Important Notes
My firebase database version is 3.7.5
Modals do not load when a @IonicPage decorator is attached so use the “app.module.ts” to initialize them.
Thank you! I hope to see more websites made with Ionic soon! If there are any suggestions or questions, proceed to the comments below.
