lib.markbridges.vueapp
Tag 0
No description field found in package.json
  Published by markbridges on Jul 29th 2017, 6:07 PM
  # Your StdLib Vue App Welcome to your StdLib Vue template! The Vue template is designed to make creating and running Vue.js single page apps (SPAs) easy. The advantages of using StdLib here are the same for any other StdLib service: built in scalability without managing infrastructure. ## Local Development From your service's main directory, run `lib http` to start a temporary HTTP server. You can then open `http://localhost:8170/<username>/<appname>` and see a sample app ready to go! Source files are automatically compiled when you boot up the server, and are recompiled upon changes you make to them. ## Deployment Deployment works the same way as other StdLib services. Running `lib up dev` will deploy your service to a dev environment, which you can access at: ``` <username>.stdlib.com/<service name>@dev ``` Running `lib release` (once you're ready) will create an immutable version of the service at: ``` <username>.stdlib.com/<service name> ``` The endpoint will appear in the StdLib registry unless `publish: false` is set in your app's _package.json_ file. If you would like to tear down a release of your app, run the following command from your app directory: ``` // Development environments lib down dev // Release environments lib down -r <version> ``` ## App Structure StdLib creates several directories when using the vue template. Unlike other services you may have created, you'll be leaving the _functions_ directory alone during development -- the functions inside are preconfigured to handle your SPA. Instead, you'll be working in the _app_ directory. This directory contains a folder for static assets and a folder called _vue_ that will contain the logic and styling for your SPA. **Important note:** When referencing a static file from a template, you must reference it via the url `static/<path>`. This will access files that you add to the _app/static_ directory of your project. The sample app generated by the template has examples of this. StdLib sets up a single-file component structure set up by default, but you are free to structure your app however you'd like. We also preconfigure Sass for styling and the Vue router for navigation to make development easier. Router configuration for different pages of your app should be configured in the _router.js_ file. See the generated file for examples. ## Environment Variables Environment variables specified in the _env.json_ file can be referenced from your app code by using the global _env_ variable. For example, if your _env.json_ file looks like this: ``` { "local": { "key": "local_development_key" }, "dev": { "key": "development_key" }, "release": { "key": "production_key" } } ``` You could reference _key_ as `env.key` in your Javascript. If you want to access an environment variable in a Vue component template, you'll have to add the _env_ object to your component's model like this: ``` <style lang="sass"> // Styling goes here </style> <template> <div class="team-members-cell"> Here's the value of env.key: {{ env.key }} </div> </template> <script> export default { data() { return { env: env }; } } </script> ``` **Important reminder:** Environment variables you set will be visible to anyone accessing your SPA (it's front end code after all!) so make sure you don't store any sensitive or secret information as environment variables ## The Compilation Process StdLib automatically sets up Babel and Webpack to compile your app by generating a _webpack.config.js_ file and a _.babelrc_ file. A development build runs whenever you run an HTTP server with `lib http`, and a minified production build runs when you deploy an app with `lib up`. The compilation output goes to another folder called _static_ in the service directory. # Further Reading * [Vue Documentation](https://vuejs.org/v2/guide/) * [Vue Router Documentation](https://router.vuejs.org/en/) * [Sass Documentation](http://sass-lang.com/guide) * [Webpack Documentation](https://webpack.github.io/) * [Babel Documentation](https://babeljs.io/docs/setup/) # Acknowledgements We would like to thank Evan You for creating a wonderful product in Vue. He has built Vue largely by himself, and relies on donations. Check out his Patreon [here](https://www.patreon.com/evanyou).
# Your StdLib Vue App Welcome to your StdLib Vue template! The Vue template is designed to make creating and running Vue.js single page apps (SPAs) easy. The advantages of using StdLib here are the same for any other StdLib service: built in scalability without managing infrastructure. ## Local Development From your service's main directory, run `lib http` to start a temporary HTTP server. You can then open `http://localhost:8170/<username>/<appname>` and see a sample app ready to go! Source files are automatically compiled when you boot up the server, and are recompiled upon changes you make to them. ## Deployment Deployment works the same way as other StdLib services. Running `lib up dev` will deploy your service to a dev environment, which you can access at: ``` <username>.stdlib.com/<service name>@dev ``` Running `lib release` (once you're ready) will create an immutable version of the service at: ``` <username>.stdlib.com/<service name> ``` The endpoint will appear in the StdLib registry unless `publish: false` is set in your app's _package.json_ file. If you would like to tear down a release of your app, run the following command from your app directory: ``` // Development environments lib down dev // Release environments lib down -r <version> ``` ## App Structure StdLib creates several directories when using the vue template. Unlike other services you may have created, you'll be leaving the _functions_ directory alone during development -- the functions inside are preconfigured to handle your SPA. Instead, you'll be working in the _app_ directory. This directory contains a folder for static assets and a folder called _vue_ that will contain the logic and styling for your SPA. **Important note:** When referencing a static file from a template, you must reference it via the url `static/<path>`. This will access files that you add to the _app/static_ directory of your project. The sample app generated by the template has examples of this. StdLib sets up a single-file component structure set up by default, but you are free to structure your app however you'd like. We also preconfigure Sass for styling and the Vue router for navigation to make development easier. Router configuration for different pages of your app should be configured in the _router.js_ file. See the generated file for examples. ## Environment Variables Environment variables specified in the _env.json_ file can be referenced from your app code by using the global _env_ variable. For example, if your _env.json_ file looks like this: ``` { "local": { "key": "local_development_key" }, "dev": { "key": "development_key" }, "release": { "key": "production_key" } } ``` You could reference _key_ as `env.key` in your Javascript. If you want to access an environment variable in a Vue component template, you'll have to add the _env_ object to your component's model like this: ``` <style lang="sass"> // Styling goes here </style> <template> <div class="team-members-cell"> Here's the value of env.key: {{ env.key }} </div> </template> <script> export default { data() { return { env: env }; } } </script> ``` **Important reminder:** Environment variables you set will be visible to anyone accessing your SPA (it's front end code after all!) so make sure you don't store any sensitive or secret information as environment variables ## The Compilation Process StdLib automatically sets up Babel and Webpack to compile your app by generating a _webpack.config.js_ file and a _.babelrc_ file. A development build runs whenever you run an HTTP server with `lib http`, and a minified production build runs when you deploy an app with `lib up`. The compilation output goes to another folder called _static_ in the service directory. # Further Reading * [Vue Documentation](https://vuejs.org/v2/guide/) * [Vue Router Documentation](https://router.vuejs.org/en/) * [Sass Documentation](http://sass-lang.com/guide) * [Webpack Documentation](https://webpack.github.io/) * [Babel Documentation](https://babeljs.io/docs/setup/) # Acknowledgements We would like to thank Evan You for creating a wonderful product in Vue. He has built Vue largely by himself, and relies on donations. Check out his Patreon [here](https://www.patreon.com/evanyou).
Serves index.html for dashboard.
  info
context
enabled
bg
info
pricing
free
rate limits
  parameters
(no parameters expected)
  code
Endpoint that serves static files.
  info
context
enabled
bg
info
pricing
free
rate limits
  parameters
(no parameters expected)
  code