Heroku: Deploying Django Rest Framework + Vue

Question

I have a project made with Django (only DRF API) and Vue js. I have this project structure:

root_directory/
├── project_name/
│   ├── settings.py
│   ├── ...
├── front_end/
│   ├── ... vue files generated with CLI 3 ...
└── api/
    └── ... api app files ...

I want to deploy this project using heroku and my biggest problem is: I don't know how to serve static files (vue app files).

In heroku docs is specified that I should use django staticfiles serving with whitenoise package (apart from hosting them in S3).

But here comes another problem: vue-cli provided me a index.html file where everything gets injected when I run npm run build, so I can't access {% static 'example.js' %} in index.html directly, cause it is not the index.html that I should use, it is the one in dist/ folder, of course. But there everything gets minified and too complicated for me to handle. I think npm run build would throw an error if it sees something like {% %} in public/index.html.

I can't figure out how can I manage to deploy this project with heroku. What would be the best practice to deploy it in this situation?

Thanks in advance.

Wouldn't it make sense to seperate the front- and backend completely? Provide the data (e. g. JSON) via REST API with Django in one app and consume the data with Vue in another app. — Bennett Dams
– Bennett Dams, Commented Oct 2, 2018 at 15:33
Do you mean I should use a CDN for static files (Vue files) and configure a CORS for backend and that's it? — yierstem
– yierstem, Commented Oct 2, 2018 at 16:16
Kinda, just host two different applications. As you mentioned Heroku: Create two Heroku projects, one for the Django app and one for the Vue app. Vue has to be configered via a server.js file for example. There a lot of tutorials on how to "Deploy Django app to Heroku" and "Deploy Vue app to Heroku". — Bennett Dams
– Bennett Dams, Commented Oct 3, 2018 at 1:46
Oh, this might be a viable solution. I've never thought about deploying Vue app separately into a different server. You can post the solution. Thank you — yierstem
– yierstem, Commented Oct 3, 2018 at 4:39

Bennett Dams · Accepted Answer · 2018-10-03 14:59:48Z

4

+100

Besides mixing up both applications, you could host your Django app and Vue app separated from each other.

Use Django to connect to a database and provide the data (e. g. JSON) via REST API (backend).

Consume the data from the REST endpoints with your Vue app (frontend).

Here are some starting points (as you mentioned Heroku):

Deploy Django:

https://devcenter.heroku.com/articles/deploying-python

Deploy Vue:

https://medium.com/netscape/deploying-a-vue-js-2-x-app-to-heroku-in-5-steps-tutorial-a69845ace489

Some nice library to consume the data from the REST API with Vue:

https://github.com/axios/axios

answered Oct 3, 2018 at 14:59

Bennett Dams

7,1836 gold badges29 silver badges48 bronze badges

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

Comments

MD. Khairul Basar · Accepted Answer · 2018-11-12 14:14:58Z

2

add this to your Middleware in settings.py

'whitenoise.middleware.WhiteNoiseMiddleware',

make sure you add this STATICFILES_DIRS and STATICFILES_STORAGE in your settings.py after STATIC_URL

STATIC_URL = '/static/'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static')
]
STATICFILES_STORAGE = 'whitenoise.storage.CompressedManifestStaticFilesStorage'

Note: make sure you install this: pip install django-heroku

edited Nov 12, 2018 at 14:14

MD. Khairul Basar

5,11015 gold badges43 silver badges65 bronze badges

answered Sep 29, 2018 at 22:36

Musadig

513 bronze badges

1 Comment

yierstem Over a year ago

That is not the problem, I know how to configure static files for django. I do not know how to serve this specific project, having Vue files in a separate folder.

Sopan · Accepted Answer · 2018-10-04 17:43:54Z

1

Did you check - Timestrap Application ( https://github.com/overshard/timestrap). They do have Heroku based demo instance: https://timestrap.herokuapp.com/

This Application is based on Vuejs and Django - it will give good idea on how to go about it.

Enjoy

answered Oct 4, 2018 at 17:43

Sopan

6917 silver badges14 bronze badges

Comments

D. Evans · Accepted Answer · 2018-09-30 11:05:20Z

0

You should be able to handle this using WhiteNoise 4.0 and above and a few settings. For example:

# Enable this so that WhiteNoise will serve `index.html` files at the directory root
WHITENOISE_INDEX_FILE = True

# Set this to wherever npm puts your final files
WHITENOISE_ROOT = os.path.join(BASE_DIR, 'dist')

answered Sep 30, 2018 at 11:05

D. Evans

3,30226 silver badges23 bronze badges

1 Comment

yierstem Over a year ago

The problem is not serving index.html, since that's done with django view. The problem is that I do not know how to get js/css files in index.html since I don't have access to {% static 'path/to/js/and/css/files' %} inside public/index.html and neither are js/css files injected. I guess the only thing I can do is to manually modify dist/index.html and add the static tag everywhere's needed.

Collectives™ on Stack Overflow

Heroku: Deploying Django Rest Framework + Vue

4 Answers 4

Comments

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related