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!
Question Default Setting Remarks
project_name My Awesome Project django-sample
project_slug django_sample app
description Behold My Awesome Project! Django Sample Application There is no problem as it is
author_name Daniel Roy Greenfeld ***** Enter your name
domain_name example.com (Default) I think it will be changed later, but for the time being, it's okay as it is
email [email protected] Enter your email address~
version 0.1.0 (Default)
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 Select a license to make it open source
timezone UTC Asia/Tokyo
windows n (Default)
use_pycharm n (Default) If you use PyCharm, you can set it to y
use_docker n (Default)
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 (Default) In my case, I often use MySQL or MariaDB, so I will change it later, so here I will proceed by default as appropriate.
Select js_task_runner:
1 - None
2 - Gulp
Choose from 1, 2
1 (Default)
Select cloud_provider:
1 - AWS
2 - GCP
3 - None
Choose from 1, 2, 3
1 3 Since the cloud provider has not been decided, set it to 3. If you have already decided, I think that 1-2 is fine.
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 If you have decided what to use for the mail sending service, select it.
use_async n (Default)
use_drf n (Default)
custom_bootstrap_compilation n (Default)
use_compressor n (Default)
use_celery n (Default)
use_mailhog n (Default)
use_sentry n (Default)
use_whitenoise n y If you specify None in your cloud provider, it seems that you need to select y here
use_heroku n (Default)
Select ci_tool:
1 - None
2 - Travis
3 - Gitlab
4 - Github
Choose from 1, 2, 3, 4
1 (Default)
keep_local_envs_in_vcs y (Default)
debug n (Default)

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).

image.png

Recommended Posts

Try creating a web application with Vue.js and Django (Mac)-(1) Environment construction, application creation
Web application creation with Django
Web application made with Python3.4 + Django (Part.1 Environment construction)
Build a web application with Django
(For beginners) Try creating a simple web API with Django
Launched a web application on AWS with django and changed jobs
I made a WEB application with Django
Try to make a nervous breakdown application with Vue.js and Django-Rest-Framework [Part 4] ~ MySQL construction and DB migration with Docker ~
Looking back on creating a web service with Django 1
(Python) Try to develop a web application using Django
Looking back on creating a web service with Django 2
Try running python in a Django environment created with pipenv
Mac + Eclipse (PyDev) + Django environment construction
Creating a web application using Flask ②
Deploy a Django application with Docker
Creating a voice transcription web application
Creating a web application using Flask ①
Creating a web application using Flask ③
Creating a web application using Flask ④
Environment construction with pyenv and pyenv-virtualenv
If you know Python, you can make a web application with Django
Web application created with Python + Flask (using VScode) # 1-Virtual environment construction-
Build a Python environment on your Mac with Anaconda and PyCharm
Web App Development Practice: Create a Shift Creation Page with Django! (Shift creation page)
Creating a Shogi Game Record Management App Using Django 1-Environment Construction-
[DynamoDB] [Docker] Build a development environment for DynamoDB and Django with docker-compose
LaTeX and R (a little Python) environment construction with SublimeText3 (Windows)
Vue.js + Flask environment construction memorandum ~ with Anaconda3 ~
WEB application development using django-Development environment construction-
How about creating a virtual environment with Anaconda and doing pip install?
Web App Development Practice: Create a Shift Creation Page with Django! (Introduction)
Creating a login screen with Django allauth
[Python] A quick web application with Bottle!
"Trash classification by image!" App creation diary day3 ~ Web application with Django ~
Run a Python web application with Docker
Create a Todo app with Django ④ Implement folder and task creation functions
A memo packed with RADEX environment construction
Create a Python3 environment with pyenv on Mac and display a NetworkX graph
Build a drone simulator environment and try a simple flight with Mission Planner
Ramen map creation with Scrapy and Django
Easy-to-understand explanation of Python Web application (Django) even for beginners (1) [Environment construction]
[Personal development] Story of creating an application for artists with SPA with Django REST Framework and Vue-Cli [DRF + Vue.js]
What I was addicted to when creating a web application in a windows environment
Let's make a nervous breakdown application with Vue.js and Django-Rest-Framework [Part 3] ~ Implementation of nervous breakdown ~
[ES Lab] I tried to develop a WEB application with Python and Flask ②
Build a data analysis environment that links GitHub authentication and Django with JupyterHub
The story of making a web application that records extensive reading with Django
Create a Django project and application in a Python virtual environment and start the server
Let's make a nervous breakdown app with Vue.js and Django-Rest-Framework [Part 1] ~ Django setup ~
Let's make a nervous breakdown application with Vue.js and Django-Rest-Framework [Part 6] ~ User Authentication 2 ~
WEB scraping with python and try to make a word cloud from reviews
Let's make a nervous breakdown application with Vue.js and Django-Rest-Framework [Part 5] ~ User authentication ~
How to run a Django application on a Docker container (development and production environment)
Install and set Jupyter Notebook to create a study note creation environment [Mac]
[Python] How to create a local web server environment with SimpleHTTPServer and CGIHTTPServer
Python3 TensorFlow environment construction (Mac and pyenv virtualenv)
Environment construction with VSCode + Remote Container (Go / Application)
MacOS 10.11 environment construction: Powerline with Anaconda and Dein.vim
Building a python environment with virtualenv and direnv
WEB application development using Django [Admin screen creation]
Until Django application creation by terminal (development environment)