-
Notifications
You must be signed in to change notification settings - Fork 0
Setting up the Demo Application
In this module, we will discuss and demonstrate what is needed to set up the demo application that we looked at in the previous module. Having the right software development tools can make a world of difference, so we will spend a little time in this module going over a few of the tools that you too may find helpful when developing the demo application. In the next clip, we will start looking at the frameworks and libraries we'll need for the API server project, as well as for the client or user interface project. At the foundation of both of these projects is Node.js. Next, the API server will be built using Express.js. This is also where we will be using Mongoose to communicate with our underlying MongoDB server. For the UI side of things, we'll be using Vue.js and Vuetify in material design framework for vue.js.
In this clip, we will start looking at the key frameworks and libraries that we will need to build our demo application. We'll start by looking at those needed for our API server project and then those for the client or user interface project. Our RESTful API server will be built using Express, so that will be a core framework that we need to get installed. To get Express installed for our demo project, simply follow these instructions from within the server project folder. We'll take a look at that in a moment during the demo portion of this module. We will also use ESLint to keep us honest and our JavaScript code cleaner and more compliant. We'll use the body-parser package to, as the name suggests, parse the incoming request body when doing actions such as POST. It will probably make more sense when we start building out a RESTful API server project, but we're also going to have cross-origin resource sharing issues because our client and server will be running on different localhost ports. To address these issues, we will install and use the cors package as shown here. To help us with development and debugging of our API server request, let's use morgan as our request logger. We're going to want a watcher to automatically restart our API server when we make changes in our code editor. A popular package to consider and use is nodemon. There are other options out there to consider, but for this project, we'll just use nodemon. And last, but certainly not least, is the start of the show, Mongoose. We'll not get far in this course on Mongoose if we don't get this installed. As mentioned earlier, we will be using Express.js on the server-side project as the framework on top of Node.js that we will build our RESTful API upon. A nice piece of middleware that Express provides for us is Router. We will be taking advantage of this when we build out the GET, POST, and other routes to our API. Speaking of routes, we will separate out each route by feature. And for our project, those features will be projects, which is where we'll be getting a list of active projects to select from; standup, which will provide us with a list of standup meeting notes, either sorted by the newest or by some other query criteria; team, which is the list of team members we will select from when entering in a new standup meeting note.
Now let's discuss the various client project packages that we'll be using. As mentioned in the previous module, the UI side of this course is not the primary focus. But that being said, for our demo, we'll still want a decent looking UI, and for this, we'll be using Vue.js, and in particular, the new Vue command-line interface tool, vue-cli, which we will install and use later on in this module to get the foundation of our client-side project laid out. Without going into depth on state management in Vue.js, we'll want to use a central state store to keep track of our application data. We'll be using Vuex for this. Our demo project will be following material design specs. The implementation of material designed for Vue.js that we will be using in this project is called Vuetify, and here are the instructions for installing that. It would also be a great idea to visit the official Vuetify website found at this URL. As you've already seen in the previous module when we previewed the completed demo application, Vuetify provides us with a large library of really good looking components that follow the material design specifications. Continuing on with the client project packages that we need to install, next on the list is Axios, which is a promise-based HTTP client that we will use to communicate with the Express RESTful API server. When from our client we need to retrieve some data from our MongoDB database through Mongoose, this is the vehicle we'll be traveling across that wire with. Once again, we won't be focusing too much on the UI side of things in this course, but we still want it to look good. One package that will help us out with the material design framework we've selected, Vuetify, is the material-designs-icons font package. An important package that we'll get installed when we install and use the vue-cli is webpack. You should not have to install this manually, but should you find yourself needing to, here are those instructions as well. As we go through the course and develop our demo application, you may notice other packages and libraries that we will use or discuss. But for now, these are the core packages that we will get our development efforts started with.
In this section, we will take a look at some of the helpful development tools we'll use through the development of our demo application. There are many really good lightweight text editors available to us now. Not too many years ago, the choices were somewhat limited. Now there are a number of really solid code editors, and a lot of them are free to use. For example, the editor that we'll be using in this course, Visual Studio Code, is free to all and available on Windows, Mac, and Linux. Visual Studio Code can be found at the link provided here should you care to download it and check it out. If you follow along in this course and use a different code editor, you'll be just fine. We will not be spending much time at all discussing webpack, but it is a key part of our client project. We will use the webpack template when setting up our demo application using the Vue command-line tool. It's good to know about webpack and what it does for you, but it's not necessary to have a deep understanding of it to get through this course effectively. Should you desire to dive into webpack a little deeper, look for the Webpack Fundamentals course here on Pluralsight. As we're developing our API, which will be the primary focus of the course, we will be using a fantastic tool to test that out with known as Postman. If you do not have Postman installed on your computer yet, pause the video and go to the link provided here. You'll want to get this installed and set up right away. When it comes time to design our MongoDB database, we certainly could do all that work through the command line, but we're not going to do that. If you're a lazy developer like I am, you'll want to look for a tool such as Studio 3T to help you out with the management of your MongoDB collections. In other courses, I've mention and used Robomongo, and you still may find that a useful tool, but be sure to get the newest version, which has been renamed Robo 3T. The rights to Robomongo were purchased by 3T Software, the same people that bring us the full Studio 3T product, which is what we will be using in this course.
Now that we've discussed some of the various frameworks and libraries we'll need both on the server and the client side of things, as well as some of the useful tools that will be used throughout the remainder of this course as we develop the demo application together, it's time to start developing our server-side Express API. Let's dive right in and get this going. Here in the demo project folder, we will separate the server and client projects by setting up a different folder for each. I've already created a client folder, as well as a server folder. Since we're going to first work on the Express API, we'll want to go to the server folder, so cd server. The first step that we'll take is to run npm init to generate a package.json file. You can accept the defaults on most of these questions or change them as you see fit. Now we can start adding in the various libraries and packages we need. Let's start with Express. Yarn add express. As mentioned earlier, we'll need to parse the inbound request, and we'll use the body-parser package to accomplish this, so yarn add body-parser. Our client and server projects will be running on different ports; and therefore, we will run into cross-origin resource sharing issues. To take care of that problem, let's bring in the cors library, yarn add cors. And of course, we need Mongoose.js, so yarn add mongoose. It's not required, you may want to consider linting your code as you develop. And for this course, we'll use ESLint, yarn add eslint. That gets ESLint installed for us, but it now needs to be initialized and configured.
Adarsh:server adarshmaurya$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.
See `npm help json` for definitive documentation on these fields
and exactly what they do.
Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.
Press ^C at any time to quit.
package name: (server) server-api
version: (1.0.0)
description:
entry point: (index.js) app.js
test command:
git repository:
keywords:
author: Adarsh Maurya
license: (ISC) The Unlicense
Sorry, license should be a valid SPDX license expression (without "LicenseRef"), "UNLICENSED", or "SEE LICENSE IN <filename>" and license is similar to the valid expression "Unlicense".
license: (ISC) The Unlicense
Sorry, license should be a valid SPDX license expression (without "LicenseRef"), "UNLICENSED", or "SEE LICENSE IN <filename>" and license is similar to the valid expression "Unlicense".
license: (ISC) MIT
About to write to /Users/adarshmaurya/Playground/mongodb-and-mogoose-for-node-getting-started/server/package.json:
{
"name": "server-api",
"version": "1.0.0",
"description": "",
"main": "app.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Adarsh Maurya",
"license": "MIT"
}
Is this OK? (yes)
Adarsh:server adarshmaurya$ clear
Adarsh:server adarshmaurya$ yar add express
-bash: yar: command not found
Adarsh:server adarshmaurya$ clear
Adarsh:server adarshmaurya$ yarn add express
-bash: yarn: command not found
Adarsh:server adarshmaurya$ brew install yarn
Updating Homebrew...
==> Auto-updated Homebrew!
Updated 1 tap (homebrew/core).
==> New Formulae
aom healpix pict
astrometry-net i386-elf-binutils postgresql@10
azure-storage-cpp i386-elf-gcc qalculate-gtk
curl-openssl i386-elf-gdb rargs
dav1d interactive-rebase-tool ruby@2.4
dnscontrol kubespy shellz
easyengine maven@3.5 sng
fluxctl mesa sourcedocs
fx minica um
gambit-scheme node@10 up
gitmoji opa websocat
goreman php@7.2
==> Updated Formulae
carthage ✔ libical
ghostscript ✔ libimagequant
icu4c ✔ libjson-rpc-cpp
imagemagick ✔ libjwt
libpng ✔ liblcf
libtiff ✔ liblo
node ✔ libmagic
abcm2ps libmspub
abyss libomp
ace libopendkim
activemq libosmium
advancecomp libphonenumber
advancemame libplctag
adwaita-icon-theme libpq
agda libpqxx
aha libqalculate
aircrack-ng librdkafka
akamai librealsense
alexjs libressl
algernon librsvg
allure libsass
amazon-ecs-cli libsigc++
ammonite-repl libsoup
amqp-cpp libspectre
angle-grinder libswiften
angular-cli libtcod
annie libtensorflow
ansible libtins
ansible-cmdb libtorrent-rasterbar
ansifilter libuv
apache-arrow-glib libvirt
apache-flink libvisio
apache-geode libvmaf
apache-spark libwebsockets
app-engine-java libxlsxwriter
aptly libxml2
arangodb libxmlsec1
arcade-learning-environment lighttpd
ark linkerd
armor llvm
arx llvm@3.9
asciidoc llvm@4
asciidoctor llvm@5
asdf llvm@6
aspectj lmod
aubio logstash
augustus logtalk
autopep8 lolcat
aws-es-proxy lumo
aws-sdk-cpp lxc
awscli lynis
awslogs mackup
azure-cli macvim
b2-tools makensis
babel mame
ballerina mandoc
basex mapnik
bash-snippets mapserver
bat mariadb
bazel mariadb@10.0
bcal mariadb@10.1
bdw-gc mariadb@10.2
beagle mas
beast math-comp
bettercap maven
bgpdump maxwell
bgpq3 mdcat
bigloo mdp
binaryen media-info
bind megacmd
binutils memcached
bison mercurial
bitcoin meson
bitrise metaproxy
bitwarden-cli micronaut
blink1 mikutter
bluepill mill
bmake mimic
bnd minio
boost minio-mc
boost-bcp miniserve
boost-build minizinc
boost-mpi mint
boost-python mitie
boost-python3 mkl-dnn
botan mkvtoolnix
bowtie2 mlt
braid mmseqs2
brotli mockserver
btfs monero
buildifier mongo-cxx-driver
buku mongodb
bundletool mongodb@3.4
bup mongodb@3.6
byteman mongoose
bzt mosquitto
c-ares mpc
c-blosc mpd
c10t mpich
cabal-install mps-youtube
cabextract mpv
caddy mruby
caf muparser
caffe mutt
cake mycli
calc mysql@5.5
camlp5 mysql@5.6
cargo-completion mysql@5.7
carla mysqltuner
catimg nailgun
cayley nano
ccextractor nanomsg
cclive nasm
ceres-solver nativefier
cern-ndiff ncmpcpp
certbot neo4j
certigo netdata
cfitsio netpbm
cglm nettle
chakra newsboat
chamber nghttp2
cheat nginx
checkbashisms nifi
checkstyle nmh
chicken nng
chronograf nnn
chruby-fish node-build
circleci node@6
citus node@8
ckan nodeenv
clang-format nsd
clblast nss
cling numpy
clojure nuxeo
clojurescript nwchem
cmake ocaml
cmark-gfm ocaml-num
cockroach ocamlbuild
collectd ocamlsdl
collector-sidecar octave
commandbox odpi
composer ompl
conan oniguruma
configen opam
confluent-oss open-mpi
console_bridge open-scene-graph
consul openapi-generator
container-diff openblas
convox opencascade
coq opencoarrays
couchdb opencv
cp2k opencv@2
cpanminus openfortivpn
cppcheck openimageio
cpprestsdk openmsx
crc32c openrct2
create-dmg openrtsp
crosstool-ng openssl
crowdin openssl@1.1
crystal openvdb
crystal-icr opus-tools
cucumber-cpp opusfile
curaengine osm2pgrouting
curl osmium-tool
cython osquery
dartsim osrm-backend
dash oysttyer
dasht pacapt
dateutils packer
davix paket
dbhash pandoc
dbus pandoc-citeproc
dcd pandoc-crossref
dcm2niix pangomm
ddgr parallel
dependency-check parallelstl
dfmt passenger
dialog payara
diff-pdf pazpar2
diffoscope pcl
digdag pdal
digitemp pdfpc
direnv pdftoedn
dita-ot pdftoipe
django-completion percona-server
dlib percona-server@5.6
dmd petsc
dnscrypt-proxy petsc-complex
dnscrypt-wrapper pgcli
docfx pgformatter
docker pgroonga
docker-completion pgrouting
docker-compose pgweb
docker-compose-completion phoronix-test-suite
docker-credential-helper-ecr php
docker-ls php-cs-fixer
docker-machine php@5.6
docker-machine-completion php@7.1
docker-machine-nfs phpmyadmin
doctl phpunit
doitlive picard-tools
dscanner pig
dub pijul
duc pike
duo_unix pip-completion
duplicity pipenv
dwdiff pixman
dwm pktanon
editorconfig planck
eigen plantuml
ejabberd platformio
elasticsearch plplot
elasticsearch@5.6 pmd
elektra pngquant
elixir poppler
embulk posh
emscripten postgis
envconsul postgresql
eprover ppsspp
epubcheck pqiv
erlang pre-commit
erlang@18 presto
erlang@20 prettier
eslint primesieve
ethereum prips
evince prometheus
exercism protobuf
exploitdb ps2eps
faas-cli pspg
fabio pulumi
fatsort pumba
fauna-shell purescript
fbi-servefiles pwntools
fd py2cairo
fdk-aac py3cairo
fdk-aac-encoder pyenv
feedgnuplot pygobject3
feh python
ffmpeg q
ffmpeg2theora qbs
ffmpeg@2.8 qcli
ffmpegthumbnailer qemu
ffms2 qmmp
file-formula qpid-proton
fio qt
firebase-cli quicktype
flake8 rabbitmq
fluent-bit radare2
flume rakudo-star
flyway rancher-cli
fmt range-v3
fn rbspy
folly rclone
fonttools rdesktop
fork-cleaner re2
fping rebar3
fq recon-ng
freeciv redis
freeling redo
freetds remarshal
freetds@0.91 restic
frugal riemann-client
fruit rke
fselect rmlint
fswatch rom-tools
futhark root
fwup rst-lint
gandi.cli rtags
gcab ruby
gcc@6 ruby-build
gcc@7 rust
gdb rustup-init
gdbm safe
gecode sagittarius-scheme
gedit sbcl
geos sbt
getdns sbt@0.13
gexiv2 scala
gflags scalaenv
ghc scalapack
gimme sceptre
git scipy
git-annex scrcpy
git-archive-all sdb
git-cinnabar sdcc
git-lfs sdl2
git-quick-stats sdl2_image
git-recent sdl2_mixer
git-standup sec
git-subrepo selenium-server-standalone
gitbucket serverless
github-markdown-toc sfcgal
gitlab-gem shadowsocks-libev
gitlab-runner shairport-sync
gitversion shc
gjs shellcheck
glibmm shfmt
glm shibboleth-sp
globjects sile
glslang simple-amqp-client
gmime sip
gmsh skaffold
gnome-latex skafos
gnupg skinny
gnuradio skopeo
go sleuthkit
go-bindata smimesign
go-statik snapcraft
go@1.10 snappystream
goaccess snapraid
gobject-introspection sngrep
gocryptfs solr
godep sonarqube
goenv sonobuoy
goffice sops
golang-migrate source-highlight
gopass source-to-image
goreleaser sourcekitten
gosu spdlog
gowsdl sphinx-doc
gpa spotbugs
gphoto2 sqlcipher
gpsbabel sqldiff
gr-osmosdr sqlite
gradio sqlite-analyzer
gradle sqlmap
grafana sratoolkit
grails sslscan
graph-tool statik
graphicsmagick stellar-core
grib-api stern
groovy stgit
groovysdk stockfish
grpc stone-soup
grunt-cli stubby
grunt-completion stunnel
gst-plugins-ugly sundials
gstreamermm svtplay-dl
gtk+3 swagger-codegen
gtkmm3 swift
gucharmap swiftformat
gupnp-av swiftlint
gupnp-tools swimat
gwyddion sync_gateway
hadolint syncthing
hapi-fhir-cli sysbench
haproxy sysdig
harfbuzz tarantool
haskell-stack taskell
haste-client tbb
hbase tcpreplay
hcloud tealdeer
hebcal tectonic
helmfile telegraf
hfstospell teleport
highlight temporal_tables
hive termius
homebank termrec
httpd terraform
httpie terraform-docs
hub terraform_landscape
hugo terragrunt
hunspell tesseract
hyperfine tgui
i2pd thefuck
ibex theharvester
icecream thors-serializer
icemon tile38
idris tinyproxy
ike-scan tinyxml2
imagemagick@6 tippecanoe
imageoptim-cli tmuxinator-completion
imageworsener tomcat
imapfilter tomcat-native
immortal tomcat@7
influxdb tomcat@8
innotop tomee-webprofile
inspircd topgrade
instead tor
ioping tox
ios-deploy traefik
ios-webkit-debug-proxy translate-toolkit
ipfs travis
ipython tree
jabba treefrog
jansson tty-solitaire
jbake ttyd
jbig2dec tundra
jboss-forge tunnel
jdnssec-tools tup
jdupes twoping
jena typescript
jenkins ubertooth
jenkins-lts ucloud
jetty uhd
jfrog-cli-go unbound
jhipster uncrustify
joplin unshield
jq upscaledb
json-fortran urdfdom_headers
jsonnet urh
juju uriparser
jump uru
just v8
kafka vagrant-completion
kakoune vala
kallisto vapoursynth
kapacitor varnish
khal vault
kibana vaulted
kibana@5.6 vegeta
kitchen-sync vert.x
knot vfuse
knot-resolver vim
kobalt vim@7.4
kompose vips
kotlin vnu
krakend voldemort
krb5 vsts-cli
kube-aws vte3
kubectx vtk
kubeless wabt
kubernetes-cli wartremover
kubernetes-helm wcslib
kubernetes-service-catalog-client weaver
kustomize webp
lablgtk webpack
landscaper weechat
lastpass-cli wesnoth
laszip wget
latex2html when
latexdiff whois
lcm widelands
lean-cli wine
ledger winetricks
lego wireguard-tools
leiningen wireshark
leptonica wolfssl
lgogdownloader wp-cli
libassuan wskdeploy
libatomic_ops wtf
libav wxmaxima
libbi x264
libbitcoin xcodegen
libbitcoin-blockchain xmake
libbitcoin-client xml-security-c
libbitcoin-database xml-tooling-c
libbitcoin-explorer xmrig
libbitcoin-network xonsh
libbitcoin-node xsimd
libbitcoin-protocol xtensor
libbitcoin-server yaml-cpp
libbladerf yamllint
libbtbb yank
libcdr yarn
libcec yaz
libcouchbase yle-dl
libdazzle yosys
libdill you-get
libedit youtube-dl
liberasurecode yq
libextractor z3
libfabric zanata-client
libfreehand zebra
libgcrypt zim
libgda zimg
libgit2 znc
libgit2-glib zookeeper
libgosu zorba
libgpg-error zsh-autosuggestions
libgphoto2 zsh-completions
libhttpserver
==> Renamed Formulae
gutenberg -> zola hh -> hstr mat -> mat2
==> Deleted Formulae
apple-gcc42 gradle@2.14 nethack4 taylor
aptly-completion kibana@4.4 php@7.0 tcptrack
corebird maven@3.0 pldebugger
ffmbc maven@3.1 ruby@2.2
==> Installing dependencies for yarn: icu4c and node
==> Installing yarn dependency: icu4c
==> Downloading https://homebrew.bintray.com/bottles/icu4c-63.1.mojave.bottle.ta
######################################################################## 100.0%
==> Pouring icu4c-63.1.mojave.bottle.tar.gz
==> Caveats
icu4c is keg-only, which means it was not symlinked into /usr/local,
because macOS provides libicucore.dylib (but nothing else).
If you need to have icu4c first in your PATH run:
echo 'export PATH="/usr/local/opt/icu4c/bin:$PATH"' >> ~/.bash_profile
echo 'export PATH="/usr/local/opt/icu4c/sbin:$PATH"' >> ~/.bash_profile
For compilers to find icu4c you may need to set:
export LDFLAGS="-L/usr/local/opt/icu4c/lib"
export CPPFLAGS="-I/usr/local/opt/icu4c/include"
For pkg-config to find icu4c you may need to set:
export PKG_CONFIG_PATH="/usr/local/opt/icu4c/lib/pkgconfig"
==> Summary
🍺 /usr/local/Cellar/icu4c/63.1: 254 files, 68.4MB
==> Installing yarn dependency: node
==> Downloading https://homebrew.bintray.com/bottles/node-11.5.0.mojave.bottle.t
######################################################################## 100.0%
==> Pouring node-11.5.0.mojave.bottle.tar.gz
==> Caveats
Bash completion has been installed to:
/usr/local/etc/bash_completion.d
==> Summary
🍺 /usr/local/Cellar/node/11.5.0: 3,938 files, 46.5MB
==> Installing yarn
==> Downloading https://yarnpkg.com/downloads/1.12.3/yarn-v1.12.3.tar.gz
==> Downloading from https://github-production-release-asset-2e65be.s3.amazonaws
######################################################################## 100.0%
🍺 /usr/local/Cellar/yarn/1.12.3: 14 files, 4.7MB, built in 11 seconds
==> Caveats
==> icu4c
icu4c is keg-only, which means it was not symlinked into /usr/local,
because macOS provides libicucore.dylib (but nothing else).
If you need to have icu4c first in your PATH run:
echo 'export PATH="/usr/local/opt/icu4c/bin:$PATH"' >> ~/.bash_profile
echo 'export PATH="/usr/local/opt/icu4c/sbin:$PATH"' >> ~/.bash_profile
For compilers to find icu4c you may need to set:
export LDFLAGS="-L/usr/local/opt/icu4c/lib"
export CPPFLAGS="-I/usr/local/opt/icu4c/include"
For pkg-config to find icu4c you may need to set:
export PKG_CONFIG_PATH="/usr/local/opt/icu4c/lib/pkgconfig"
==> node
Bash completion has been installed to:
/usr/local/etc/bash_completion.d
Adarsh:server adarshmaurya$ yar add express
-bash: yar: command not found
Adarsh:server adarshmaurya$ yarn add express
yarn add v1.12.3
info No lockfile found.
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
[4/4] 📃 Building fresh packages...
success Saved lockfile.
success Saved 29 new dependencies.
info Direct dependencies
└─ express@4.16.4
info All dependencies
├─ accepts@1.3.5
├─ array-flatten@1.1.1
├─ body-parser@1.18.3
├─ content-disposition@0.5.2
├─ cookie-signature@1.0.6
├─ cookie@0.3.1
├─ destroy@1.0.4
├─ ee-first@1.1.1
├─ express@4.16.4
├─ finalhandler@1.1.1
├─ forwarded@0.1.2
├─ http-errors@1.6.3
├─ inherits@2.0.3
├─ ipaddr.js@1.8.0
├─ media-typer@0.3.0
├─ merge-descriptors@1.0.1
├─ methods@1.1.2
├─ mime-db@1.37.0
├─ mime@1.4.1
├─ negotiator@0.6.1
├─ path-to-regexp@0.1.7
├─ proxy-addr@2.0.4
├─ raw-body@2.3.3
├─ safe-buffer@5.1.2
├─ safer-buffer@2.1.2
├─ serve-static@1.13.2
├─ unpipe@1.0.0
├─ utils-merge@1.0.1
└─ vary@1.1.2
✨ Done in 2.76s.
Adarsh:server adarshmaurya$ yarn add body-parser
yarn add v1.12.3
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
warning Pattern ["body-parser@^1.18.3"] is trying to unpack in the same destination "/Users/adarshmaurya/Library/Caches/Yarn/v4/npm-body-parser-1.18.3-5b292198ffdd553b3a0f20ded0592b956955c8b4/node_modules/body-parser" as pattern ["body-parser@1.18.3"]. This could result in non-deterministic behavior, skipping.
[3/4] 🔗 Linking dependencies...
[4/4] 📃 Building fresh packages...
success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ body-parser@1.18.3
info All dependencies
└─ body-parser@1.18.3
✨ Done in 0.35s.
Adarsh:server adarshmaurya$ yarn add cors
yarn add v1.12.3
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
[4/4] 📃 Building fresh packages...
success Saved lockfile.
success Saved 2 new dependencies.
info Direct dependencies
└─ cors@2.8.5
info All dependencies
├─ cors@2.8.5
└─ object-assign@4.1.1
✨ Done in 0.43s.
Adarsh:server adarshmaurya$ yarn add mongoose
yarn add v1.12.3
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
[4/4] 📃 Building fresh packages...
success Saved lockfile.
success Saved 17 new dependencies.
info Direct dependencies
└─ mongoose@5.4.0
info All dependencies
├─ async@2.6.1
├─ bluebird@3.5.1
├─ bson@1.1.0
├─ kareem@2.3.0
├─ lodash.get@4.4.2
├─ lodash@4.17.11
├─ memory-pager@1.3.1
├─ mongodb@3.1.10
├─ mongoose-legacy-pluralize@1.0.2
├─ mongoose@5.4.0
├─ mpath@0.5.1
├─ mquery@3.2.0
├─ require_optional@1.0.1
├─ resolve-from@2.0.0
├─ saslprep@1.0.2
├─ semver@5.6.0
└─ sparse-bitfield@3.0.3
✨ Done in 4.36s.
Adarsh:server adarshmaurya$ yar add eslint
-bash: yar: command not found
Adarsh:server adarshmaurya$ yarn add eslint
yarn add v1.12.3
[1/4] 🔍 Resolving packages...
warning eslint > file-entry-cache > flat-cache > circular-json@0.3.3: CircularJSON is in maintenance only, flatted is its successor.
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
[4/4] 📃 Building fresh packages...
success Saved lockfile.
success Saved 94 new dependencies.
info Direct dependencies
└─ eslint@5.10.0
info All dependencies
├─ @babel/code-frame@7.0.0
├─ @babel/highlight@7.0.0
├─ acorn-jsx@5.0.1
├─ acorn@6.0.4
├─ ajv@6.6.2
├─ ansi-escapes@3.1.0
├─ ansi-regex@3.0.0
├─ ansi-styles@3.2.1
├─ argparse@1.0.10
├─ astral-regex@1.0.0
├─ balanced-match@1.0.0
├─ brace-expansion@1.1.11
├─ caller-path@0.1.0
├─ callsites@0.2.0
├─ chardet@0.7.0
├─ circular-json@0.3.3
├─ cli-cursor@2.1.0
├─ cli-width@2.2.0
├─ color-convert@1.9.3
├─ color-name@1.1.3
├─ concat-map@0.0.1
├─ cross-spawn@6.0.5
├─ deep-is@0.1.3
├─ doctrine@2.1.0
├─ eslint-scope@4.0.0
├─ eslint-utils@1.3.1
├─ eslint@5.10.0
├─ espree@5.0.0
├─ esprima@4.0.1
├─ esquery@1.0.1
├─ esrecurse@4.2.1
├─ estraverse@4.2.0
├─ external-editor@3.0.3
├─ fast-deep-equal@2.0.1
├─ fast-json-stable-stringify@2.0.0
├─ fast-levenshtein@2.0.6
├─ figures@2.0.0
├─ file-entry-cache@2.0.0
├─ flat-cache@1.3.4
├─ fs.realpath@1.0.0
├─ functional-red-black-tree@1.0.1
├─ glob@7.1.3
├─ globals@11.9.0
├─ graceful-fs@4.1.15
├─ has-flag@3.0.0
├─ ignore@4.0.6
├─ imurmurhash@0.1.4
├─ inflight@1.0.6
├─ inquirer@6.2.1
├─ is-promise@2.1.0
├─ isexe@2.0.0
├─ js-tokens@4.0.0
├─ js-yaml@3.12.0
├─ json-schema-traverse@0.4.1
├─ json-stable-stringify-without-jsonify@1.0.1
├─ levn@0.3.0
├─ mimic-fn@1.2.0
├─ minimist@0.0.8
├─ mute-stream@0.0.7
├─ natural-compare@1.4.0
├─ nice-try@1.0.5
├─ onetime@2.0.1
├─ optionator@0.8.2
├─ os-tmpdir@1.0.2
├─ path-is-absolute@1.0.1
├─ path-is-inside@1.0.2
├─ path-key@2.0.1
├─ pluralize@7.0.0
├─ progress@2.0.3
├─ punycode@2.1.1
├─ regexpp@2.0.1
├─ require-uncached@1.0.3
├─ resolve-from@1.0.1
├─ restore-cursor@2.0.0
├─ rimraf@2.6.2
├─ run-async@2.3.0
├─ rxjs@6.3.3
├─ shebang-command@1.2.0
├─ shebang-regex@1.0.0
├─ signal-exit@3.0.2
├─ slice-ansi@2.0.0
├─ sprintf-js@1.0.3
├─ string-width@2.1.1
├─ strip-json-comments@2.0.1
├─ supports-color@5.5.0
├─ table@5.1.1
├─ text-table@0.2.0
├─ through@2.3.8
├─ tmp@0.0.33
├─ tslib@1.9.3
├─ uri-js@4.2.2
├─ which@1.3.1
├─ wordwrap@1.0.0
└─ write@0.2.1
✨ Done in 9.51s.
Adarsh:server adarshmaurya$ Adarsh:server adarshmaurya$ ls -la
total 112
drwxr-xr-x 5 adarshmaurya staff 160 Dec 20 00:53 .
drwxr-xr-x 10 adarshmaurya staff 320 Dec 20 00:42 ..
drwxr-xr-x 178 adarshmaurya staff 5696 Dec 20 00:55 node_modules
-rw-r--r-- 1 adarshmaurya staff 370 Dec 20 00:55 package.json
-rw-r--r-- 1 adarshmaurya staff 49872 Dec 20 00:55 yarn.lock
Adarsh:server adarshmaurya$ We do that by running the ESLint JavaScript file. We do that by entering node ./node_modules/eslint/bin/eslint.js --init.
Adarsh:server adarshmaurya$ ./node_modules/eslint/bin/eslint.js --init
? How would you like to configure ESLint? Answer questions about your style
? Which version of ECMAScript do you use? ES2015
? Are you using ES6 modules? Yes
? Where will your code run? (Press <space> to select, <a> to toggle all, <i> to
invert selection)Browser
? Do you use CommonJS? Yes
? Do you use JSX? No
? What style of indentation do you use? Tabs
? What quotes do you use for strings? Single
? What line endings do you use? Unix
? Do you require semicolons? No
? What format do you want your config file to be in? JSON
Local ESLint installation not found.
The config that you've selected requires the following dependencies:
eslint@latest
Successfully created .eslintrc.json file in /Users/adarshmaurya/Playground/mongodb-and-mogoose-for-node-getting-started/server
ESLint was installed locally. We recommend using this local copy instead of your globally-installed copy.You'll be asked a number of questions about how you want ESLint set up. You may have different needs, so feel free to set up ESLint to your liking. It was also mentioned that it would be nice to log requests to our API server. And to do this, we'll use morgan, yarn add morgan.
Adarsh:server adarshmaurya$ yarn add morgan
yarn add v1.12.3
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
[4/4] 📃 Building fresh packages...
success Saved lockfile.
success Saved 3 new dependencies.
info Direct dependencies
└─ morgan@1.9.1
info All dependencies
├─ basic-auth@2.0.1
├─ morgan@1.9.1
└─ on-headers@1.0.1
✨ Done in 0.94s.
Adarsh:server adarshmaurya$ Last, but maybe not least, we want to use nodemon to listen for changes and restart our sever, so yarn add nodemon.
Adarsh:server adarshmaurya$ yarn add nodemon
yarn add v1.12.3
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
[4/4] 📃 Building fresh packages...
success Saved lockfile.
success Saved 149 new dependencies.
info Direct dependencies
└─ nodemon@1.18.9
info All dependencies
├─ abbrev@1.1.1
├─ ansi-align@2.0.0
├─ ansi-regex@2.1.1
├─ anymatch@2.0.0
├─ aproba@1.2.0
├─ are-we-there-yet@1.1.5
├─ arr-flatten@1.1.0
├─ assign-symbols@1.0.0
├─ async-each@1.0.1
├─ atob@2.1.2
├─ base@0.11.2
├─ binary-extensions@1.12.0
├─ boxen@1.3.0
├─ braces@2.3.2
├─ cache-base@1.0.1
├─ camelcase@4.1.0
├─ capture-stack-trace@1.0.1
├─ chokidar@2.0.4
├─ chownr@1.1.1
├─ ci-info@1.6.0
├─ class-utils@0.3.6
├─ cli-boxes@1.0.0
├─ code-point-at@1.1.0
├─ collection-visit@1.0.0
├─ configstore@3.1.2
├─ console-control-strings@1.1.0
├─ copy-descriptor@0.1.1
├─ core-util-is@1.0.2
├─ create-error-class@3.0.2
├─ crypto-random-string@1.0.0
├─ decode-uri-component@0.2.0
├─ deep-extend@0.6.0
├─ delegates@1.0.0
├─ detect-libc@1.0.3
├─ dot-prop@4.2.0
├─ duplexer3@0.1.4
├─ execa@0.7.0
├─ expand-brackets@2.1.4
├─ extglob@2.0.4
├─ fill-range@4.0.0
├─ for-in@1.0.2
├─ fs-minipass@1.2.5
├─ fsevents@1.2.4
├─ gauge@2.7.4
├─ get-value@2.0.6
├─ glob-parent@3.1.0
├─ global-dirs@0.1.1
├─ got@6.7.1
├─ has-unicode@2.0.1
├─ has-value@1.0.0
├─ has-values@1.0.0
├─ ignore-by-default@1.0.1
├─ ignore-walk@3.0.1
├─ import-lazy@2.1.0
├─ ini@1.3.5
├─ is-accessor-descriptor@1.0.0
├─ is-binary-path@1.0.1
├─ is-ci@1.2.1
├─ is-data-descriptor@1.0.0
├─ is-descriptor@1.0.2
├─ is-extglob@2.1.1
├─ is-glob@4.0.0
├─ is-installed-globally@0.1.0
├─ is-npm@1.0.0
├─ is-obj@1.0.1
├─ is-path-inside@1.0.1
├─ is-plain-object@2.0.4
├─ is-redirect@1.0.0
├─ is-retry-allowed@1.1.0
├─ is-stream@1.1.0
├─ is-windows@1.0.2
├─ isarray@1.0.0
├─ kind-of@3.2.2
├─ latest-version@3.1.0
├─ lodash.debounce@4.0.8
├─ lowercase-keys@1.0.1
├─ lru-cache@4.1.5
├─ make-dir@1.3.0
├─ map-visit@1.0.0
├─ micromatch@3.1.10
├─ minizlib@1.2.1
├─ mixin-deep@1.3.1
├─ nan@2.12.1
├─ nanomatch@1.2.13
├─ needle@2.2.4
├─ node-pre-gyp@0.10.3
├─ nodemon@1.18.9
├─ nopt@1.0.10
├─ npm-bundled@1.0.5
├─ npm-packlist@1.1.12
├─ npm-run-path@2.0.2
├─ npmlog@4.1.2
├─ number-is-nan@1.0.1
├─ object-copy@0.1.0
├─ os-homedir@1.0.2
├─ osenv@0.1.5
├─ p-finally@1.0.0
├─ package-json@4.0.1
├─ pascalcase@0.1.1
├─ path-dirname@1.0.2
├─ pify@3.0.0
├─ posix-character-classes@0.1.1
├─ prepend-http@1.0.4
├─ process-nextick-args@2.0.0
├─ pseudomap@1.0.2
├─ pstree.remy@1.1.6
├─ rc@1.2.8
├─ readable-stream@2.3.6
├─ readdirp@2.2.1
├─ registry-auth-token@3.3.2
├─ registry-url@3.1.0
├─ remove-trailing-separator@1.1.0
├─ repeat-element@1.1.3
├─ resolve-url@0.2.1
├─ ret@0.1.15
├─ sax@1.2.4
├─ semver-diff@2.1.0
├─ set-blocking@2.0.0
├─ set-value@2.0.0
├─ snapdragon-node@2.1.1
├─ snapdragon-util@3.0.1
├─ source-map-resolve@0.5.2
├─ source-map-url@0.4.0
├─ source-map@0.5.7
├─ split-string@3.1.0
├─ static-extend@0.1.2
├─ string_decoder@1.1.1
├─ strip-ansi@3.0.1
├─ strip-eof@1.0.0
├─ tar@4.4.8
├─ term-size@1.2.0
├─ timed-out@4.0.1
├─ to-regex-range@2.1.1
├─ touch@3.1.0
├─ undefsafe@2.0.2
├─ union-value@1.0.0
├─ unique-string@1.0.0
├─ unset-value@1.0.0
├─ unzip-response@2.0.1
├─ upath@1.1.0
├─ update-notifier@2.5.0
├─ urix@0.1.0
├─ url-parse-lax@1.0.0
├─ use@3.1.1
├─ util-deprecate@1.0.2
├─ wide-align@1.1.3
├─ widest-line@2.0.1
├─ write-file-atomic@2.3.0
└─ yallist@3.0.3
✨ Done in 17.92s.
Adarsh:server adarshmaurya$ Alright, that should take care of the core libraries and packages we need to get this server of project underway.
To open up Visual Studio Code, simply type in code . and press Enter. Now that we're in Visual Studio Code, let's start by adding the file that will be used to orchestrate and kick everything off, the app.js file. To save some time, I'll paste in partially completed code for this app.js file from the finished project we saw in the introduction module, and we'll discuss it.
const express = require('express')
const app = express()
const api = require('/api')
const morgan = require('morgan') // logger
const bodyParser = require('body-parser')
const cors = require('cors')
app.set('port', (porcess.env.PORT || 8081))
app.use(bodyParser.json)
app.use(bodyParser.urlencoded({ extended: false }))
app.use(cors())
app.use('/api', api)
app.use(express.static('static'))
app.use(morgan('dev'))At the top here, we're bringing in some of the core packages we installed earlier, express, morgan, bodyParser, and cors. This line is where we create a new instance of the Express application and assign that to the app constant variable. The next line is where the API routes are brought in, and we'll need to create that folder and set those routes up here shortly. Here is where we were telling our Express app which port to use, and if the port environment variable is not set, we're defaulting to port 8081. Next, we'll tell the Express app to use bodyParser and cors. We'll revisit this API line in a moment. On this line, we've set up morgan, the HTTP request logger middleware we've selected, to use the predefined format of dev. For more information on morgan and what options are available, see this URL.
...
app.use(function (req, res) {
const err = new Error('Not Found')
err.status = 404
res.json(err)
})If users of this API service land on an unknown route, it's nice to let them know and to return our useable error such as this, 404 Not Found. We're not quite ready to connect to MongoDB, and that's coming up soon. So for right now, we'll just have the Express app listen on the port configured above and report that out to the console. Before we run and test this out, let's first set up some more folders and configure the package.json file a little more.
The API routes will live in the api folder, so let's create that next. New Folder and name that api. Under this folder, let's set up a routes folder. Back out on the api folder, we'll create a new file and name that index.js. This file is what will be brought into the app.js file we looked at a moment ago and is used to organize all of the various routes that we'll be setting up. We'll need to bring in Express here, so const express = require express, and we'll also need the express router, const router = express.Router. For this demo project, we'll need three routes, one for the standup notes, another for the various projects the team members will be reporting work for, and the last one is a listing of those team members. Each of those routes will be set up in the routes folder. Let's stub those in now and come back to this index file in a moment. In the routes folder, create three new files, projects.js, standup.js, and team.js. In each of these new files, the module export will look like this, module.exports = function, where we're passing in the express.Router from the API index file we just looked at. With each of these route files, we will eventually be setting up the various GET, POST, and other endpoints needed for the application, and we will be pulling in and using Mongoose models, which we will develop in future modules in this course. For now, we'll just stub in a get route for each of these route files and revisit each in a later module where we will add in other routes as needed. Let's move back to the API index file now and finish that up. We need to now require each of the routes we just stubbed into the routes folder, and this is what that looks like. Notice that we're passing into each file's function the Express router as an argument. This allows us to pass the Express router into each route, adding in the needed GET, POST, and other routes, export that, and continue on down the road until we've completely set up all the necessary routes for the API service. Lastly, for this index file, we need to export the completed Express router. One last thing we need to do before we can test this, even though it will not do much of anything for us just yet, is to finish setting up the scripts section of the package.json file.
{
"name": "server-api",
"version": "1.0.0",
"description": "",
"main": "app.js",
"scripts": {
"start": "npm run lint & nodemon app.js",
"lint": "./node_modules/.bin/eslint **/*.js"
},
"author": "Adarsh Maurya",
"license": "MIT",
"dependencies": {
"body-parser": "^1.18.3",
"cors": "^2.8.5",
"eslint": "^5.10.0",
"express": "^4.16.4",
"mongoose": "^5.4.0",
"morgan": "^1.9.1",
"nodemon": "^1.18.9"
}
}
Let's add in a start script and run our linter, and then using nodemon, run the app.js file. The run lint script isn't set up yet, so that's next. Lint and ./node_modules/.bin/eslint, and we'll ask that ESLint look in any folder for js files. Now returning to the Command Prompt, we can test run this and see what we get. Yarn start.
Adarsh:server adarshmaurya$ yarn start
yarn run v1.12.3
$ npm run lint & nodemon app.js
npm WARN lifecycle The node binary used for scripts is /var/folders/1k/4f_ctp454rnb8_15b7_162rm0000gn/T/yarn--1545250057704-0.5158467843161743/node but npm is using /usr/local/Cellar/node/11.5.0/bin/node itself. Use the `--scripts-prepend-node-path` option to include the path for the node binary npm was executed with.
> server-api@1.0.0 lint /Users/adarshmaurya/Playground/mongodb-and-mogoose-for-node-getting-started/server
> eslint **/*.js
[nodemon] 1.18.9
[nodemon] to restart at any time, enter `rs`
[nodemon] watching: *.*
[nodemon] starting `node app.js`
API Server Listening on port 8081!
Oops! Something went wrong! :(
ESLint: 5.10.0.
No files matching the pattern "node_modules/ipaddr.js" were found.
Please check for typing mistakes in the pattern.
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! server-api@1.0.0 lint: `eslint **/*.js`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the server-api@1.0.0 lint script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/adarshmaurya/.npm/_logs/2018-12-19T20_07_38_228Z-debug.log
You may notice a number of linting errors or warnings. At this early stage of development where we have things stubbed in, it may make more sense to turn linting off for the time being. That's completely up to you. Should you care to, all you need to do is remove this section of the start script in the package.json file. And returning to the Command Prompt, yarn start again, and we're good. Ignorance is bliss, well, for the time being anyway.
In this demo, we'll get our client user interface project started using
- The Vue command-line interface tool. We'll also add in
- Vuetify, the material design framework for Vue.js, and the other libraries previously mentioned, such as
- Vuex and
- Axios.
One thing to keep in mind is that because the user interface and API server projects have been separated, there is no reason you couldn't use another UI framework such as React, or Angular, or whatever you like here. We will not be spending a lot of time with the UI side of things in this course anyway since that is not the focus.
Let's open up a terminal window and get things started with the client project now. To install the vue-cli, simply enter in yarn global add @vue/cli.
Adarsh:client adarshmaurya$ yarn global add @vue/cli
yarn global v1.12.3
[1/4] 🔍 Resolving packages...
warning @vue/cli > @vue/cli-shared-utils > joi > hoek@5.0.4: This version is no longer maintained. Please upgrade to the latest version.
warning @vue/cli > @vue/cli-ui > fkill > taskkill > execa > cross-spawn-async@2.2.5: cross-spawn no longer requires a build toolchain, use it instead
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
warning "@vue/cli > @vue/cli-ui > graphql-tag@2.10.0" has unmet peer dependency "graphql@^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0".
warning "@vue/cli > @vue/cli-ui > graphql-type-json@0.2.1" has unmet peer dependency "graphql@>=0.8.0".
[4/4] 📃 Building fresh packages...
success Installed "@vue/cli@3.2.1" with binaries:
- vue
✨ Done in 50.84s.
Adarsh:client adarshmaurya$ I already have this installed, so I'll cancel this. Feel free to use npm here as well, and that would look like this. To create a new Vue.js project using the vue-cli, simply enter in vue create and then the name of the project. Ours will be named client. Next, you will be presented with a few questions to answer.
Adarsh:client adarshmaurya$ vue create client
Vue CLI v3.2.1
? Please pick a preset: Manually select features
? Check the features needed for your project:
◉ Babel
◯ TypeScript
◯ Progressive Web App (PWA) Support
◉ Router
◉ Vuex
◯ CSS Pre-processors
❯◉ Linter / Formatter
◯ Unit Testing
◯ E2E TestingVue CLI v3.2.1
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, Linter
? Use history mode for router? (Requires proper server setup for index fallback
in production) Yes
? Pick a linter / formatter config: (Use arrow keys)
❯ ESLint with error prevention only
ESLint + Airbnb config
ESLint + Standard config
ESLint + Prettier Vue CLI v3.2.1
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, Linter
? Use history mode for router? (Requires proper server setup for index fallback
in production) Yes
? Pick a linter / formatter config: Basic
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i
> to invert selection)
❯◉ Lint on save
◯ Lint and fix on commitVue CLI v3.2.1
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, Linter
? Use history mode for router? (Requires proper server setup for index fallback
in production) Yes
? Pick a linter / formatter config: Basic
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i
> to invert selection)Lint on save
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arro
w keys)
❯ In dedicated config files
In package.json Vue CLI v3.2.1
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, Linter
? Use history mode for router? (Requires proper server setup for index fallback
in production) Yes
? Pick a linter / formatter config: Basic
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i
> to invert selection)Lint on save
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedica
ted config files
? Save this as a preset for future projects? (y/N) Yes
? Save preset as:
...Vue CLI v3.2.1
✨ Creating project in /Users/adarshmaurya/Playground/mongodb-and-mogoose-for-node-getting-started/client/client.
⚙ Installing CLI plugins. This might take a while...
yarn install v1.12.3
info No lockfile found.
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
success Saved lockfile.
✨ Done in 61.65s.
🚀 Invoking generators...
📦 Installing additional dependencies...
yarn install v1.12.3
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
[4/4] 📃 Building fresh packages...
success Saved lockfile.
✨ Done in 8.34s.
⚓ Running completion hooks...
📄 Generating README.md...
🎉 Successfully created project client.
👉 Get started with the following commands:
$ cd client
$ yarn serve
Adarsh:client adarshmaurya$ Rather than a preset selection, we'll manually select our features. Leave Babel selected, we will need the Vue Router and Vuex, and leave the Linter selected. For the Linter, select ESLint with error prevention only unless you prefer one of the other configurations. We'll just Lint on save and keep these configuration settings in dedicated config files. Once you get through those questions, the vue-cli is off and running, creating and stubbing in your new Vue.js web project. As it states here, this might take a while, so I will pause here for a moment and come back once this is done. The client project was successfully created.
📄 Generating README.md...
🎉 Successfully created project client.
👉 Get started with the following commands:
$ cd client
$ yarn serve
Adarsh:client adarshmaurya$ cd client/
Adarsh:client adarshmaurya$ yarn serve
yarn run v1.12.3
$ vue-cli-service serve
INFO Starting development server...
98% after emitting CopyPlugin .
DONE Compiled successfully in 3475ms 2:04:35 AM
App running at:
- Local: http://localhost:8080/
- Network: http://192.168.0.6:8080/
Note that the development build is not optimized.
To create a production build, run yarn build.
And as it shows here, we can test run this now by moving over to the client folder and running that using yarn serve. The first time you run this, you'll notice that it takes a moment or two as webpack is building and bundling up the various modules installed with the vue-cli create process. Now that that is done, we can open up a browser and open localhost port 8080. Not much to look at yet, but hey, it works, and now we have a foundation to build our client demo application upon.
Let's head back over to the terminal window, and also using the vue-cli, get Vuetify installed, vue add vuetify.
Adarsh:client adarshmaurya$ vue add vuetify
📦 Installing vue-cli-plugin-vuetify...
yarn add v1.12.3
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
[4/4] 📃 Building fresh packages...
success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ vue-cli-plugin-vuetify@0.4.6
info All dependencies
└─ vue-cli-plugin-vuetify@0.4.6
✨ Done in 4.06s.
✔ Successfully installed plugin: vue-cli-plugin-vuetify
? Choose a preset: (Use arrow keys)
❯ Default (recommended)
Prototype (rapid development)
Configure (advanced)
? Choose a preset: Default (recommended)
🚀 Invoking generator for vue-cli-plugin-vuetify...
📦 Installing additional dependencies...
yarn install v1.12.3
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
[4/4] 📃 Building fresh packages...
success Saved lockfile.
✨ Done in 8.54s.
⚓ Running completion hooks...
✔ Successfully invoked generator for plugin: vue-cli-plugin-vuetify
The following files have been updated / added:
.browserslistrc
.eslintrc.js
.gitignore
README.md
babel.config.js
package.json
postcss.config.js
public/favicon.ico
public/index.html
src/App.vue
src/assets/logo.png
src/assets/logo.svg
src/components/HelloWorld.vue
src/main.js
src/plugins/vuetify.js
src/router.js
src/store.js
src/views/About.vue
src/views/Home.vue
yarn.lock
You should review these changes with git diff and commit them.
Adarsh:client adarshmaurya$
Once completed, you'll notice a number of files that were generated for you. But to help us out even further, we're going to be using a predefined layout as a template to build our demo application upon. To see where that is obtained from, let's go back to the browser, open up a new tab, and go to this URL. Vuetify has a handful of layouts that you can use to jumpstart your own projects with. The one-off selector for this application is the baseline layout, which among other things, provides us with a left navigation menu that expands and collapses as needed. The source code for this layout can be found here. Clicking on this link pulls up the associated GitHub repository. For this client project, all of this code was copied over and modified for this project's specific needs. We will not be doing that development work together in this course since, again, the focus is on Mongoose, but that code has been made available to you at this repo.
Moving back to the terminal. As mentioned earlier, since we're using Vuetify, which is a material design framework, it would be helpful to have the material design icons available to us as well. That package can be added by entering yarn add material-design-icons-iconfont.
Adarsh:client adarshmaurya$ yarn add material-design-icons-iconfont
yarn add v1.12.3
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
warning "@vue/cli-plugin-babel > babel-loader@8.0.4" has unmet peer dependency "webpack@>=2".
warning "@vue/cli-plugin-eslint > eslint-loader@2.1.1" has unmet peer dependency "webpack@>=2.0.0 <5.0.0".
warning " > vuetify-loader@1.0.8" has unmet peer dependency "webpack@^4.0.0".
[4/4] 📃 Building fresh packages...
success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ material-design-icons-iconfont@4.0.3
info All dependencies
└─ material-design-icons-iconfont@4.0.3
✨ Done in 4.36s.
Adarsh:client adarshmaurya$ We won't need this for a while, but we will need Axios later when communicating with the API, so let's get that added now too.
Adarsh:client adarshmaurya$ yarn add axios
yarn add v1.12.3
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
warning "@vue/cli-plugin-babel > babel-loader@8.0.4" has unmet peer dependency "webpack@>=2".
warning "@vue/cli-plugin-eslint > eslint-loader@2.1.1" has unmet peer dependency "webpack@>=2.0.0 <5.0.0".
warning " > vuetify-loader@1.0.8" has unmet peer dependency "webpack@^4.0.0".
[4/4] 📃 Building fresh packages...
success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ axios@0.18.0
info All dependencies
└─ axios@0.18.0
✨ Done in 3.42s.
Adarsh:client adarshmaurya$
That should leave us with a pretty good foundation to build the client project upon.