azure-samples / vue-cosmosdb

Cosmos DB, Express.js, Vue, and Node.js app

languages	page_type	products	description
javascript nodejs	sample	azure azure-cosmos-db	A Cosmos DB, Express.js, Vue, and Node.js app.

vue-cosmosdb

A Cosmos DB, Express.js, Vue, and Node.js app

Please see the connect2017 branch to see the sample use in the Connect 2017 video (link coming soon)

Features

This project framework provides the following features:

• Vue.js
• Node.js
• Express
• Mongoose API
• Connecting to MongoDB or CosmosDB
• Building, Debugging, Deploying with Docker

Getting Started

Prerequisites

Node.js with npm

Installation

git clone https://github.com/Azure-Samples/vue-cosmosdb.git
cd vue-cosmosdb
npm install

Database settings

• Configure Cosmos DB server settings

  Rename the .env.example.js file to .env in the root folder and update it with your Cosmos DB settings. Replace the accountName, databaseName, key, and port with your specific configuration.

  SERVER_PORT=3001
  PUBLICWEB=./server/www
  COSMOSDB_ACCOUNT=your_cosmos_account
  COSMOSDB_DB=your_cosmos_db
  COSMOSDB_KEY=your_cosmos_key
  COSMOSDB_PORT=10255

Quickstart

This will build the app and run the dev server for Vue and WebPack. The Node express server will launch and WebPack will proxy the calls from the browser to the API in express. It will also prepare it for local debugging.

# build for production with minification
npm run build

# serve on http://localhost:8080
# and run the api on http://localhost:3001
npm run debug

Local Prod Build

This will build the app and launch via the Node.js express server.

# build for production with minification
npm run build

# run the node server
npm start

Docker

Build the image and run container.

npm run docker-up

Build the image and run container for local debugging.

npm run docker-up-debug

vue-cosmosdb's Issues

The build configuration for Azure is not correct

Please provide us with the following information:

This issue is for a: (mark with an x)

- [ ] bug report -> please search issues before submitting
- [ ] feature request
- [x ] documentation issue or request
- [ ] regression (a behavior that used to work and stopped in a new release)

Minimal steps to reproduce

I have attempted to run this on Azure, and it doesn't quite work

Any log messages given by the failure

when I successfully push the project to Azure using git, this is the only error message:

remote: Invalid start-up command "concurrently "node -r dotenv/config index.js" "npm run dev-proxy"" in package.json. Please use the format "node <script relative path>".

Expected/desired behavior

I shouldn't have to comment out the server/www files in .gitignore It should probably be building on Azure, but doesn't. It would be helpful if the example actually had good practices on how to get a project to actually run on Azure.

OS and Version?

Windows 7, 8 or 10. Linux (which distribution). macOS (Yosemite? El Capitan? Sierra?)

It runs fine locally under windows 10, just not on the Azure server

Versions

Current version in GIT

Mention any other details that might be useful

I have all the files copied up but it doesn't seem to read from either .env or a copy of .env to process.env
which I created based on what I read in the scripts.

The code is running but not properly at: https://geewhizbang.azurewebsites.net/

---

Thanks! We'll be in touch soon.

This example is BROKEN - please archive

Problem

Project dependencies are incredibly outdated. npm install does not even work. A binary is missing.

/cc @dend @bnb - let's remove outdated examples please :)

See log below.

Steps to Reproduce

1. git clone
2. npm install and 🤦‍♂️

Possible mitigation

1. Delete package-lock.json
2. Run npm update

But vulnerabilities etc, remain:

added 74 packages from 110 contributors, removed 1 package and audited 11100 packages in 11.072s
found 477 vulnerabilities (156 low, 5 moderate, 316 high)
  run `npm audit fix` to fix them, or `npm audit` for details

Failed Install Logs

vue-cosmosdb master via ⬢ v10.12.0 on 🐳 v19.03.1 took 20s
❯ npm i

> [email protected] install /Users/julieng/Projects/microsoft/vue-cosmosdb/node_modules/node-sass
> node scripts/install.js

Downloading binary from https://github.com/sass/node-sass/releases/download/v4.7.2/darwin-x64-64_binding.node
Cannot download "https://github.com/sass/node-sass/releases/download/v4.7.2/darwin-x64-64_binding.node":

HTTP error 404 Not Found

Hint: If github.com is not accessible in your location
      try setting a proxy via HTTP_PROXY, e.g.

      export HTTP_PROXY=http://example.com:1234

or configure npm proxy via

      npm config set proxy http://example.com:8080

> [email protected] postinstall /Users/julieng/Projects/microsoft/vue-cosmosdb/node_modules/node-sass
> node scripts/build.js

Building: /usr/local/Cellar/node/10.12.0/bin/node /Users/julieng/Projects/microsoft/vue-cosmosdb/node_modules/node-gyp/bin/node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=
gyp info it worked if it ends with ok
gyp verb cli [ '/usr/local/Cellar/node/10.12.0/bin/node',
gyp verb cli   '/Users/julieng/Projects/microsoft/vue-cosmosdb/node_modules/node-gyp/bin/node-gyp.js',
gyp verb cli   'rebuild',
gyp verb cli   '--verbose',
gyp verb cli   '--libsass_ext=',
gyp verb cli   '--libsass_cflags=',
gyp verb cli   '--libsass_ldflags=',
gyp verb cli   '--libsass_library=' ]
gyp info using [email protected]
gyp info using [email protected] | darwin | x64
gyp verb command rebuild []
gyp verb command clean []
gyp verb clean removing "build" directory
gyp verb command configure []
gyp verb check python checking for Python executable "python2" in the PATH
gyp verb `which` succeeded python2 /usr/local/bin/python2
gyp verb check python version `/usr/local/bin/python2 -c "import platform; print(platform.python_version());"` returned: "2.7.15\n"
gyp verb get node dir no --target version specified, falling back to host node version: 10.12.0
gyp verb command install [ '10.12.0' ]
gyp verb install input version string "10.12.0"
gyp verb install installing version: 10.12.0
gyp verb install --ensure was passed, so won't reinstall if already installed
gyp verb install version is already installed, need to check "installVersion"
gyp verb got "installVersion" 9
gyp verb needs "installVersion" 9
gyp verb install version is good
gyp verb get node dir target node version installed: 10.12.0
gyp verb build dir attempting to create "build" dir: /Users/julieng/Projects/microsoft/vue-cosmosdb/node_modules/node-sass/build
gyp verb build dir "build" dir needed to be created? /Users/julieng/Projects/microsoft/vue-cosmosdb/node_modules/node-sass/build
gyp verb build/config.gypi creating config file
gyp verb build/config.gypi writing out config file: /Users/julieng/Projects/microsoft/vue-cosmosdb/node_modules/node-sass/build/config.gypi
gyp verb config.gypi checking for gypi file: /Users/julieng/Projects/microsoft/vue-cosmosdb/node_modules/node-sass/config.gypi
gyp verb common.gypi checking for gypi file: /Users/julieng/Projects/microsoft/vue-cosmosdb/node_modules/node-sass/common.gypi
gyp verb gyp gyp format was not specified; forcing "make"
gyp info spawn /usr/local/bin/python2
gyp info spawn args [ '/Users/julieng/Projects/microsoft/vue-cosmosdb/node_modules/node-gyp/gyp/gyp_main.py',
gyp info spawn args   'binding.gyp',
gyp info spawn args   '-f',
gyp info spawn args   'make',
gyp info spawn args   '-I',
gyp info spawn args   '/Users/julieng/Projects/microsoft/vue-cosmosdb/node_modules/node-sass/build/config.gypi',
gyp info spawn args   '-I',
gyp info spawn args   '/Users/julieng/Projects/microsoft/vue-cosmosdb/node_modules/node-gyp/addon.gypi',
gyp info spawn args   '-I',
gyp info spawn args   '/Users/julieng/.node-gyp/10.12.0/include/node/common.gypi',
gyp info spawn args   '-Dlibrary=shared_library',
gyp info spawn args   '-Dvisibility=default',
gyp info spawn args   '-Dnode_root_dir=/Users/julieng/.node-gyp/10.12.0',
gyp info spawn args   '-Dnode_gyp_dir=/Users/julieng/Projects/microsoft/vue-cosmosdb/node_modules/node-gyp',
gyp info spawn args   '-Dnode_lib_file=/Users/julieng/.node-gyp/10.12.0/<(target_arch)/node.lib',
gyp info spawn args   '-Dmodule_root_dir=/Users/julieng/Projects/microsoft/vue-cosmosdb/node_modules/node-sass',
gyp info spawn args   '-Dnode_engine=v8',
gyp info spawn args   '--depth=.',
gyp info spawn args   '--no-parallel',
gyp info spawn args   '--generator-output',
gyp info spawn args   'build',
gyp info spawn args   '-Goutput_dir=.' ]
xcode-select: error: tool 'xcodebuild' requires Xcode, but active developer directory '/Library/Developer/CommandLineTools' is a command line tools instance

xcode-select: error: tool 'xcodebuild' requires Xcode, but active developer directory '/Library/Developer/CommandLineTools' is a command line tools instance

Traceback (most recent call last):
  File "/Users/julieng/Projects/microsoft/vue-cosmosdb/node_modules/node-gyp/gyp/gyp_main.py", line 16, in <module>
    sys.exit(gyp.script_main())
  File "/Users/julieng/Projects/microsoft/vue-cosmosdb/node_modules/node-gyp/gyp/pylib/gyp/__init__.py", line 545, in script_main
    return main(sys.argv[1:])
  File "/Users/julieng/Projects/microsoft/vue-cosmosdb/node_modules/node-gyp/gyp/pylib/gyp/__init__.py", line 538, in main
    return gyp_main(args)
  File "/Users/julieng/Projects/microsoft/vue-cosmosdb/node_modules/node-gyp/gyp/pylib/gyp/__init__.py", line 523, in gyp_main
    generator.GenerateOutput(flat_list, targets, data, params)
  File "/Users/julieng/Projects/microsoft/vue-cosmosdb/node_modules/node-gyp/gyp/pylib/gyp/generator/make.py", line 2170, in GenerateOutput
    part_of_all=qualified_target in needed_targets)
  File "/Users/julieng/Projects/microsoft/vue-cosmosdb/node_modules/node-gyp/gyp/pylib/gyp/generator/make.py", line 795, in Write
    self.Pchify))
  File "/Users/julieng/Projects/microsoft/vue-cosmosdb/node_modules/node-gyp/gyp/pylib/gyp/generator/make.py", line 1190, in WriteSources
    cflags = self.xcode_settings.GetCflags(configname)
  File "/Users/julieng/Projects/microsoft/vue-cosmosdb/node_modules/node-gyp/gyp/pylib/gyp/xcode_emulation.py", line 551, in GetCflags
    archs = self.GetActiveArchs(self.configname)
  File "/Users/julieng/Projects/microsoft/vue-cosmosdb/node_modules/node-gyp/gyp/pylib/gyp/xcode_emulation.py", line 420, in GetActiveArchs
    xcode_archs_default = GetXcodeArchsDefault()
  File "/Users/julieng/Projects/microsoft/vue-cosmosdb/node_modules/node-gyp/gyp/pylib/gyp/xcode_emulation.py", line 118, in GetXcodeArchsDefault
    xcode_version, _ = XcodeVersion()
  File "/Users/julieng/Projects/microsoft/vue-cosmosdb/node_modules/node-gyp/gyp/pylib/gyp/xcode_emulation.py", line 1265, in XcodeVersion
    version = re.match(r'(\d\.\d\.?\d*)', version).groups()[0]
AttributeError: 'NoneType' object has no attribute 'groups'
gyp ERR! configure error
gyp ERR! stack Error: `gyp` failed with exit code: 1
gyp ERR! stack     at ChildProcess.onCpExit (/Users/julieng/Projects/microsoft/vue-cosmosdb/node_modules/node-gyp/lib/configure.js:336:16)
gyp ERR! stack     at ChildProcess.emit (events.js:182:13)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:240:12)
gyp ERR! System Darwin 18.6.0
gyp ERR! command "/usr/local/Cellar/node/10.12.0/bin/node" "/Users/julieng/Projects/microsoft/vue-cosmosdb/node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
gyp ERR! cwd /Users/julieng/Projects/microsoft/vue-cosmosdb/node_modules/node-sass
gyp ERR! node -v v10.12.0
gyp ERR! node-gyp -v v3.6.2
gyp ERR! not ok
Build failed with error code: 1
npm WARN [email protected] No repository field.

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] postinstall: `node scripts/build.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] postinstall 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/julieng/.npm/_logs/2019-08-05T17_29_12_565Z-debug.log

Link to article/video?

Please provide us with the following information:

This issue is for a: (mark with an x)

- [ ] bug report -> please search issues before submitting
- [ ] feature request
- [x] documentation issue or request
- [ ] regression (a behavior that used to work and stopped in a new release)

Minimal steps to reproduce

n/a

Any log messages given by the failure

n/a

Expected/desired behavior

Would be great for this to link to an article/video describing the project and steps taken.

OS and Version?

Windows 7, 8 or 10. Linux (which distribution). macOS (Yosemite? El Capitan? Sierra?)

Versions

Mention any other details that might be useful

Would be great for this to link to an article/video describing the project and steps taken.

---

Thanks! We'll be in touch soon.

How to publish the App to Azure App Service ?

How to publish the App to Azure App Service ? I guess no need put all to Azure App Service, right ?

Error when npm run dev-proxy

Branch connect2017

[email protected] dev-proxy /Users/arielzhang/bitbucket/vue-cosmosdb-connect2017
concurrently "NODE_ENV=development SERVER_PORT=3001 npm start" "npm run dev"

[0]
[0] > [email protected] start /Users/arielzhang/bitbucket/vue-cosmosdb-connect2017
[0] > node index.js
[0]
[1]
[1] > [email protected] dev /Users/arielzhang/bitbucket/vue-cosmosdb-connect2017
[1] > cross-env NODE_ENV=development webpack-dev-server --open --hot
[1]
[0] module.js:472
[0] throw err;
[0] ^
[0]
[0] Error: Cannot find module './server/env/development'
[0] at Function.Module._resolveFilename (module.js:470:15)
[0] at Function.Module._load (module.js:418:25)
[0] at Module.require (module.js:498:17)
[0] at require (internal/module.js:20:19)
[0] at Object. (/Users/arielzhang/bitbucket/vue-cosmosdb-connect2017/index.js:5:13)
[0] at Module._compile (module.js:571:32)
[0] at Object.Module._extensions..js (module.js:580:10)
[0] at Module.load (module.js:488:32)
[0] at tryModuleLoad (module.js:447:12)
[0] at Function.Module._load (module.js:439:3)
[0]
[0] npm
[0] ERR! Darwin 16.7.0
[0] npm ERR! argv "/usr/local/Cellar/node/7.7.4/bin/node" "/usr/local/bin/npm" "start"
[0] npm ERR! node v7.7.4
[0] npm ERR! npm v4.1.2
[0] npm ERR! code
[0] ELIFECYCLE
[0] npm ERR! [email protected] start: node index.js
[0] npm
[0] ERR! Exit status 1
[0] npm ERR!
[0] npm ERR! Failed at the [email protected] start script 'node index.js'.
[0] npm ERR! Make sure you have the latest version of node.js and npm installed.
[0] npm ERR! If you do, this is most likely a problem with the vue-cosmosdb package,
[0] npm ERR! not with npm itself.
[0] npm ERR! Tell the author that this fails on your system:
[0] npm ERR!
[0] node index.js
[0] npm ERR! You can get information on how to open an issue for this project with:
[0] npm ERR! npm bugs vue-cosmosdb
[0] npm ERR! Or if that isn't available, you can get their info via:
[0] npm
[0] ERR! npm owner ls vue-cosmosdb
[0] npm ERR! There is likely additional logging output above.
[0]
[0] npm ERR! Please include the following file with any support request:
[0] npm ERR! /Users/arielzhang/bitbucket/vue-cosmosdb-connect2017/npm-debug.log
[0] NODE_ENV=development SERVER_PORT=3001 npm start exited with code 1
[1] Project is running at http://localhost:8081/
[1] webpack output is served from /server/www/
[1] 404s will fallback to /index.html
[1] [HPM] Error occurred while trying to proxy request /api/heroes from localhost:8081 to http://localhost:3001 (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors_common_system_errors)