Folks,
I am pretty sure I am not the first one to stumble on this problem. But somehow I am unable to find any relevant resources out there.
Here is my issue, I have a backend in Django and my front completely written in Reactjs- React Router - Redux (nice combo right).
when entering the url webhost.com/, django provides me with a page with links to a bundle that is my whole react application and different stylesheets
The problem arise when I want to refresh a page, the browser still tries to query the server even though a route exists in my react-router configuration.
I had a look at the answer here (catch-all option) React-router urls don't work when refreshing or writting manually , but I don't quite understand it and I am afraid to have a new redux state everytime Django will provide the user with a new page.
You can setup up a wildcard url pattern that will render the same view that gets rendered when a request is sent to webhost.com. I don't know if that's going to retain your store though.
Related
I'm creating a basic Ember application. I am trying to set up a backend that stores posts. I would like to have a system where I can go to some admin site that has a form that has all the fields for a post that allows me to add, update, and delete posts. For example, if I have a Post model with attributes like Title, Contents, Date_created, and Image, I would like to have these fields in a form in some kind of admin site.
One example from a past tutorial I have done is the Django admin site. Is it possible to set up a Django backend for my Ember app? The Django admin is here: (scroll to bottom)
https://docs.djangoproject.com/en/1.10/intro/tutorial02/
I know that asking how to set up a backend for my Ember application is a very general question, but I am confused as to where to start. I have already created a Post model with various attributes. I can create an Ember route that is a form to add a post, but then there comes authentication for that which I'm not really sure how to deal with either. That's why I came to Django because I remember they had a very nice admin site.
If it is not feasible to use Django to accomplish this, what are some other routes I can take to be able to get to some admin page where I can manipulate records and add new data to my website?
This is a pretty big question, but I feel your pain. Most tutorials are all, "so... just build out a rails app... or use all this long lost stubbing stuff... or here's a super outdated node server on github to use."
I would suggest breaking it down into pieces. Ember is really great, but–Yes–you need a backend. You could make a backend with Django(python), Rails(ruby), WordPress(PHP) + ember-wordpress, express or hapi(node), phoenix(elixir)- or really anything that will generate an API. You could also build an admin with Ember and then use that to send data to a service like parse or firebase. Those could get you an MVP while you learn more about how to build out a traditional back-end.
Django + http://www.django-rest-framework.org has a pretty great admin setup that builds out the admin and fields from your API specifications. I can see why people like it.
I would also mention, that ember-cli-mirage is great when you aren't sure what backend you'll have, but you need to have a mock-server to build off of.
If you can, choose something that will spit out an API with jsonAPI.
I would split this into 2 parts.
build out an Ember app with Mirage or some other temporary data.
build a back-end somehow.
Then you can connect them ~ without being stuck beforehand.
Good luck!
So pretty much a blog site where only person can create/delete/edit posts? If so then all you have to do is create a user with a predefined username and password in your Django app. You login through your Ember app. For this protected view you will need to use ember-simple-auth, which is the simplest way to implement something like this. Google ember-simple-auth and run its dummy app to see what they are doing.
I had the following idea: my page at example.org serves classic HTML from the server. Besides, EmberJS is loaded, too, and waiting to come into action:
as soon as somebody hits an ember route then, for example example.org/#/login, the current should be replaced by what the view renders for it. From then, the whole app should serve as one-page-app.
Is that a good idea? Anyway, I don't know how to get that started. Overriding View's appendTo method or setting the rootElement property as in http://emberjs.com/guides/configuring-ember/embedding-applications/ does not suffice because if that were the body, the view output is just appended there…
If your entire Ember application requires a user to be logged in, it is valid to have two separate "apps":
A regular non single-page application (server-side using rails, PHP or C#) with a sign up and login pages
A single-page application (i.e. Ember) send as soon as the user hits the login button in your regular app
You will have 2 index.html pages, one for each application (and it's okay to do that!). The URL of the Ember App could be under example.org/app/.... You will need to configure the router of the regular application to server your Ember App for all URLs starting with /app/.
Does that help? :)
I am concerned about page ranking on google with the following situation:
I am looking to convert my existing site with 150k+ unique page results to a ember app, off the route. so currently its something like domain.com/model/id - With ember and hash change - it will be /#/model/id. I really want history state but lack of IE support doesn't leave that as a option. So my Sitemap for google has lots and lots of great results using the old model/id. On the rails side I will test browser for compatibility, before either rendering the JS rich app or the plain HTML / CSS. Does anyone have good SEO suggestions with my current schema for success.
Linked below is my schema and looking at the options -
http://static.allplaces.net/images/EmberTF.pdf
History state is awesome but it looks like support is only around 60% of browsers.
http://caniuse.com/history
Thanks guys for the suggestions, the google guide is similar to what I'm going to try. I will roll it out to 1 client this month, and see what webmasters and analytics show.
here is everything you need to have your hash links be seo friendly: https://developers.google.com/webmasters/ajax-crawling/
basically You write Your whole app with hashlinks, but You have to add "!" to them, so You have #!/model/id. Next You must have all pages somewhere generated and if google asks for them, return "plain html" as described here: https://developers.google.com/webmasters/ajax-crawling/docs/getting-started
use google webmaster tools to check if Your site is crawlable.
I'm not sure if you're aware that you can configure Ember to use the browser history for the location API and keep using your pages the way they are reference now. All you need to do is configure the Route's location property
App.Router.reopen({
location: 'history'
});
See more details about specifying the location api here
I have a backbone.js single-page app that is all set up with the router (well, actually a Backbone.Marionette app with a Backbone.Marionette AppRouter, but nevertheless). However, the backend is based in Django, where I do not have the URL conf directing to views for all URLs that are already in the backbone.js routes.
Based on the existing URLs in the Django URL conf, Backbone.js will serve the backbone routes regardless of what is listed in the Django conf - it seems something, anything just needs to be there.
Do I need to have proper Django views in order to offer a fallback for older browsers/SEO?
What are the best practices to coordinate the Django URL conf and the Backbone.js Router?
I've found a post that addresses this issue quite well:
http://duganchen.ca/single-page-web-app-architecture-done-right/
Briefly, my reasoning for including a fallback is for non-javascript browsers and SEO reasons. At the time of this post, non-javascript browsers account for ~1.4% (less than 2% from everything I've read) of users, making SEO The major consideration. Again, SEO may not be relevant for everyone reading this post, in which case, this can be skipped.
I found Thomas Davis' tutorial using phantom.js quite helpful. http://backbonetutorials.com/seo-for-single-page-apps/
However, another issue that I needed to account for was the history API, which has been neglected by all but the latest IE browsers. Given my client's users, about 15% of which are using IE <= 9, this was also a problem.
In the end, I also needed to use history.js. All in all, this was a lot of work to update an otherwise very simple website. However, I learned a lot from this ordeal.
In my opinion if your backbone app is truly a single page then you don't need any django views whatsoever. You can serve your index.html as a static file (in production, not even by django) and then let backbone's router take care of your url configuration, as you're doing already. You can use backbone's history and navigate to fake urls, add urls parameters etc, for resources in your app.
I am creating an Ember.js application which basically has a very simple UI: header, content, footer -- all this in the application layer.
But, when you see the site at first, you have a hybrid application -- google needs to reach parts of it, but login, registration, dashboard, and other pages, should be handled by Ember.
And I might have a bit of an issue, because if I render some views, say on the homepage, in some outlets, then those outlets are going to be different after login, on the user's dashboard.
I cannot show off the UI, but i could try to provide more details if needed.
My question would be how to handle this issue?
I used a bit of a hack for now: just before Ember initialize, I remove from the DOM the content rendered server-side.
This might be ugly, but it works. This way robots may reach the content I want them to reach, the users on the other hand will see something better.