Question about Medium tutorial

[cyberfly]

Hi,

I follow your Medium tutorial here https://medium.com/@marek_94752/how-to-start-with-vue-or-any-other-framework-lib-in-django-in-few-minutes-b34fd4291f7

Thanks for the write up, however I face several error and need to ask some question. Using python3.6 and latest django. I am newbie in django

1. Create resources folder in your main django package

• For main django package, do you mean project root folder or app folder? Example inside app folder: learndjango/learndjango/resources

2. Move all folders from static to resources except images

• Lets assume resources folder is inside app folder. Currently I dont have any static folder to copy, so my resources folder is empty

• So if I run npm run dev command, it will return an error

Module not found: Error: Can't resolve '/Users/cyberfly/learndjango/learndjango/resources/js/project.js'
Module not found: Error: Can't resolve '/Users/cyberfly/learndjango/learndjango/resources/sass/project.scss'

3. So in order to bypass that error above, I manually create project.js and project.scss with empty content. This is my directory

learndjango
- learndjango
-- resources
--- js
---- project.js
--- sass
---- project.scss
-- static

4. Do I need to comment out this line inside webpack.mix.js?

mix.js('src/app.js', 'dist/').sass('src/app.scss', 'dist/');

5. In base.py add to THIRD_PARTY_APPS

• There is no base.py inside my project, only settings.py
• There is no THIRD_PARTY_APPS also, so I try to add to INSTALLED_APPS

settings.py

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'djangomix',
]

6. Load mix template inside base html. Question is, if I have multiple apps (polls / tickets / users), do I need to refer to each app static folder? And do I need to duplicate all the workflow above for each apps under the project?

Example

<script src="{% mix 'build/project.js' 'tickets/static' %}"></script>

<script src="{% mix 'build/project.js' 'polls/static' %}"></script>

webpack.mix.js

let staticPath = 'polls/static/build'
let resourcesPath = 'polls/resources'

let ticketStaticPath = 'tickets/static/build'
let ticketResourcesPath = 'tickets/resources'

7. Create folder “components” inside polls/resources/js

• If I have multiple apps, do I create multiple components folder for each apps?

8. I having difficulty referencing the mix file. The only way it can works is the static folder must be the same level with the templates folder where index.html reside. Any tips on this?

<script src="{% mix 'build/app.js' 'polls/static' %}"></script>

9. After npm run watch, how do I keep it running to listen to new changes, similar to Laravel Mix? Currently after I run npm run watch, it just compile and exit, so I need to re-run everytime there is new update

Thanks

[m-a-k-o]

Hi @cyberfly,

1. I mean in APP folder, but it is mainly on you. You are able to configure paths in webpack.mix.js as you prefer.

2. Your source files are not existing that is reason why you're getting the error.

3. Yes it is correct. First you need source file like app.js which will be processed by Laravel mox (webpack) and you get your outpup file in static (path can be managed in webpack.mix.js). Without source file it does not have sence to use laravel mix.

4. You need this line if you want process js files and sass files. If you need process only .js files your code will be:

   mix.js('src/app.js', 'dist/');

   (see docs https://laravel-mix.com/docs/5.0/installation)

5. That's okay, it depends on how your code is organised

6. If the source code of js/css.. is same, you do not have to. You can place also resources folder and webpack.mix.js to root of your project (everything depends how you configure it)

7. It depends what you need. Component are part of Vue (in tutorial) docs: https://vuejs.org/v2/guide/components-registration.html . Vue components are reusable and you can use it multiple times. When you need same component to multiple apps you can have your django app in django app or you can have components in project root.

8. Again it depends how you have configured your webpack.mix.js. In tutorial webpack.mix.js is located in root folder and all paths are set in the file. Resources folder is in app polls.

   <script src="{% mix 'build/app.js' 'polls/static' %}"></script>

9. npm run watch should re-compile every change silmilar to hot but hot is working as hot-module reloading.

[cyberfly]

Thanks I got everything working correctly, except one problem:

9. When I run npm run watch, it does not re-compile every change.

I got it solve by follow the guide here

https://github.com/JeffreyWay/laravel-mix/blob/master/docs/faq.md#im-using-a-vm-and-webpack-isnt-picking-up-my-file-changes