What is the best way to implement isomorphic react app using webpack with python as backend to serve
Following features are required to be implemented
1. React router
2. Redux store
By Isomorphic, I understand you mean both rendered on the server & on the client - so the first access of the site will return static HTML and a javascript bundle which then replaces the static HTML with the react-rendered version.
Usually this would mean running javascript on the server too with Node.js. This means you can render your JSX / React templates / components on the server and send them as static HTML to the user. If you're working with Python on the server, you cannot use your JSX / Javascript templating & logic on the server, so you'll need to duplicate it in Python.
So since you have to do it all twice - you first need to work out which one you want to do first. Either in Python first, or Javascript.
You can either start by building the whole application server-side-rendered, and then have javascript take over, or build a fully javascript application, and render the first views with Python.
Personally, for content-driven sites, I prefer building a server-side rendered application with Django (the most used Python Web Framework), and then adding Javascript on top once it's all fully working as a javascriptless site. This has the advantage of working even when javascript is disabled, and ensures you have good URLs, etc.
Of course, if it's a really complex application in terms of user interaction, you'll need to do it the other way.
I recomend looking into Django first, Here is a great tutorial from django-girls. However, if you want to go the mainly-JS route, here's some ideas:
Javascript First
Probably the best way is to first design your data structure(s), and make a REST api for your data. (e.g. /api/1.0/cars/rustbucket_94 which sends JSON data.)
Next, figure out your user-facing URL schema, and work out which REST endpoints need to be pulled in to get those pages. (How the URLs should look to the end users. e.g. /cars/rustbucket_94.html)
Design your React app as normal, using those REST / JSON endpoints, and the react router to show it correctly.
Once you have your whole react app working, you can now build a server-side rendered version of the whole thing, which you'll need to re-implement from scratch, and can either access the data through the JSON endpoints (slow) or by making the queries itself inside the pages.
The Python side
Which Python Framework to use on the backend?
I'd recommend Django to start with. It's very capable and can do ANYTHING you want it too. You probably need the Django REST framework too. There are other options available, but this will be the quickest way to get something secure and sane running.
Getting Django to work nicely with your webpack / react workflow is not too complex. There are projects like Django-Webpack-Loader and various tutorials about it online showing how to use it.
Good luck.
Related
My company is evaluating Wagtail as a CMS for parts of our website. Currently we're running Python 2.7 and Django 1.5 (don't ask...). We have the ability to run Wagtail on a separate instance which can include the most current versions of Python/Django but we will not be able to run Wagtail out of the box within our main application.
We're looking at using Wagtail strictly as a CMS, then proxying requests from our main website to the Wagtail instance and returning just the generated markup.
Is there anyone who has done something like this, of could offer insight into the process we might take? Does Wagtail offer functionality like this out of the box? What potential pitfalls might we encounter, or things we should watch out for?
This could mean that instead of "entire pages" stored in Wagtail, we treat it as a way to store distinct content fragments: A paragraph of text which would be loaded into our homepage, or the outer wrapper of a dynamic search results page.
Yes, Wagtail does offer functionality like this, via its API:
http://docs.wagtail.io/en/v2.1/advanced_topics/api/
You could consume the API from the front-end of your main website, using JavaScript (React and Vue are popular options for this approach, but they aren't necessary if you don't need a complex Single Page Application with routing etc), or from the back-end, making HTTP requests from the views of your Django 1.5 app.
As for potential pitfalls, the main issue is that Wagtail previews won't work out of the box, since Wagtail doesn't know about how the content will be rendered. If you have a predictable URL structure on the site that's rendering Wagtail API content, the preview mechanism can be configured to handle this.
If the API approach isn't what you have in mind, you could also consider ways of embedding rendered fragments in the main site. For example, if you use Varnish in front of the main site, you could take advantage of Edge Side Includes:
https://varnish-cache.org/docs/3.0/tutorial/esi.html
Finally, you may find this recent talk on Wagtail as a 'headless' CMS useful:
https://www.youtube.com/watch?v=HZT14u6WwdY (video)
https://docs.google.com/presentation/d/1ZYMogOeXKCCmr7hDZnzx0euw2pD5VCwtv3a7zHB4FW0/ (slides)
https://github.com/openstax/openstax-cms (code)
Essentially, my questions are as stated above in the title. What I'm really seeking to know is why it would be privy of me to build a web-page utilizing the Django framework as opposed to solely building it out with HTML5 and CSS3.
I do know that Django utilizes bootstrapping of HTML5 and CSS and this is where my questions are raised over the efficiency of using the Django framework as opposed to solely using HTML5/CSS3.
1.) What are the advantages of Django?
2.) What does utilizing the Django framework offer me that HTML5/CSS3 do not?
3.) HTML5 can also build dynamic web-pages as can Django. Why would Django be better for a dynamic web-page?
I am looking for a very valid answer here as I am about to start building my web-page. The responses I get to these questions will be the nail in the coffin for which method I will be using to build the web-page. Thanks ladies and gentleman and I hope you find this question to be worth your while in answering.
Django is a server side framework. So it has little to do with HTML.
Django will give you easier/standardized ways to handle HTTP requests, and to manipulate entries in the database, among other things.
HTML5 alone doesn't enable dynamic web-pages. You can have interactive web pages, but they will always be the same, for every user, whenever you access it.
Django is a python web application framework that allows you to send requests from your page to a server that will in turn provide a response back to your web page.
Advantages: The power of Django is the ability to quickly get both the client ( your page ) and the backend ( the server-side logic ) setup. The backend can include writing to a database, processing information, retrieving information which is subsequently a response delivered to your web page.
HTML5/CSS3 is markup languages for your web page. You can use a editors like sublime or even notepad ++ if you are building a static web page. Django, like most web app frameworks, are used because of what I've described in #1 ( and many other unlisted reasons ).
HTML5 provides the ability to make dynamic web pages ( using a client side library like JQuery as an embedded script ), Django helps you build web apps. You can write a web page using only HTML5 and JQuery to display list of tv shows that are currently on ABC by listing what is currently playing today, but what about for tomorrow? You need server-side help by creating response that will fetch all shows for tomorrow by calling the ABC API. Take a look at server-side logic and web applications.
In short, there are web pages and web applications. Sounds like to me you are building the former, so Django might be overkill.
1.) What are the advantages of Django?
Server-side scripting without the necessity to use PHP. If you already worked with Python, you don't need to learn another language for you server-side.
2.) What does utilizing the Django framework offer me that HTML5/CSS3 do not?
Hm, deployment to a server, handling user requests and dynamically generated webpages. You mentioned making an intricate website in a comment. I don't know what you mean by that, but a framework will let you do this way faster then without. Especially, if you only rely on client-side JS with static HTML5 and CSS3, I'm fairly certain you will have a hard time achieving your goal.
3.) HTML5 can also build dynamic web-pages as can Django. Why would Django be better for a dynamic web-page?
I'm not really sure you understand what dynamic means. Dynamic means generated from code, as opposed to static, which means served directly from an .html file. Django let's you do both, it's a framework and offers lots of flexibility.
If you want to serve same dish for all visitors to your site, HTML is fine. But if you want to server different dish to different user then you'll need ingredients and a way to churn them. Ingredients can be users, their profile and preferences, location, and other entities users are dealing with. Django is one way to churn all of these together and present (in HTML for example) to users.
I'm building a large application with Django and Angular. One portion of the app should be a fully-fledged wiki. Rather than reinvent the wheel, I looked at Django-Wiki as a good wiki implementation.
The problem is I need to incorporate it into my single-page Angular app, which makes data requests to Django's REST Framework. How can I make Django avoid connecting to the Angular single page app for requests to certain URLs, say "/wiki"?
If there is an Angular plugin that creates a wiki interface, that would also be really helpful.
I'm writing a set of REST services for a Django project. I've been using django-rest-framework for a while. Because of its limited functionality I had to switch to django-piston which I quite enjoy.
However, django-rest-framework had one really nice feature - it was able to display an admin-like interface for testing the created services from the browser. It's just terrific for debugging purposes. It's very simple: one form is displayed for each HTTP method like "GET", "POST", etc. Along with that a drop-down list of available content types and a text field for putting in the data to be sent.
As I view it, this isn't really a feature in any way directly connected with a particular REST framework. It isn't even necessarily about Django. It could all be achieved just using HTML + JS, or an external website.
My question is: What do you use for manual testing / debugging web services? Could you point me to some HTML snippet or a Django app that would do the described thing?
This may seem obvious, but:
Why not just use Django's testing client (django.test.client.Client)? then instead of manually 'debugging' in your browser, you can write unit tests with expectations and get leverage out of those further down the track.
e.g.
from django.test.client import Client
client = Client()
resp = client.put('/employee/2/', data={'email': 'here#there.com'}, follow=True)
#... etc
As the author of django-rest-framework it'd be great to pick your brains about which bits of functionality could do with fleshing out. :) (obv i've got some thoughts of my own and areas I'm planning to work on, but be really good to get some user perspective)
Your absolutely right about the API browser not being limited to any particular framework. To me that's the big deal with DRF and I'd love to see more API frameworks take a similar approach. One of the supposed benefits of RESTful APIs is that they should be self-describing, and it seems counter-intuitive to me that so many of the Web APIs we build today are not Web browseable.
Oh, and totally agree with jsw re. testing Web APIs in django, I wouldn't use the framework's browsable API to replace automated tests.
I had the same problem and that was eaily solved by logging out of admin page in that project.
For some quick background, I'm an XHTML/CSS guy with some basic PHP knowledge. I'm trying to dip my feet into the Python pool, and so far understand how to start simple_server and access a simple Hello World return in the same .py file. This is the extent of what I understand though, heh.
How do I integrate the simple_server and your basic XHTML/CSS files? I want to start the server and automagically call, for instance, index.py (does it need to be .py?). Obviously within the index file I would have my markup and stylesheet and I would operate it like a normal site at that point.
My eventual goal is to get a basic message board going (post, edit, delete, user sessions). I realize I'll need access to a database, and I know my way around MySQL enough to not have to worry about those portions.
Thanks for the help.
EDIT: Allow me to clarify my goal, as I have been told Python does a LOT more than PHP. My goal is to begin building simple web applications into my pre-existing static XHTML pages. Obviously with PHP, you simply make sure its installed on your server and you start writing the code. I'd like to know how different Python is in that sense, and what I have to do to, say, write a basic message board in Python.
The other answers give good recommendations for what you probably want to do towards your "eventual goal", but, if you first want to persist with wsgiref.simple_server for an instructive while, you can do that too. WSGI is the crucial "glue" between web servers (not just the simple one in wsgiref of course -- real ones, too, such as Apache or Nginx [both with respective modules called mod_wsgi] as well as, for example, Google App Engine -- that one offers WSGI, too, as its fundamental API) and web applications (and frameworks that make it easier to write such applications).
Everybody's recommending various frameworks to you, but understanding WSGI can't hurt (since it will underlie whatever framework you eventually choose). And for the purpose of such understanding wsgiref.simple_server will serve you for a while longer, if you wish.
Essentially, what you want to do is write a WSGI app -- a function or class that takes two parameters (an "enviroment" dictionary, and a "start response" callable that it must call back with status and headers before returning the response's body). Your "WSGI app" can open your index.py or whatever else it wants to prep the status, headers and body it returns.
There's much more to WSGI (the middleware concept is particularly powerful), though of course you don't have to understand it very deeply -- only as deeply as you care to! See wsgi.org for tutorials &c. Gardner's two-part article, I think, is especially interesting.
Once (and if that's your choice) you understand WSGI, you can better decide whether you want it all hidden in a higher level framework such as Django (so you can focus on application-level issues instead) or use a very light and modular toolbox of WSGI utilities such as Werkzeug -- or anything in-between!-)
I would recommend Django.
"Obviously with PHP, you simply make sure its installed on your server and you start writing the code."
Not true with Python. Python is just a language, not an Apache plug-in like PHP.
Generally, you can use something like mod_wsgi to create a Python plug-in for Apache. What you find is that web page processing involves a lot of steps, none of which are part of the Python language.
You must use either extension libraries or a framework to process web requests in Python. [At this point, some PHP folks ask why Python is so popular. And the reason is because you have choices of which library or framework to use.]
PHP parses the request and allows you to embed code in the resulting page.
Python frameworks -- generally -- do not work this way. Most Python frameworks break the operation down into several steps.
Parsing the URL and locating an appropriate piece of code.
Running the code to get a result data objects.
Interpolating the resulting data objects into HTML templates.
"My goal is to begin building simple web applications into my pre-existing static XHTML pages."
Let's look at how you'd do this in Django.
Create a Django project.
Create a Django app.
Transform your XTHML pages into Django templates. Pull out the dynamic content and put in {{ somevariable }} markers. Depending on what the dynamic content is, this can be simple or rather complex.
Define URL to View function mappings in your urls.py file.
Define view functions in your views.py file. These view functions create the dynamic content that goes in the template, and which template to render.
At that point, you should be able to start the server, start a browser, pick a URL and see your template rendered.
"write a basic message board in Python."
Let's look at how you'd do this in Django.
Create a Django project.
Create a Django app.
Define your data model in models.py
Write unit tests in tests.py. Test your model's methods to be sure they all work properly.
Play with the built-in admin pages.
Create Django templates.
Define URL to View function mappings in your urls.py file.
Define view functions in your views.py file. These view functions create the dynamic content that goes in the template, and which template to render.
Take a look at CherryPy. It's a nice http framework.
It depends on what you want to achieve,
a) do you want to just write a web application without worrying too much abt what goes in the background, how request are being handled, or templates being rendered than go for a goo webframework, there are many choices simple http server is NOT one of them. e.g. use django, turbogears, webpy, cheerpy, pylons etc etc
see http://wiki.python.org/moin/WebFrameworks for full list
b) if you want to develope a simple web framework from start so that you understand internals and improve you knowledge of python, then I will suggest use simple http server
see
how can you create a URL scheme so that URLs are dispatched to correct python function,
see how can you render a html
template e.g. containing place
holder variables $title etc which
you can convert to string using
string.Template
b) would be difficult but interesting exercise to do, a) will get you started and you may be writing web apps in couple of days