Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/siegerts/plumber-vue
Project structure showing the use of an R-based Plumber API with a Vue frontend, using Vue CLI.
https://github.com/siegerts/plumber-vue
plumber-api r rest-api rstats rstudio rstudio-connect vuejs
Last synced: 3 months ago
JSON representation
Project structure showing the use of an R-based Plumber API with a Vue frontend, using Vue CLI.
- Host: GitHub
- URL: https://github.com/siegerts/plumber-vue
- Owner: siegerts
- License: mit
- Created: 2019-10-14T13:58:28.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2022-12-11T09:22:03.000Z (almost 2 years ago)
- Last Synced: 2024-05-31T21:03:50.227Z (5 months ago)
- Topics: plumber-api, r, rest-api, rstats, rstudio, rstudio-connect, vuejs
- Language: Vue
- Homepage:
- Size: 1.95 MB
- Stars: 9
- Watchers: 4
- Forks: 1
- Open Issues: 18
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- jimsghstars - siegerts/plumber-vue - Project structure showing the use of an R-based Plumber API with a Vue frontend, using Vue CLI. (Vue)
README
# plumber-vue
Project structure showing the use of an R-based [Plumber API](https://github.com/rstudio/plumber) with a [Vue](https://vuejs.org/) frontend, using Vue CLI.
## Project Structure
Creates a single-page application that operates on the same origin. For that reason, it isn't necessary to enable CORS on the specific routes if accessed from within the application.
This allows a development split between the analytical logic, served by the API, and the presentation logic and development workflow.
### Directory Structure
```
.
├── files/ # output js built here, served as Plumber static assets
├── js/
│ ├─ src/
│ ├─ components/
│ ├─ .env.local
│ └─ main.js
│
├─ entrypoint.R
└─ plumber.R
```
The static Vue assets can then be built into the `@assets` directory served by Plumber.
```r
# plumber.R
#* @assets ./files/static /
list()
```
Using the below structure in the `vue.config.js`:
```js
// vue.config.js
module.exports = {
publicPath:
process.env.NODE_ENV == "production" ? process.env.CONNECT_URL : "/",
outputDir: "../files/static",
devServer: {
proxy: process.env.PROXY_URL
}
};
```
The `env` variables are defined in a [`.env`](https://cli.vuejs.org/guide/mode-and-env.html#environment-variables) file in the `/js` root.
```ini
CONNECT_URL=
PROXY_URL=http://localhost:
```
## Frontend Application
The Vue application uses [axios](https://github.com/axios/axios) to make requests back to the API routes.
```js
// main.js
const HTTP = axios.create({
baseURL: process.env.NODE_ENV == "production" ? process.env.CONNECT_URL : ""
});
Vue.prototype.$axios = HTTP;
```
Every request using `this.$axios` within the VUe app will now use the `HTTP` custom instance.
## Development
After cloning the repo:
```bash
yarn install # or npm install
```
### Start the frontend application
Make sure that the Plumber application is also running at this time since the API, even in development mode is making requests against the API endpoints.
```bash
yarn serve
```
### Build the frontend assets into the Plumber project
```bash
yarn build
```