Comments (13)
I was using a mix of the two. At the end of the django's url.py i had:
# Catch-All: These urls are handled by the single page BaseApp and react-router
urlpatterns += [
url(r'^.*/', TemplateView.as_view(template_name="base-react.html"), name='base')
]
404 then have to be handled by React
from cookiecutter-webpack.
@awhillas if you generate a cookiecutter-webpack project and you use the existing_project
flag as true, the appropriate webpack config should be generated, meaning that the webpack-stats.json file will be generated on build. You just have to add the django configuration. This guide will help you with that: http://owaislone.org/blog/webpack-plus-reactjs-and-django/
from cookiecutter-webpack.
Thanks @awhillas, I would recommend this approach too
from cookiecutter-webpack.
Might be handy to have a default Django template with the minimum HTML need to get this working. I confess i'm struggling to figure out what it need to do it see the basic counter example...?
from cookiecutter-webpack.
@awhillas did you try to set up with the 'existing project' flag? Also make sure you set the output dir to ../
and overwrite flag -f
see: https://github.com/goldhand/cookiecutter-webpack#using-command-line
from cookiecutter-webpack.
Yeah, i have it working from my project folder but not exactly with my project. I removed the [hash]
from the output file name as i had no idea how to include this in my Django templates:
output: {
path: path.resolve(PROJECT_ROOT, "myapp/static/scripts"),
filename: "[name].js",
},
and in my template i have at the bottom:
{% if settings.DJANGO_DEV %}{# i.e. we're local #}
<script src="http://localhost:8080/webpack-dev-server.js"></script>
{% endif %}
<script src="{% static "scripts/vendor.js" %}"></script>
<script src="{% static "scripts/main.js" %}"></script>
</body>
</html>
which gives weird results when running npm run dev
script as the webpack-dev-server
is compiling but the page is linking to the wrong files. The app works in standalone if I run it all from http://localhost:8080/
but then its totally separate from the Django templates, which doesn't work with deployment to the production server, i need the compiled files somewhere in static
.
Perviously, i had webpack with the -w
flag doing the job on dev, and production was just the same without the flag. I can't seem to do that with this setup, i'm not sure how bable-node
is working with webpack (its not in ether's documentation) or how to generalise the development so i'm working as close to the final product as possible.
Some examples would be helpful :)
from cookiecutter-webpack.
With some research I found:
In this case you need to teach the webpack-generated assets to make requests to the webpack-dev-server even when running on a HTML-page sent by the backend server. On the other side you need to teach your backend server to generate HTML pages that include script tags that point to assets on the webpack-dev-server. In addition to that you need a connection between the webpack-dev-server and the webpack-dev-server runtime to trigger reloads on recompilation.
from: https://webpack.github.io/docs/webpack-dev-server.html#combining-with-an-existing-server
So i guess my base-react.html
template needs to have something like this to get hot reloading while in local dev:
{% if settings.DJANGO_DEV %}
<script src="http://localhost:8080/webpack-dev-server.js"></script>
<script src="http://localhost:8080/build/vendor.js"></script>
<script src="http://localhost:8080/build/main.js"></script>
{% endif %}
if i have this in my webpack config:
context: PROJECT_ROOT,
output: {
path: path.resolve(PROJECT_ROOT, "scout/static/scripts"),
filename: "[name].js",
publicPath: "/build/",
},
All good now!
from cookiecutter-webpack.
I should add some docs for this but the best way to do this IMHO is to use the generated webpack stats json file. There is a django plugin that works very well with this: https://github.com/owais/django-webpack-loader
from cookiecutter-webpack.
Just googled this independently and found django-webpack-loader myself and was on my way back here to note it :D
Will have a look and thanks again!
from cookiecutter-webpack.
@awhillas you save my life!)))
from cookiecutter-webpack.
I am using react and django but I get this issue.
from cookiecutter-webpack.
@HoangJerry you're probably sending invalid data to highcharts. Recheck your data structure and data type.
from cookiecutter-webpack.
@awhillas I'm curious how you handle state and preserving the app state when refreshing the page when the user has navigated to a subcomponent / nested route.
from cookiecutter-webpack.
Related Issues (18)
- Include a promise polyfill
- Add cookiecutter-django build test
- Automate dependency update HOT 2
- Error installing npm packages HOT 5
- Cannot generate cookiecutter-webpack on windows HOT 3
- Sagas? HOT 2
- Need to specify 'ejs-loader' instead of 'ejs'. HOT 1
- Include a Object.defineProperty polyfill HOT 1
- Deprecated dependencies: force-case-sensitivity-webpack-plugin, babel-preset-es2015
- Project license?
- Add test framework configuration
- Refactor configs HOT 1
- Fix versions
- Add minimal option
- Make karma optional
- Add Ava + enzyme testing config option HOT 1
- Add coverage reports
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from cookiecutter-webpack.