Try creating a web application with Vue.js and Django (Mac)-(1) Environment construction, application creation

Introduction

Let's build the server side with Python Django and the client site with Vue.js.

Django applications are created with cookiecutter.

Environment

Python

pyenv installation

--Mac: Install Python environment on local PC (pyenv, venv on Mac) --WSL: I'm sorry, I haven't created it yet. After creating it, paste the link.

Python 3.9.0 installation

pyenv versions

Display the list of installed versions with, and if 3.9.0 does not exist, install it.

pyenv install 3.9.0

Create virtual environment for executing cookiecutter

pyenv shell 3.9.0
python -m venv ~/.venv/3.9.0/cookiecutter-3.9
pyenv shell --unset  #Exit the pyenv shell.

Create a virtual environment for running Django applications

pyenv shell 3.9.0
python -m venv ~/.venv/3.9.0/django-sample-3.9
pyenv shell --unset  #Exit the pyenv shell.

nodenv

nodenv installation

--Mac: Install nodenv on Mac, enable any version --WSL: Install nodenv on WSL, enable any version

node.js 13.11.0 installation

nodenv versions

Display the list of installed versions with, and if 13.11.0 does not exist, install it.

nodenv install 13.11.0

Version confirmation

nodenv versions

cookiecutter application creation and execution

Create cookiecutter environment

mkdir cookiecutter
cd cookiecutter/
source ~/.venv/3.9.0/cookiecutter-3.9/bin/activate
pip install --upgrade pip
pip install cookiecutter

cookiecutter execution

cookiecutter https://github.com/pydanny/cookiecutter-django

You will be asked various questions interactively, so proceed while answering.

【Caution】 If you select "3" (None) in Select cloud_provider and set it to" n "in ʻuse_whitenoise, the following error will occur, so select" 1 "or" 2 "in Select cloud_provider. Or, answer "y" with ʻuse_whitenoise.

You should either use Whitenoise or select a Cloud Provider to serve static files
ERROR: Stopping generation because pre_gen_project hook script didn't exit successfully
Hook script failed (exit status: 1)

project_name [My Awesome Project]: django-sample
project_slug [django_sample]: app
description [Behold My Awesome Project!]: Django Sample Application
author_name [Daniel Roy Greenfeld]: *****
domain_name [example.com]: 
email [[email protected]]: *****@*****.***
version [0.1.0]:
Select open_source_license:
1 - MIT
2 - BSD
3 - GPLv3
4 - Apache Software License 2.0
5 - Not open source
Choose from 1, 2, 3, 4, 5 [1]: 5
timezone [UTC]: Asia/Tokyo
windows [n]:
use_pycharm [n]:
use_docker [n]:
Select postgresql_version:
1 - 12.3
2 - 11.8
3 - 10.8
4 - 9.6
5 - 9.5
Choose from 1, 2, 3, 4, 5 [1]:
Select js_task_runner:
1 - None
2 - Gulp
Choose from 1, 2 [1]:
Select cloud_provider:
1 - AWS
2 - GCP
3 - None
Choose from 1, 2, 3 [1]: 3
Select mail_service:
1 - Mailgun
2 - Amazon SES
3 - Mailjet
4 - Mandrill
5 - Postmark
6 - Sendgrid
7 - SendinBlue
8 - SparkPost
9 - Other SMTP
Choose from 1, 2, 3, 4, 5, 6, 7, 8, 9 [1]: 9
use_async [n]:
use_drf [n]:
custom_bootstrap_compilation [n]:
use_compressor [n]:
use_celery [n]:
use_mailhog [n]:
use_sentry [n]:
use_whitenoise [n]: y
use_heroku [n]:
Select ci_tool:
1 - None
2 - Travis
3 - Gitlab
4 - Github
Choose from 1, 2, 3, 4 [1]:
keep_local_envs_in_vcs [y]:
debug [n]:
 [INFO]: .env(s) are only utilized when Docker Compose and/or Heroku support is enabled so keeping them does not make sense given your current setup.
 [WARNING]: You chose not to use a cloud provider, media files won't be served in production.
 [SUCCESS]: Project initialized, keep up the good work!

When the execution of cookiecutter is completed, the directory with the slag name answered in project_slug will be created. Move that directory directly under your home directory as django-sample.

/bin/cp -Ra app ~/django-sample

Vue.js application creation

mkdir ~/vue-sample/
cd ~/vue-sample/
nodenv local 13.11.0
node -v  #node version is v13.11.Confirm that it is 0

npm init --yes
npm install npm  #Update npm

npm install @vue/cli
npm install @vue/cli-init

Then, to pass the Path, do the following:

npm bin

For Mac

/Users/*****/vue-sample/node_modules/.bin

Is displayed, add that path to your PATH.

export PATH="/Users/*****/vue-sample/node_modules/.bin:$PATH"

Create a project.

vue init webpack vue-sample

? Project name vue-sample
? Project description A Vue.js project
? Author
? Vue build standalone
? Install vue-router? No
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm

If you succeed in creating the application,

# Project initialization finished!
# ========================

To get started:

  cd vue-sample
  npm run dev

Is displayed, execute the following command to execute the application.

cd vue-sample
npm run dev

Your application is running here: http://localhost:8080

Is displayed, access [http: // localhost: 8080](http: // localhost: 8080).