Thank you a lot for this tutorial series, they help me a lot getting started with web-development from the beginning!
However, I had some problems, which you did not cover (I wonder why you did not have the same problems? I had them on Windows, did not test the tutorial part 4 on Ubuntu yet), especially with the template-part:
First, when I tried to run the server straight forward after doing 1:1 what you did (except that I used axios), there was a blank page and the console said error 404 file .../static/css not found.
I googled for a few hours and eventually managed to figure out that the files config/index.js and format_index_html.py where messing around with the static file paths of the generated index.html.
I also discovered strange artifacts in the final index.html using your format_index_html.py code: I truly believe, that the "' %}" in the css and js lines are messing up the final index.html completely, at least it has a completely broken syntax when I open the index.html in IntelliJ and improve the formatting with "Reformat Code". When I removed the mentioned symbols from the two lines so that the format_index_html.py now looks like the following, I got a valid index.html instead:
import sys
import fileinput
file = 'templates/index.html'
with open(file, "r+") as f:
s = f.read()
f.seek(0)
f.write("{% load staticfiles %}\n" + s)
for i, line in enumerate(fileinput.input(file, inplace=1)):
sys.stdout.write(line.replace('href=//', "href=\"{% static '"))
for i, line in enumerate(fileinput.input(file, inplace=1)):
sys.stdout.write(line.replace('css', "css"))
for i, line in enumerate(fileinput.input(file, inplace=1)):
sys.stdout.write(line.replace('src=//', "src=\"{% static '"))
for i, line in enumerate(fileinput.input(file, inplace=1)):
sys.stdout.write(line.replace('js', "js"))
Also, I needed to modify the file vuedj/settings.py a bit, so that the statics-part looks like this:
However, I am getting a strange webpack-copy error then:
[copy-webpack-plugin] ERROR in [copy-webpack-plugin] unable to locate 'C:\path\to\my\project\static' at 'C:\path\to\my\project\static'
for which I could not find a solution so far. This prevents the files from proper translation, which results in runtime errors where the browser is complaining that it cannot recognize "import"-statements in javascript.
Do you have any idea how to fix that?
I already tried to read about webpack and the configuration of webpack. I just figured out that the difference between npm run dev and npm run build is, that statics and static file copies are only used at npm run build, which is the reason why I did not get errors during npm run dev.
Ryan is an engineer in the Sacramento Area with a focus in Python, Ruby, and Rust. Bash/Python Exercism mentor. Coding, physics, calculus, music, woodworking. Looking for work!
Hmmm... I’m not sure. I wrote this post a good while ago, but I do remember that the vue Django starter repo probably ended up causing more problems than it solved. I’ll take a look at the error you’re talking about and see what I can do.
Ryan is an engineer in the Sacramento Area with a focus in Python, Ruby, and Rust. Bash/Python Exercism mentor. Coding, physics, calculus, music, woodworking. Looking for work!
From your code snippets, my first guess is that you should probably look at what your Django config’s static_root is set to. See these docs. Specifically the Deployment section. Make sure that’s outputting to the right place. Let me know if this solves it, but otherwise I’ll look deeper as soon as I can.
Thank you for the quick response!! I'll try it out, and I am curious. I played around with these static settings for quite a time already, and am not yet 100% sure what the right settings should be, so this is definitely a good start :)
Ryan is an engineer in the Sacramento Area with a focus in Python, Ruby, and Rust. Bash/Python Exercism mentor. Coding, physics, calculus, music, woodworking. Looking for work!
I created a python virtual environment: py -3.6 -m venv .venv. You could probably also use python36 -m venv .venv or just python3 -m venv .venv depending on the versions of Python you have.
I installed the JavaScript requirements: npm install
I ran the build: npm run build
Since I'm on windows, I had to manually run each of the steps in deploy.sh manually. First was python format_index_html.py.
As you noticed earlier, format_index_html.py has some issues. I went into /templates/index.html manually and fixed the script tag to have these contents: <script type=text/javascript src="{% static 'app.7ff6b55ccbb5cd067a3d.js' %}"></script>. I think it was just some punctuation tweaks. Your app..js will be slightly different each time.
I installed the Python requirements: pip install -r requirements.txt
I ran collectstatic, which grabs your bundled app and puts it in your static directory: python manage.py collectstatic --noinput
I ran the server: python manage.py runserver
Everything worked like I expected with no import errors.
I notice that the STATIC_URL is different than what you said you're using. Give that a try.
I also don't see the copy-webpack-plugin in my package.json for that repo. Are you using the same versions as me? It wouldn't surprise me if you weren't because my package.json is probably out of date with today's JS standards. Compare with my package.json to be sure.
Ryan is an engineer in the Sacramento Area with a focus in Python, Ruby, and Rust. Bash/Python Exercism mentor. Coding, physics, calculus, music, woodworking. Looking for work!
By the way, I've got some ideas in the works for writing a new set of articles that are updated for more modern times: Vue 2, vue-cli, Django 2, etc. I'm not sure when I'll get time to work on them, but I know that these articles and the library versions used here are slowly becoming obsolete.
Really nice, that you tried to reproduce my setup, and that you reply so fast! Appreciate that!
You said, on windows, one has to perform the deploy.sh script manually step by step? Why? I did not do that before, and it seems it does not make any difference for me? I use the git-bash (MINGW64) for windows. I can use shell-scripts like on any other linux system and shell-commands as well.
I also believe that I now, thank your link and your kick into the right direction, understand how the format_index_html.py and Jinja is supposed to work and to look like.
For me, neither the original, nor your version of this script made sense. npm run build would produce a index.html which already has the links to static files and they look fine. I modified the script so that it adds the Jinja syntax correctly IN MY CASE. I really cannot tell why it is different for me:
import sys
import fileinput
file = 'templates/index.html'
with open(file, "r+") as f:
s = f.read()
f.seek(0)
f.write("{% load staticfiles %}\n" + s)
for i, line in enumerate(fileinput.input(file, inplace=1)):
sys.stdout.write(line.replace('href=/staticfiles/', "href=\"{% static '"))
for i, line in enumerate(fileinput.input(file, inplace=1)):
sys.stdout.write(line.replace('.css', ".css' %}\""))
for i, line in enumerate(fileinput.input(file, inplace=1)):
sys.stdout.write(line.replace('src=/staticfiles/', "src=\"{% static '"))
for i, line in enumerate(fileinput.input(file, inplace=1)):
sys.stdout.write(line.replace('.js', ".js' %}\""))
What exactly did I do:
The original index.html template looks like this in my case:
... but now we want to add some {% here %} and some {% there %} to be able to inject the correct static paths dynamically if I understood that right?
Looking at the docs, how the final index.html should look like, I needed to modify the double-slash at href=// to href=/staticfiles/ and as you see I also needed to add "staticfiles" in order to be replaced as a whole by the second parameter, which I could leave as it was in your version. Then I needed to add a "." at the "css" and "js" modifiers, else it would mess up the path like this:
...which you probably also had in your case? Else I would not be able to understand how your app would have ever worked?
I also adapted my static files to what you said, indeed a minute before I read your reply :D
It makes sense and looks correct.
However, now I am getting the 404 not found at just one file, others are correctly loaded. I did not get the weird webpack error anymore, but the page is not visible anymore :D
Ryan is an engineer in the Sacramento Area with a focus in Python, Ruby, and Rust. Bash/Python Exercism mentor. Coding, physics, calculus, music, woodworking. Looking for work!
Sorry, but I just wrote 30minutes of well-formatted documentation for my 3 bugfixes, which was deleted as I accidentely clicked "reload" on this page :(
Now I want at least share a short docu for my main 3 bugs, which I was able to solve, for anybody who comes after me and might have the same struggles:
2nd: I fixed the format_index_html.py like described in the comment above, but here is the full file again:
import sys
import fileinput
file = 'templates/index.html'
with open(file, "r+") as f:
s = f.read()
f.seek(0)
f.write("{% load staticfiles %}\n" + s)
for i, line in enumerate(fileinput.input(file, inplace=1)):
sys.stdout.write(line.replace('href=/static/', "href=\"{% static '"))
for i, line in enumerate(fileinput.input(file, inplace=1)):
sys.stdout.write(line.replace('.css', ".css' %}\""))
for i, line in enumerate(fileinput.input(file, inplace=1)):
sys.stdout.write(line.replace('src=/static/', "src=\"{% static '"))
for i, line in enumerate(fileinput.input(file, inplace=1)):
sys.stdout.write(line.replace('.js', ".js' %}\""))
Will fix the broken index.html template and thus will also fix half of the issues with static files, to be correctly served at runtime.
3rd: Fixed the CopyWebpackPlugin error ERROR in [copy-webpack-plugin] unable to locate '[...]/static' at '[...]/static':
Therefore, a workaround in the build/build.js was necessary. All it does is adding a .gitkeep to the STATIC_ROOT directory before the build.
...
//add these lines to the other imports:
const webpackConfig = require('./webpack.prod.conf')
const mkdirp = require('mkdirp')
const fs = require("fs")
...
// add the mkdirp function in the rm-callback:
rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
if (err) throw err
mkdirp(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
if (err) throw err
// path exists unless there was an error
fs.closeSync(fs.openSync(path.join(config.build.assetsRoot, config.build.assetsSubDirectory, '.gitkeep'), 'w'));
});
webpack(webpackConfig, function (err, stats) {
spinner.stop()
...
Ryan is an engineer in the Sacramento Area with a focus in Python, Ruby, and Rust. Bash/Python Exercism mentor. Coding, physics, calculus, music, woodworking. Looking for work!
Thank you a lot for this tutorial series, they help me a lot getting started with web-development from the beginning!
However, I had some problems, which you did not cover (I wonder why you did not have the same problems? I had them on Windows, did not test the tutorial part 4 on Ubuntu yet), especially with the template-part:
First, when I tried to run the server straight forward after doing 1:1 what you did (except that I used axios), there was a blank page and the console said
error 404 file .../static/css not found
.I googled for a few hours and eventually managed to figure out that the files
config/index.js
andformat_index_html.py
where messing around with the static file paths of the generatedindex.html
.I also discovered strange artifacts in the final
index.html
using yourformat_index_html.py
code: I truly believe, that the "' %}
" in thecss
andjs
lines are messing up the finalindex.html
completely, at least it has a completely broken syntax when I open theindex.html
in IntelliJ and improve the formatting with "Reformat Code". When I removed the mentioned symbols from the two lines so that theformat_index_html.py
now looks like the following, I got a validindex.html
instead:Also, I needed to modify the file
vuedj/settings.py
a bit, so that the statics-part looks like this:instead of this:
However, I am getting a strange webpack-copy error then:
for which I could not find a solution so far. This prevents the files from proper translation, which results in runtime errors where the browser is complaining that it cannot recognize "import"-statements in javascript.
Do you have any idea how to fix that?
I already tried to read about webpack and the configuration of webpack. I just figured out that the difference between
npm run dev
andnpm run build
is, that statics and static file copies are only used atnpm run build
, which is the reason why I did not get errors duringnpm run dev
.Hmmm... I’m not sure. I wrote this post a good while ago, but I do remember that the vue Django starter repo probably ended up causing more problems than it solved. I’ll take a look at the error you’re talking about and see what I can do.
Thanks for sticking with it and reaching out!
From your code snippets, my first guess is that you should probably look at what your Django config’s static_root is set to. See these docs. Specifically the Deployment section. Make sure that’s outputting to the right place. Let me know if this solves it, but otherwise I’ll look deeper as soon as I can.
Thank you for the quick response!! I'll try it out, and I am curious. I played around with these static settings for quite a time already, and am not yet 100% sure what the right settings should be, so this is definitely a good start :)
No problem! OK, here's what I've got so far. On a fresh computer (windows, no less!), here were my steps:
py -3.6 -m venv .venv
. You could probably also usepython36 -m venv .venv
or justpython3 -m venv .venv
depending on the versions of Python you have.npm install
npm run build
deploy.sh
manually. First waspython format_index_html.py
./templates/index.html
manually and fixed the script tag to have these contents:<script type=text/javascript src="{% static 'app.7ff6b55ccbb5cd067a3d.js' %}"></script>
. I think it was just some punctuation tweaks. Your app..js will be slightly different each time.pip install -r requirements.txt
collectstatic
, which grabs your bundled app and puts it in your static directory:python manage.py collectstatic --noinput
python manage.py runserver
Everything worked like I expected with no import errors.
Some things that might have gone wrong for you:
In my
vuedj/settings.py
, I've got:I notice that the
STATIC_URL
is different than what you said you're using. Give that a try.I also don't see the
copy-webpack-plugin
in my package.json for that repo. Are you using the same versions as me? It wouldn't surprise me if you weren't because my package.json is probably out of date with today's JS standards. Compare with my package.json to be sure.By the way, I've got some ideas in the works for writing a new set of articles that are updated for more modern times: Vue 2, vue-cli, Django 2, etc. I'm not sure when I'll get time to work on them, but I know that these articles and the library versions used here are slowly becoming obsolete.
Really nice, that you tried to reproduce my setup, and that you reply so fast! Appreciate that!
You said, on windows, one has to perform the
deploy.sh
script manually step by step? Why? I did not do that before, and it seems it does not make any difference for me? I use the git-bash (MINGW64) for windows. I can use shell-scripts like on any other linux system and shell-commands as well.I also believe that I now, thank your link and your kick into the right direction, understand how the
format_index_html.py
and Jinja is supposed to work and to look like.For me, neither the original, nor your version of this script made sense.
npm run build
would produce a index.html which already has the links to static files and they look fine. I modified the script so that it adds the Jinja syntax correctly IN MY CASE. I really cannot tell why it is different for me:What exactly did I do:
The original
index.html
template looks like this in my case:... but now we want to add some
{% here %}
and some{% there %}
to be able to inject the correct static paths dynamically if I understood that right?Looking at the docs, how the final
index.html
should look like, I needed to modify the double-slash athref=//
tohref=/staticfiles/
and as you see I also needed to add "staticfiles" in order to be replaced as a whole by the second parameter, which I could leave as it was in your version. Then I needed to add a "." at the "css" and "js" modifiers, else it would mess up the path like this:would become:
which was really weird and at the beginning I did not understand where this mess came from.
My fix produces:
...which you probably also had in your case? Else I would not be able to understand how your app would have ever worked?
I also adapted my static files to what you said, indeed a minute before I read your reply :D
It makes sense and looks correct.
However, now I am getting the
404 not found
at just one file, others are correctly loaded. I did not get the weird webpack error anymore, but the page is not visible anymore :DThis guy has the same problem and eventually found a solution for himself, I will try that approach tomorrow:
stackoverflow.com/questions/308575...
Really thank you so much for your fast replies, they really helped a lot, and I am indeed interested in Vue 2, vue-cli tutorials as well :D
I'm glad that you're headed in the right direction. Let me know if you have any other questions! :)
FUCK
Sorry, but I just wrote 30minutes of well-formatted documentation for my 3 bugfixes, which was deleted as I accidentely clicked "reload" on this page :(
Now I want at least share a short docu for my main 3 bugs, which I was able to solve, for anybody who comes after me and might have the same struggles:
1st: I installed the newest vue-cli:
Source: cli.vuejs.org/guide/installation.html
2nd: I fixed the
format_index_html.py
like described in the comment above, but here is the full file again:Will fix the broken index.html template and thus will also fix half of the issues with static files, to be correctly served at runtime.
3rd: Fixed the CopyWebpackPlugin error
ERROR in [copy-webpack-plugin] unable to locate '[...]/static' at '[...]/static'
:Therefore, a workaround in the
build/build.js
was necessary. All it does is adding a .gitkeep to theSTATIC_ROOT
directory before the build.Source: github.com/dvallin/agora/issues/1
4th: I had the following bug at runtime, when I tried to add TODO-Entries:
TypeError: Cannot read property 'push' of undefined
and fixed it by modifying the
response.body
toresponse.data
in thestore/index.js
(I renamed that file fromstore.js
toindex.js
):Hopefully this helps other people who might have the same struggles.
Thanks again for the nice tutorial, maybe I will see other tutorials by you, Sir! :)
Nicely done! I’m sure a lot of people will appreciate this.