vchaptsev / cookiecutter-django-vue

Cookiecutter Django Vue is a template for Django-Vue projects.

Cookiecutter Django-Vue

Powered by Cookiecutter, inspired by Cookiecutter Django.

Features

• Docker
• 12 Factor
• Server: Nginx
• Frontend: Vue + vue-cli + PWA
• Backend: Django
• Database: PostgreSQL
• API: REST or GraphQL

Optional Integrations

These features can be enabled during initial project setup.

• Integration with MailHog for local email testing
• Integration with Sentry for frontend and backend errors logging
• Integration with Google Analytics or Yandex Metrika for web-analytics
• Automatic database backups

Usage

First, get cookiecutter:

$ pip install cookiecutter

Now run it against this repo:

$ cookiecutter gh:vchaptsev/cookiecutter-django-vue

You'll be prompted for some values. Provide them, then a project will be created for you.

Answer the prompts with your own desired options. For example:

======================== INFO ======================= [ ]:
project_name [Project Name]: Website
project_slug [website]: website
description [Short description]: My awesome website
author [Your Name]: Your Name
email [<[email protected]>]: <[email protected]>
====================== GENERAL ====================== [ ]:
Select api:
1 - REST
2 - GraphQL
Choose from 1, 2 [1]: 2
backups [y]: y
==================== INTEGRATIONS =================== [ ]:
use_sentry [y]: y
use_mailhog [y]: y
Select analytics:
1 - Google Analytics
2 - Yandex Metrika
3 - None
Choose from 1, 2, 3 [1]: 2

Project creation will cause some odd newlines and linter errors, so I'd recommend:

$ pip install autopep8
$ autopep8 -r --in-place --aggressive --aggressive backend
$ cd frontend && npm i && npm run lint --fix

Now you can start project with docker-compose:

$ docker-compose up --build

For production you'll need to fill out .env file and use docker-compose-prod.yml file:

$ docker-compose -f docker-compose-prod.yml up --build -d

Contributing

Help and feedback are welcome :)

cookiecutter-django-vue's Issues

sh: 1: cross-env: not found

Hello.

If I try run docker-compose up, I get error with this traceback:

webpack_1   | sh: 1: cross-env: not found
webpack_1   | npm ERR! file sh
webpack_1   | npm ERR! code ELIFECYCLE
webpack_1   | npm ERR! errno ENOENT
webpack_1   | npm ERR! syscall spawn
webpack_1   | npm ERR! [email protected] dev: `cross-env NODE_ENV=development webpack-dev-server`
webpack_1   | npm ERR! spawn ENOENT
webpack_1   | npm ERR! 
webpack_1   | npm ERR! Failed at the [email protected] dev script.
webpack_1   | npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
webpack_1   | npm WARN Local package.json exists, but node_modules missing, did you mean to install?
webpack_1   | 
webpack_1   | npm ERR! A complete log of this run can be found in:
webpack_1   | npm ERR!     /root/.npm/_logs/2017-10-30T20_53_34_207Z-debug.log
webpack_1   | 
webpack_1   | > [email protected] dev /app
webpack_1   | > cross-env NODE_ENV=development webpack-dev-server
webpack_1   | 
webpack_1   | Project is running at http://0.0.0.0:3000/
webpack_1   | webpack output is served from http://localhost:3000/static/dist/
webpack_1   | 404s will fallback to /index.html
webpack_1   | Hash: 568828082515fca998b7
webpack_1   | Version: webpack 2.7.0
webpack_1   | Time: 3730ms
webpack_1   | chunk    {0} build.js (main) 810 kB [entry] [rendered]
webpack_1   |     [3] ./~/vue/dist/vue.esm.js 282 kB {0} [built]
webpack_1   |     [4] ./~/axios/index.js 40 bytes {0} [built]
webpack_1   |    [14] (webpack)/hot/emitter.js 77 bytes {0} [built]
webpack_1   |    [15] ./vuetest/static/main.js 1.05 kB {0} [built]
webpack_1   |    [16] (webpack)-dev-server/client?http://0.0.0.0:3000 7.95 kB {0} [built]
webpack_1   |    [17] (webpack)/hot/dev-server.js 1.57 kB {0} [built]
webpack_1   |    [56] ./~/url/url.js 23.3 kB {0} [built]
webpack_1   |    [58] ./vuetest/static/Main.vue 1.75 kB {0} [built]
webpack_1   |    [61] ./~/vue-meta/lib/vue-meta.js 33.1 kB {0} [built]
webpack_1   |    [62] ./~/vue-progressbar/dist/vue-progressbar.js 6.23 kB {0} [built]
webpack_1   |    [68] (webpack)-dev-server/client/overlay.js 3.73 kB {0} [built]
webpack_1   |    [69] (webpack)-dev-server/client/socket.js 1.05 kB {0} [built]
webpack_1   |    [71] (webpack)/hot nonrecursive ^\.\/log$ 160 bytes {0} [built]
webpack_1   |    [72] (webpack)/hot/log-apply-result.js 1.02 kB {0} [built]
webpack_1   |    [73] multi (webpack)-dev-server/client?http://0.0.0.0:3000 webpack/hot/dev-server ./vuetest/static/main.js 52 bytes {0} [built]
webpack_1   |      + 59 hidden modules
webpack_1   | 
webpack_1   | ERROR in ./~/css-loader!./~/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-111a39d7","scoped":false,"hasInlineConfig":false}!./~/sass-loader/lib/loader.js!./~/vue-loader/lib/selector.js?type=styles&index=0!./vuetest/static/Main.vue
webpack_1   | Module build failed: Error: Missing binding /app/node_modules/node-sass/vendor/linux-x64-57/binding.node
webpack_1   | Node Sass could not find a binding for your current environment: Linux 64-bit with Node.js 8.x
webpack_1   | 
webpack_1   | Found bindings for the following environments:
webpack_1   |   - Linux 64-bit with Node.js 6.x
webpack_1   | 
webpack_1   | This usually happens because your environment has changed since running `npm install`.
webpack_1   | Run `npm rebuild node-sass --force` to build the binding for your current environment.
webpack_1   |     at module.exports (/app/node_modules/node-sass/lib/binding.js:15:13)
webpack_1   |     at Object.<anonymous> (/app/node_modules/node-sass/lib/index.js:14:35)
webpack_1   |     at Module._compile (module.js:612:30)
webpack_1   |     at Object.Module._extensions..js (module.js:623:10)
webpack_1   |     at Module.load (module.js:531:32)
webpack_1   |     at tryModuleLoad (module.js:494:12)
webpack_1   |     at Function.Module._load (module.js:486:3)
webpack_1   |     at Module.require (module.js:556:17)
webpack_1   |     at require (internal/module.js:11:18)
webpack_1   |     at Object.<anonymous> (/app/node_modules/sass-loader/lib/loader.js:3:14)
webpack_1   |  @ ./~/vue-style-loader!./~/css-loader!./~/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-111a39d7","scoped":false,"hasInlineConfig":false}!./~/sass-loader/lib/loader.js!./~/vue-loader/lib/selector.js?type=styles&index=0!./vuetest/static/Main.vue 4:14-330 13:3-17:5 14:22-338
webpack_1   |  @ ./vuetest/static/Main.vue
webpack_1   |  @ ./vuetest/static/main.js
webpack_1   |  @ multi (webpack)-dev-server/client?http://0.0.0.0:3000 webpack/hot/dev-server ./vuetest/static/main.js
webpack_1   | 
webpack_1   | > [email protected] dev /app
webpack_1   | > cross-env NODE_ENV=development webpack-dev-server
webpack_1   | 

Do I need to add PostCSS to cookiecutter.json?

I believe that the front-end configuration requires PostCSS.

Do you think this is necessary, or let the user himself choose whether he needs it?

Bind for 0.0.0.0:3000 failed: port is already allocated

Hello.

When I often restart my django project, I encounter an error.

I understand that this is due to the contents of the yml file, but I have not yet been able to understand the reason for this error.

ERROR: for 76e7ecc8980b_76e7ecc8980b_projectname_webpack_1  Cannot start service webpack: b'driver failed programming external connectivity on endpoint projectname_webpack_1 (52362b93ab503dd4902e842c35db1730eaa5959d69c62e2b54dfa2c15ffe2088): Bind for 0.0.0.0:3000 failed: port is already allocated'

ERROR: for webpack  Cannot start service webpack: b'driver failed programming external connectivity on endpoint projectname_webpack_1 (52362b93ab503dd4902e842c35db1730eaa5959d69c62e2b54dfa2c15ffe2088): Bind for 0.0.0.0:3000 failed: port is already allocated'
ERROR: Encountered errors while bringing up the project.

Tests: django check

Run django management check in tests
docs: https://docs.djangoproject.com/en/2.0/ref/django-admin/#check

Changes disappear after page refresh

Some problem with django-webpack-loader or webpack-bundle-tracker.

Steps to reproduce:

• create project
• run in dev mode
• make some changes in *.vue (HMR is working)
• refresh page

Don't npm install on every serve

No reason to install all the node modules every time you run the app, it adds a ton of time to startup needlessly. There should be a dockerfile for the Frontend app that does this and finally just runs the serve command.

Serve static by Caddy

whitenoise is a bad option.

Progress:

• refactor volumes
• let caddy do everything
• remove whitenoise support
• check static&media with dev settings
• check static&media with prod settings

Running Locally

Hi There

First of all thank you for keeping this repo up to date. I have 2 questions:
(Sorry if these questions come across as stupid, I've never used docker before)

1. Do I have to use docker to develop locally/deploy? If not, what steps to I need do take to make sure all my dependencies are installed?

2. If I use docker locally can I deploy on pythonanywhere, so basically deploy without docker?

I have a pythonanywhere account and would like to utilize it if possible.

When set use_portainer 'n', 'portainer_data' volumes still remains in docker-compose-prod.yml

When i set use_portainer='n' then portainer_data: {} volume remains in docker-compose-prod.yml file.

Check the pr #32

How to run python manage.py createsuperuser?

please help me, i wan to create superuser, how to create it ? thank you

vue-cli-service: not found

sh: vue-cli-service: not found
frontend_1  | npm ERR! file sh
frontend_1  | npm ERR! code ELIFECYCLE
frontend_1  | npm ERR! errno ENOENT
frontend_1  | npm ERR! syscall spawn
frontend_1  | npm ERR! [email protected] serve: `npm i && vue-cli-service serve`
frontend_1  | npm ERR! spawn ENOENT
frontend_1  | npm ERR! 
frontend_1  | npm ERR! Failed at the [email protected] serve script.
frontend_1  | npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
frontend_1  | 
frontend_1  | npm ERR! A complete log of this run can be found in:
frontend_1  | npm ERR!     /root/.npm/_logs/2019-09-13T07_20_37_738Z-debug.log

Frontend keeps crashing with message: Cannot find module '../package.json'

After starting with dockers compose the frontend (docker) keeps crashing with message:
frontend_1 | Error: Cannot find module '../package.json'

Will you support SSR?

Is it possible to make a support of server-side rendering for Vue?
https://ssr.vuejs.org/en/

GraphQL

Add a way of interaction between the frontend and the backend

Docs:

• GraphQL
• graphene-django

Progress:

• add cookiecutter option
• add graphene-django integration
• add some frontend wrapper (apollo?)

Why are you ignored by Celery and Opbeat?

Hello.
I really like what you are doing and I have a few questions:

1. Why did you abandon Celery?
   I use it in almost every project, and, it seems to me, this is an extremely necessary element of the cookiecutter

2. Why did you abandon Opbeat?
   I often use opbeat and sentry together, and do not see a problem asking the user if he wants to have it or not.

3. Why not use Whitenoise?
   I had problems with AWS and I had to give out my meda with whitenoise. Yes, there are not enough statics in SPA, but there is still a lot of media, and to give the opportunity to use whitenoise, in my opinion - not a bad idea.

4. I really like mdbootstrap, but it does not yet support Vue, but right now we could provide vue-bootstrap as a possible choice. Why not ?

I think giving as many opportunities as possible is a good idea.

How do you think ?

Non-PWA version

I want to create a website that's not PWA with webpack_loader, how will I be able to do it?

.provide() is deprecated.

getting is warning:

    ApolloProvider>.provide() is deprecated. Use the 'apolloProvider' option instead with the provider object directly.

FATAL: database files are incompatible with server

Hi - I'm creating a fresh project and it fails. I even tried to change postgres image to 9.6 but then it fails and the error says about postgres user

Attaching to test-api_postgres_1,test-api_frontend_1, test-api_mailhog_1, test-api_backend_1, test-api_nginx_1
mailhog_1   | WARNING: no logs are available with the 'none' log driver
postgres_1  | 2019-09-06 19:49:58.007 UTC [1] FATAL:  database files are incompatible with server
postgres_1  | 2019-09-06 19:49:58.007 UTC [1] DETAIL:  The data directory was initialized by PostgreSQL version 9.6, which is not compatible with this version 10.6.
frontend_1  | 
frontend_1  | > [email protected] serve /app
frontend_1  | > npm i && vue-cli-service serve
frontend_1  | 
nginx_1     | WARNING: no logs are available with the 'none' log driver
backend_1   | Postgres is unavailable - sleeping
permission-api_postgres_1 exited with code 1
backend_1   | Postgres is unavailable - sleeping
backend_1   | Postgres is unavailable - sleeping
backend_1   | Postgres is unavailable - sleeping

and this goes in infinite loop

Windows 10 support ?

Hi,

I'm trying to use your project on windows 10.

I had to change CRLF to LF in .sh for the backend to work in docker but that was not a problem to find out.

But the big one I can't figure out is the front end doesn't work. When installing packages I have this error

frontend_1  | > [email protected] install /app/node_modules/yorkie
frontend_1  | > node bin/install.js
frontend_1  |
frontend_1  | fs.js:115
frontend_1  |     throw err;
frontend_1  |     ^
frontend_1  |
frontend_1  | Error: EINVAL: invalid argument, open '/app/node_modules/yorkie/package.json'
frontend_1  |     at Object.openSync (fs.js:439:3)
frontend_1  |     at Object.readFileSync (fs.js:344:35)
frontend_1  |     at Object.Module._extensions..json (internal/modules/cjs/loader.js:706:20)
frontend_1  |     at Module.load (internal/modules/cjs/loader.js:599:32)
frontend_1  |     at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
frontend_1  |     at Function.Module._load (internal/modules/cjs/loader.js:530:3)
frontend_1  |     at Module.require (internal/modules/cjs/loader.js:637:17)
frontend_1  |     at require (internal/modules/cjs/helpers.js:22:18)
frontend_1  |     at Object.<anonymous> (/app/node_modules/yorkie/src/utils/get-hook-script.js:5:13)
frontend_1  |     at Module._compile (internal/modules/cjs/loader.js:689:30)
frontend_1  | npm WARN rollback Rolling back [email protected] failed (this is probably harmless): ENOTEMPTY: directory not empty, rmdir '/app/node_modules/yorkie/node_modules/get-stream'
frontend_1  | npm WARN rollback Rolling back [email protected] failed (this is probably harmless): ENOTEMPTY: directory not empty, rmdir '/app/node_modules/yorkie/node_modules/normalize-path'
frontend_1  | npm WARN rollback Rolling back [email protected] failed (this is probably harmless): ENOTEMPTY: directory not empty, rmdir '/app/node_modules/yorkie/node_modules/lru-cache'
frontend_1  | npm WARN rollback Rolling back [email protected] failed (this is probably harmless): ENOTEMPTY: directory not empty, rmdir '/app/node_modules/yorkie/node_modules/yallist'
frontend_1  | npm WARN rollback Rolling back [email protected] failed (this is probably harmless): ENOTEMPTY: directory not empty, rmdir '/app/node_modules/strip-indent'
frontend_1  | npm WARN rollback Rolling back [email protected] failed (this is probably harmless): ENOTEMPTY: directory not empty, rmdir '/app/node_modules/yorkie/node_modules/execa'
frontend_1  | npm WARN rollback Rolling back [email protected] failed (this is probably harmless): ENOTEMPTY: directory not empty, rmdir '/app/node_modules/yorkie/node_modules/cross-spawn'
frontend_1  | npm WARN rollback Rolling back [email protected] failed (this is probably harmless): ENOTEMPTY: directory not empty, rmdir '/app/node_modules/yorkie/node_modules/cross-spawn'
frontend_1  | npm WARN rollback Rolling back @vue/[email protected] failed (this is probably harmless): ENOTEMPTY: directory not empty, rmdir '/app/node_modules/@vue/cli-service/node_modules/debug'
frontend_1  | npm WARN [email protected] requires a peer of eslint@>=5.0.0 but none is installed. You must install peer dependencies yourself.
frontend_1  | npm WARN [email protected] requires a peer of eslint-plugin-node@>=7.0.0 but none is installed. You must install peer dependencies yourself.
frontend_1  | npm WARN [email protected] requires a peer of eslint-plugin-promise@>=4.0.0 but none is installed. You must install peer dependencies
yourself.
frontend_1  | npm WARN [email protected] requires a peer of eslint-plugin-standard@>=4.0.0 but none is installed. You must install peer dependencies yourself.
frontend_1  | npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
frontend_1  | npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
frontend_1  |
frontend_1  | npm ERR! code ELIFECYCLE
frontend_1  | npm ERR! errno 1
frontend_1  | npm ERR! [email protected] install: `node bin/install.js`
frontend_1  | npm ERR! Exit status 1
frontend_1  | npm ERR!
frontend_1  | npm ERR! Failed at the [email protected] install script.
frontend_1  | npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
frontend_1  |
frontend_1  | npm ERR! A complete log of this run can be found in:
frontend_1  | npm ERR!     /root/.npm/_logs/2019-02-25T22_25_14_516Z-debug.log
frontend_1  | npm ERR! code ELIFECYCLE
frontend_1  | npm ERR! errno 1
frontend_1  | npm ERR! [email protected] serve: `npm i && vue-cli-service serve`
frontend_1  | npm ERR! Exit status 1
frontend_1  | npm ERR!
frontend_1  | npm ERR! Failed at the [email protected] serve script.
frontend_1  | npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
frontend_1  |
frontend_1  | npm ERR! A complete log of this run can be found in:
frontend_1  | npm ERR!     /root/.npm/_logs/2019-02-25T22_25_15_151Z-debug.log

I found few post online about this kind of problem :
https://github.com/vuejs/vue-cli/issues/3466
https://github.com/vuejs/vue-cli/issues/3056

But I don't know how to fix it.

Subdomain support

Hi, cool project. Do you have plans to support subdomains? I'm working on a similar project and I am working on how to set up subdomain support. From what I have seen, I think it can be done with a middleware class on the Django side, some processing of the URL in Vue's router and editing nginx to catch the subdomains.

Webpack: chunks

docs
vuejs-template

Websockets (django-channels)

Interaction between the frontend and the backend through sockets

Had to install rebuild node-sass on Windows 10.

On Windows 10, I had to run the following to rebuild node-sass.

docker-compose run frontend npm rebuild node-sass

Before I did that, I was getting this error:

frontend_1  | <s> [webpack.Progress] 98% after emitting CopyPlugin
frontend_1  |  ERROR  Failed to compile with 1 errors9:06:02 PM
frontend_1  |
frontend_1  |  error  in ./src/components/ExampleComponent.vue?vue&type=style&index=0&id=6982cd3a&lang=scss&scoped=true&
frontend_1  |
frontend_1  | Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
frontend_1  | Error: Missing binding /app/node_modules/node-sass/vendor/linux_musl-x64-64/binding.node
frontend_1  | Node Sass could not find a binding for your current environment: Linux/musl 64-bit with Node.js 10.x
frontend_1  |
frontend_1  | Found bindings for the following environments:
frontend_1  |   - Windows 64-bit with Node.js 12.x

Problem loading page

After I run sudo docker-compose up --build, I see

frontend_1  |   App running at:
frontend_1  |   - Local:   http://localhost:8080/ 
frontend_1  | 
frontend_1  |   It seems you are running Vue CLI inside a container.
frontend_1  |   Access the dev server via http://localhost:8080
frontend_1  | 
frontend_1  |   Note that the development build is not optimized.
frontend_1  |   To create a production build, run npm run build.
frontend_1  | 

However, I cannot connect to localhost 8080 in the browser. Am I missing a step?

pipenv and heroku

Could you consider to improve the pacakge using pipenv and heroku deploy button?

Call auth action

this.$store.dispatch('postLogin', { username: '', password: '' });
Why it doesn't work?

Frontend is not working

After the installation and starting docker-compose i cannot open the app.
When i go to localhost:3000 my browser says. "cannot open / GET"
when i go to localhost:8000 i get folowing error message inside browser console.

Failed to load resource: the server responded with a status of 404 (Not Found) localhost/:1 Refused to execute script from 'http://localhost:3000/static/dist/bundle.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

Add https support

Add https support with certbot in this cookiecutter for production and dev environments.

See this link:
https://medium.com/@pentacent/nginx-and-lets-encrypt-with-docker-in-less-than-5-minutes-b4b8a60d3a71

Users app as an option

• django app
• django settings
• vue module and service
• vue store settings

DRF's list_route decorator has been merge into a single action decorator.

backend/apps/users/views.py file must be replaced.

Google Analytics integration

I think it would be nice to have this option together with Yandex Metrika
suggested way: vue-analytics

/usr/bin/env: ‘bash\r’: No such file or directory

during docker-compose up --build

backend_1 /usr/bin/env: ‘bash\r’: No such file or directory
...
backend_1 exited with code 127

npm everywhere

Refactor compose

• local\production
• single django/Dockerfile
• rename webpack to vue
• update docker-compose version

Vuex Login

Hey @vchaptsev

This is honestly not your problem at all so I'm trying my luck a bit here. I can't seem to call an action using vuex via a template. Do you maybe have an example of how you do the postLogin action on a component?

If you want to see how I setup my code for the login it's here:

https://stackoverflow.com/questions/52709493/vue-js-vuex-login-vuex-unknown-action-type-postlogin

Thanks Again

environ error

After going through the setup, I try to get it running by starting ./manage.py runserver - but it crashes:

Traceback (most recent call last):
  File "./manage.py", line 27, in <module>
    execute_from_command_line(sys.argv)
  File "/home/christian/.local/share/virtualenvs/cookiecutter-django-vue-L7tyPivc/lib/python3.7/site-packages/django/core/management/__init__.py", line 381, in execute_from_command_line
    utility.execute()
  File "/home/christian/.local/share/virtualenvs/cookiecutter-django-vue-L7tyPivc/lib/python3.7/site-packages/django/core/management/__init__.py", line 325, in execute
    settings.INSTALLED_APPS
  File "/home/christian/.local/share/virtualenvs/cookiecutter-django-vue-L7tyPivc/lib/python3.7/site-packages/django/conf/__init__.py", line 79, in __getattr__
    self._setup(name)
  File "/home/christian/.local/share/virtualenvs/cookiecutter-django-vue-L7tyPivc/lib/python3.7/site-packages/django/conf/__init__.py", line 66, in _setup
    self._wrapped = Settings(settings_module)
  File "/home/christian/.local/share/virtualenvs/cookiecutter-django-vue-L7tyPivc/lib/python3.7/site-packages/django/conf/__init__.py", line 157, in __init__
    mod = importlib.import_module(self.SETTINGS_MODULE)
  File "/home/christian/.local/share/virtualenvs/cookiecutter-django-vue-L7tyPivc/lib/python3.7/importlib/__init__.py", line 127, in import_module
    return _bootstrap._gcd_import(name[level:], package, level)
  File "<frozen importlib._bootstrap>", line 1006, in _gcd_import
  File "<frozen importlib._bootstrap>", line 983, in _find_and_load
  File "<frozen importlib._bootstrap>", line 967, in _find_and_load_unlocked
  File "<frozen importlib._bootstrap>", line 677, in _load_unlocked
  File "<frozen importlib._bootstrap_external>", line 728, in exec_module
  File "<frozen importlib._bootstrap>", line 219, in _call_with_frames_removed
  File "/home/christian/tmp/cookiecutter-django-vue/medux/backend/config/settings.py", line 10, in <module>
    import environ
  File "/home/christian/.local/share/virtualenvs/cookiecutter-django-vue-L7tyPivc/lib/python3.7/site-packages/environ.py", line 114
    raise ValueError, "No frame marked with %s." % fname
                    ^
SyntaxError: invalid syntax

This mainly isn't your fault mainly, because it seems that the environ module you are importing has a problem using the old Python2 syntax - which seems not working here...

Do you officially support Python3? The "environ" module was released in 2007 on pypi, which is - kind of - outdated ;-)

Could you please move to something else - e.g. os.environ?

NGINX CORS configuration?

Using Axios in a frontend component to retrieve a 3rd party API results in:

Access to XMLHttpRequest at 'http://www.api.github.com/users' from origin 'http://localhost:8000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request

I tried applying this solution ➡️ enable-cors with no success 😢

I assume this is because cors is not properly handled in the NGINX config. Has anyone had success getting past this hurdle? Any ideas what I could do?

py.test fails

It's more related to the original django cookiecutter but i post it here though:

Running the command:
docker-compose run django py.test
returns several errors all related to

       django.db.utils.OperationalError: could not connect to server: No such file or directory
       	Is the server running locally and accepting
       	connections on Unix domain socket "/var/run/postgresql/.s.PGSQL.5432"?

From the following line:
https://github.com/vchaptsev/cookiecutter-django-vue/blob/master/%7B%7Bcookiecutter.project_slug%7D%7D/config/settings/base.py#L104

it seems that env.db('DATABASE_URL') is not set and the default url is not correct.
I had to change to:

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.postgresql_psycopg2',
        'NAME': '{{cookiecutter.project_slug}}',
        'USER': '{{cookiecutter.project_slug}}',
        'HOST': 'postgres',
        'PORT': 5432
    }
}

to make it works. Did i make something wrong during the build process? (No other part of the code has been modified)

I'm on MacOS High Sierra running lastest version of docker

Automated postgres backups

Update to instructions

Just a couple helpful updates to the instructions:

1. Add pip install autopep8 if you don't have it installed.
2. run npm i && npm run lint --fix from the frontend directory.

npm install fail on production

Following the README, I run docker-compose -f docker-compose-prod.yml build -d to try the production environment on an Ubuntu 18.04, but the npm install fails, I've no idea why (not very at ease with Node):

Building nginx
Step 1/12 : FROM node:10-alpine as build-deps
 ---> b328632eb00c
Step 2/12 : WORKDIR /app/
 ---> Running in 432e7ac8a9fe
Removing intermediate container 432e7ac8a9fe
 ---> 460fb3978585
Step 3/12 : COPY frontend/package.json frontend/package-lock.json /app/
 ---> f35a337c5092
Step 4/12 : RUN npm install
 ---> Running in c93071fc448f

> [email protected] install /app/node_modules/deasync
> node ./build.js


ERROR: Service 'nginx' failed to build: The command '/bin/sh -c npm install' returned a non-zero code: 1

Whitenoise integration

One more option for serving static files

Opbeat integration

Despite the fact that Opbeat does not support the Vue, we can use it for VanillaJS\Django perfomance monitoring

Pre-commit hooks

Integrate pre-commit, add some hooks

Hooks:

• pipenv check
  
• manage.py check
• autopep8
• frontend lint

pipenv integration

pipenv is great:

Enables truly deterministic builds, while easily specifying only what you want.
Generates and checks file hashes for locked dependencies.
Automatically install required Pythons, if pyenv is available.
Automatically finds your project home, recursively, by looking for a Pipfile.
Automatically generates a Pipfile, if one doesn't exist.
Automatically creates a virtualenv in a standard location.
Automatically adds/removes packages to a Pipfile when they are un/installed.
Automatically loads .env files, if they exist.

Progress:

• install pipenv
• use pipenv install --system
• split requirements (base/dev)
• add pipenv check to CI
• initialize Pipfile and Pipfile.lock
• update requirements
• test it

manage.py should be made executable

chmod +x {{cookiecutter.project_slug}}/backend/manage.py

just my 2 cents

Django integrity error

Hi,
I am trying to build a signup page in the frontend.
Whenever I call the register endpoint I get this error:
django.db.utils.IntegrityError: null value in column "password" violates not-null constraint
DETAIL: Failing row contains (92, null, null, f, null, null, null, , 7421e702-62e2-4402-a5f8-29e39664d3b0, f, t, f, 2019-09-28:22:38.512193+00).
I'd love to prevent this , but don't know if I am doing something wrong in the frontend , or is there something wrong in the backend.
I just call the postRegister function in my methods, on form submit.

SSL setup

imgur image isn't accessible

This is a small thing, but fyi, the image at https://i.imgur.com/SA8cjs8.png is not accessible.

Access to i.imgur.com was deniedYou don't have authorization to view this page.
HTTP ERROR 403

Vue 3

Greetings, are you considering switching to Vue 3 in the near future?