How do I use npm packages and ES6 features with Django?

Question

I am currently building out the front-end of a Django app and I want to use the official material design components.

However, I am running into trouble finding ways to integrate this; I want to be able to import the npm packages directly into javascript files and/or Django templates. Does anyone know how to do this?

I currently have a django-react project. I use material-ui. The approach I am using is that I created app in my django project called frontend and set up react using create-react-app in that app. So node's package.json is in that folder. Then I added a url configuration in django which matches everything and renders the index.html built by react. I take care of rest of the url routing in react. I had to go through all this because I don't want to allow cros headers. If you are ok with it, what that you can create a completely separate react project and host it somewhere else. — Vaibhav Vishal
– Vaibhav Vishal, Commented Jan 18, 2019 at 6:59
I you don't want to make your backend just an api. But render django templates with js. You will have to add js via cdn like this:  <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>, no npm/node required. But you shouldn't do this. It's right there on top(Quick Start) of material components readme, what's so complicated about it — Vaibhav Vishal
– Vaibhav Vishal, Commented Jan 18, 2019 at 7:02

Serhii · Accepted Answer · 2019-01-18 15:55:27Z

1

if you using webpack, you need create correct config (webpack.config.js) a if you use npm run build need in

output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/static/youre-folder/dist/',
    filename: 'build.js'
  }

for example. And next include this adress '/static/youre-folder/dist/build.js' in template django.

answered Jan 18, 2019 at 15:55

Serhii

961 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How do I use npm packages and ES6 features with Django?

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related