This project is a boilerplate for using the rewyre package alongside the Vue framework, and uses the latest Vue 3 preview release. This project is solely built with TypeScript in both Node and Vue. The project comes packed with NPM commands to manage your workflow and offers a single domain/port for both development and production.
The project is built using the standard Vue CLI and offers both HMR and dev mode for inspection using the Vue devtools extension. See the commands section for available commands, and also comes with nodemon for automatic reload of the node application on file change.
This project uses HPM (http-proxy-middleware) to proxy the vue dev server through the node application, this means that the API is available under the same host and port, this does mean if you create an API that uses a simple / route then you may overwrite what you need. We suggest prefixing all controllers with /api/<controller> instead. Then you can access the API from the Vue app as: fetch('/api/test/foo').
By default the folder structure has two main folders, app and src, the src folder contains all rewyre and node specific code, and the app folder contains the built Vue project from the CLI.
The main commands are as follows, there are more commands specific to each app, but we suggest not touching them.
Build Project
The below will build both the Vue application and the rewyre application.
npm run build
Start Project
The command will start the project, using the built files from the above, the vue dev server does not run.
npm run start
Start Development Server
The below command will start the Vue development server, alongside starting the rewyre app under nodemon for automatic restart, please note this project uses ts-node in development.
npm run dev
Clean Distribution Folders
The below will clean the dist folders for both Vue and rewyre.
npm run clean
Lint Rewyre
The below will lint the rewyre project only.
npm run api:lint
Install Dependencies
Due to their being two separate NPM projects in one, you can use the following to install the dependencies for both the Vue3 and rewyre project.
npm run npm:install
Base Sync
This repository is defined as base, if I push updates to here, you can use the following command to get the latest changes and merge them in.
npm run npm:base:sync
If you want to make some changes then please, feel free, but please note that when it comes to examples, this is supposed to be an extremely simple example of the rewyre and vue framework working together so adding too many examples and lots of other third party dependencies will most likely be rejected unless it does improve the flow significantly.