DEV Community

Discussion on: Vue on Django, Part 4

View post

Replies for: 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, et...

 
electrocnic profile image
electrocnic •

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:

<!DOCTYPE html>
<html>
<head>
  <meta charset=utf-8>
  <meta name=viewport content="width=device-width,initial-scale=1">
  <title>test</title>
  <link href=/staticfiles/css/app.2d31a09d9567f33bfd9cc48d15d26790.css rel=stylesheet>
</head>
<body>
<div id=app></div>
<script type=text/javascript src=/staticfiles/js/manifest.7fd0cdf336adc5dd3e7b.js></script>
<script type=text/javascript src=/staticfiles/js/vendor.cd8054bf01aa59402ea6.js></script>
<script type=text/javascript src=/staticfiles/js/app.a1073c350b2a8c23a52c.js></script>
</body>
</html>

... 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:

/staticfiles/css/app.2d31a09d9567f33bfd9cc48d15d26790.css

would become:

/staticfiles/css' %} /app.2d31a09d9567f33bfd9cc48d15d26790.css' %}

which was really weird and at the beginning I did not understand where this mess came from.

My fix produces:

{% load staticfiles %}
<!DOCTYPE html>
<html>
<head>
  <meta charset=utf-8>
  <meta name=viewport content="width=device-width,initial-scale=1">
  <title>test</title>
  <link href="{% static 'css/app.2d31a09d9567f33bfd9cc48d15d26790.css' %}" rel=stylesheet>
</head>
<body>
<div id=app></div>
<script type=text/javascript src="{% static 'js/manifest.7fd0cdf336adc5dd3e7b.js' %}"></script>
<script type=text/javascript src="{% static 'js/vendor.cd8054bf01aa59402ea6.js' %}"></script>
<script type=text/javascript src="{% static 'js/app.a1073c350b2a8c23a52c.js' %}"></script>
</body>
</html>

...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

This 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

Thread Thread
 
rpalo profile image
Ryan Palo •

I'm glad that you're headed in the right direction. Let me know if you have any other questions! :)

Thread Thread
 
electrocnic profile image
electrocnic •

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:

npm uninstall vue-cli -g
npm install -g @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:

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()

    ...

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 to response.data in the store/index.js (I renamed that file from store.js to index.js):

...

'GET_TODOS': function (state, response) {
  state.todos = response.data
},
'ADD_TODO': function (state, response) {
  state.todos.push(response.data)
},

...

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! :)

Thread Thread
 
rpalo profile image
Ryan Palo •

Nicely done! I’m sure a lot of people will appreciate this.