This is structure of My Project (not of angular App)
.
├── App
| ├── Login
| ├── Projects
| └── Settings
|
├── Store (public but part of app)
|
.
├── Site
| ├── Homepage
| └── About
|
├── Help
|
.
└── Blog
- Web app is designed with Angular 4 and Firebase Hosting/Database and don't need SEO, but other public pages will.
- Public pages like about, homepage,help are designed with pure HTML, CSS and Vanilla JavaScript and Google Analytics for starter
- Blog will be made wither with angular, react or vue
This is what I expect or intend to build:
- mysite.com --- points of Homepage
- /about to about page
/help to help page
/blog to Blog Which is project in its own
/projects to user projects
- /tasks to user tasks
- /store, /settings to corresponding page or component
How other major players do it:
- Google Docs have /about for Site Homepage and googledocs.com for the webapp
- Dropbox has dropbox.com for homepage, /home for webapp, paper.dropbox.com for Dropbox Paper
- Asana has asana.com as homepage and app.asana.com for webapp
Current Working Solution:
Designed all these sections in single Angular 4 Application, build app, upload on firebase hosting in firebase project.
Concern with current solution:
I have no idea how these do that in background.
With Current Solution: 2.1 app will keep growing and Firebase Database will be a mess. 2.2 Size of app will be bigger and dependency tree will be bigger.
Q : Are above concerns justified ?
This is what I intend to do:
- I want to separate Site, App and Blog into their own projects.
- In future, I want to separate /projects and /tasks in my Webapp into two different apps.
And this is where I am unable to decide.
Concerns:
Separate root folders (after separating ) will have separate build files (dist folder), I can only upload one set of dist folder to firebase hosting.
Q: Can I achieve what I mentioned above within firebase or do I need any server-side code or firebase functions.
So, the question boils down to Hosting Multiple Angular 4 apps on a single firebase project + hosting + domain
Solution in my mind:
- create multiple firebase projects (already looks like a bad approach, but hey) and in custom domain give www.mysite.com/blog as the domain
- Or, custom domain can be app.mysite.com and blog.mysite.com
- With domain provider, use redirect like /about to page made with vanilla html , css and host on say godaddy, heroku.
- Use redirect for /blog to wordpress site.
I am ready for any solution. But more importantly I want a mental model to approach this.
