Creating SPAs with ember

Hi, I was wondering how to create real SPAs with Ember? I mean no reload on page when click, exacly like https://library-app.firebaseapp.com/ . I’m aware of GitHub - zoltan-nz/library-app: Detailed Ember.js Octane v3.21 tutorial for absolute beginners. https://yoember.com and also GitHub - broerse/ember-cli-blog: Tom Dale's blog example updated for the Ember CLI . But I was just wondering to create something simpler and no need to write some codes on our own to implement this , like something default inside the framework itself. Since this is kinda common in other frameworks I’m looking for it in Ember too and there is a way. Thanks

Hi @hosein2398, could you clarify what exactly you mean? Ember is an SPA framework, so any Ember app is a single page application.

Hey, I mean sites that does not reload the page when going to another page. Like this site that we are in right now. Or like https://library-app.firebaseapp.com/ , when you click on a link in that page whole the page is not realoding but the proper component only will be rendered and the menu and footer does not change. Actually only one part of the page is changing and also the route changes for that component. Hope this helped , did it?

That does help, but that’s how Ember works by default. In fact I don’t even think I’ve seen an Ember app that reloads during navigation. Can you provide an example of that sort of behavior?

https://emberjs.com/ uses Ember but it realods. About not reloading I mean sites like this one https://preactjs.com/ if you go here and click on any of menu links , page content is changed and also the route is changed without any reload on page

Actually I don’t think https://emberjs.com does use Ember, I think it’s a static site. Ember Inspector does not recognize it as an ember app:

Also the source code for the “guides” site is here and as you can see it is not an Ember app.

It does seem a little strange that an SPA framework site wouldn’t be written in that framework, but I’m guessing it has something to do with the ease and maintainability of a static docs page.

Oh and the main site code is here: GitHub - emberjs/website: Source for emberjs.com

Also doesn’t appear to be an Ember app.

Anyway, all that to say, I don’t think the Ember website itself is a good example to look at for how Ember looks in production, I think the ones you already provided are much better. Ember works like that by default and you shouldn’t have to do anything special to get the behavior you described, which is good news! Hope all that helps.

My bad that’s right , Ember works like that by default. I’m sorry

Some parts of Ember website are available as Ember Apps, while others are being re-written .

Ember Builds - Currently GA

Ember API - Currently Beta

This Site

You might also want to look at NASA :slight_smile:

1 Like

This site - that you are on… discuss.x.com - is built with Ember. So, you can use this as an example.

Yes I said that on my second reply.