xxphenomxx / revel-vuecli3-starter

Golang Revel & Vue CLI3 Starter Kit

Welcome to Revel - Vue CLI 3 Starter Kit

Revel is a high-productivity web framework for the Go language.

Vue CLI is a full system for rapid Vue.js development VueCLI .

VueJS The Progressive JavaScript Framework VueJS .

This starter kit combines the backend power of the Revel framework and the Golang language with the dynamic Vue.JS frontend language. This best of both worlds allows you to build reactive single page applications using Revel/Golang as your backend.

This kit is complete with Vue CLI3 which gives you a powerful command line tool to aid in your frontend application development along with Webpack which handles all of your asset bundling, test running, minification, and transpiling.

Vue CLI 3 kit comes prebundled with the following:

• Vue.JS (2.5.17)
• Vue Router (3.0.1)
• Vuex (3.0.1)
• Babel (3.1.1)
• Typescript (3.1.1)
• SASS processing
• Chai (4.1.0) / Mocha (5.2.4) Testing

Required:

• Setup NodeJS/NPM
• Setup Golang
• Setup Revel Framework

Setup Instructions

1. Install NodeJS - Confirm 'npm' command works from command line
2. Install Golang and setup GOPATH/GOROOT per your environment
3. Install Revel framework and Revel command line tool
4. Clone Revel-VueCLI3-Starter to your GOPATH/src directory

To run Vue frontend development server (Open command prompt from project root)

cd public/vue-frontend
npm install
npm run serve

Go to http://localhost:8080 and you'll see:

To deploy Vue app to Revel (Open command prompt from project root)

cd public/vue-frontend
npm run build

The npm build process will handle all of the testing, transpiling, and bundling of your frontend assets. Once complete Webpack will move all of your assets into Revels /public/ folder along with moving your entry point index.html into Revel's View folder.

To run Revel server w/Vue app (Open command prompt from project root)

revel run -a revel-app

Go to http://localhost:9000 and you'll see:

Code Layout

The directory structure of a generated Revel application:

conf/             Configuration directory
    app.conf      Main app configuration file
    routes        Routes definition file

app/              App sources
    init.go       Interceptor registration
    controllers/  App controllers go here
    models/       Model / database schema definitions go here  
    views/Vue     Main template and entry point, generated when a 'npm run build' is run from the Vue CLI (public/vue-frontend)

messages/         Message files

public/           Public static assets
    css/          CSS files
    js/           Javascript files
    img/          Image files
    fonts/        Font files
    vue-frontend  Vue CLI 3 application

tests/            Test suites

Help

• The Getting Started with Revel.
• The Revel guides.
• The Revel sample apps.
• The API documentation.

revel-vuecli3-starter's Issues

Would you be so kind to deploy this little Vue.js example with Revel?

Hi Jassen,

I'm trying to understand how to use vue.js with revel. Your github's project, Revel-VueCLI3Starter, looks interesting, but I do not understand in Revel-VueCLI3-Starter/app/views/Vue/index.html:
these 2 lines:

<script src=/public/js/chunk-vendors.985c652d.js></script>
<script src=/public/js/app.7e064b8f.js></script>

Where do chunk-vendors.985c652d.js and app.7e064b8f.js come from? And how build these 2 important files up?

As complement to my previous questions, would you be so kind to deploy this little Vue.js example with Revel ? https://github.com/Pupinia/fullstackVue/tree/master/routing/shopping_cart
This would be of great help to understand how to to use Vue.js with Revel.

Thank you very much for your kind help.
Marco