Use with Django

Has anyone here used Bootstrap Studio in conjunction with Django development? I bought bootstrap studio for some web work before and was wondering if I might be able to use this to help with my Django program.

I'm using a custom export script to add Django template markup to BSS pages. For example,

<div class="item" dj-for="i in items">
  <h2 dj-ref="i.name">This is the heading</h2>
  <div dj-ref="i.content|markdown">Lorem ipsum dolor sit amet …</div>
</div>

becomes

{% for i in items %}
  <div class="item">
    <h2>{{ i.name }}</h2>
    <div>{{ i.content|markdown }}</div>
  </div>
{% endfor %}

This means I get to do design in Bootstrap Studio, with fake page content that looks good in BSS, but it is easy to move from BSS to Django templates where real content from the site will be inserted instead. It was fairly straightforward to write the export script in Python based on BeautifulSoup. Works pretty well for me.

2 Likes

Dear Anslem,

Am very new to the Django development. Its exciting to know that you are integrated Django with Bootstrap in exporting. Kindly share the export script which you used. -Mahesh

Dear anselm, I am looking for your assistance, as soon as possible.

For anyone who is interested I have created a github repo so that we can share and expand on the code. I've added ability to create django if and block statements statements. https://github.com/lingster/django-bootstrap-studio-tools Please raise a ticket in GitHub for future improvements. PRs welcome!

I have been learning how to do something similar in a "testing environment" for integrating a CMS. I am actually using the link component feature of Bootstrap Studio save sections of code to a sub folder called templates which contain each block of code sections on a page I will make to dynamically update. After export, I use B Soup to parse the html templates, remove everything from the page except the block, and update, change, modify, append etc using all the wonderful option of B Soup. The nice thing about this is that any changes to my main project page is linked to the component page which also gets update everytime I export. I have one python script for the main pages that add lines of code to the top of the pages and changes designated links from html to php as well as stripping the code blocks that will be replaced by the php calls. The pages are converted to php extensions also on save.

I also apply beautify to the html or php files so everything comes out looking well formatted and nice looking too.

Soup is amazing.

1 Like

Wow, this is very interesting !

I'll take a look on your script ! I'm using Flask with Jinja (almost the same template engine).

After the script is run, are the files exported all you need to move into a django project and have going or do you still need to work out the view model and such?

Alternative to blingster repo, https://github.com/AbcSxyZ/bootstrap-studio-to-django-template

Will also move created files inside a django application folder.

2 Likes

@abcsxyz There is an issue with this script, namely, it’s not handling Django’s own view urls very well, i.e. I can’t find in the export script code any template “{% ur”.

I think I fixed it in my fork. There is just a “dj-to-url” attribute that you must put on the tag with the src or href attribute.

I then branch in the code and it outputs the right {{% url “my_page”}} format.

1 Like

See this SO answer here:

Is this what you’re looking for? I can show you how to run it, requires that you have Python installed but so does Django. I tried compiling ALL to EXE and it simply has a much longer loading time, but you want it to be fast on export from BSS, right? So this is the best way. If DEBUGGER_PATH.txt contains your path to wingdb.exe or if PyCharm’s debug exe is called with similar arguments you could use that. Then dev_bss_to_django.exe will call “[path to wingdb.exe] bss_to_django.py …” so that you can even help me debug this script when you run it from BSS!!!

If there is no DEBUGGER_PATH.txt the exe simply runs python bss_to_django.py. Anyway see the link for a screenshot. It produces really nice results.