Vue.js + Rails Starting Kit GitHub Template to develop Hybrid Mobile Application: https://vuejs-rails-starterkit.herokuapp.com
The Rails 6 + Vue.js 2 Starter Kit GitHub Template is a comprehensive toolkit for setting up a Rails project with Vue.js and various additional features. It includes support for Progressive Web Apps (PWA), Turbolinks, Webpacker, Bootstrap with AdminLTE theme, Vue.js unit testing with Jest, continuous integration, and more.
Step 1. Generate Ruby on Rails Project with Vue.js (No Turbolinks included on this stage)
# Command to generate Rails project with Vue.js
rails new my_project --webpack=vue
Step 2. Setup development environment
# Uncomment the following lines in bin/setup and bin/update
system('bin/yarn')
Step 3. Add sample page to host Vue.js component
# Generate controller and view
rails generate controller landing index
# Update app/views/landing/index.html.erb
<%= javascript_pack_tag 'hello_vue' %>
# Change app/javascript/packs/hello_vue.js to:
import Vue from 'vue/dist/vue.esm'
import App from '../app.vue'
document.addEventListener('DOMContentLoaded', () => {
const app = new Vue({
el: '#app',
render: h => h(App),
})
})
Step 4. Use Webpacker assets in the application
# Enable Webpacker with SplitChunks
// config/webpack/environment.js
const { environment } = require('@rails/webpacker')
// Add the following lines
environment.splitChunks()
module.exports = environment
Step 5. Install Jest for Component Unit Tests
# Add Jest with required dependencies
// package.json
"devDependencies": {
// ...
"@babel/preset-env": "^7.14.1",
"babel-jest": "^27.0.1",
"jest": "^27.0.1",
"vue-jest": "^3.0.6",
// ...
}
# Configure Jest in package.json (including the Coverage enabling)
// package.json
"jest": {
"preset": '@vue/cli-plugin-unit-jest',
"collectCoverage": true,
"collectCoverageFrom": [
"app/javascript/**/*.{js,vue}",
"!app/javascript/vendor/**/*"
]
}
# Add component test for App in test/javascript/app.test.js
import { shallowMount } from '@vue/test-utils'
import App from '../../app.vue'
test('renders correctly', () => {
const wrapper = shallowMount(App)
expect(wrapper.exists()).toBe(true)
})
Step 6. Setup Heroku and Deploy
# Configure and deploy to Heroku
heroku create my_project
git push heroku main
# Set up necessary addons for Heroku
heroku addons:create heroku-postgresql:hobby-dev
heroku plugins:install heroku-reviews
Step 7. Setup basic PWA
# Add a manifest and service worker for PWA
// app/views/layouts/application.html.erb
<head>
<%= javascript_pack_with_chunks_tag 'application' %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'serviceworker' %>
<%= stylesheet_pack_tag 'serviceworker' %>
<%= csrf_meta_tags %>
// ...
</head>
Step 8. Setup Turbolinks
# Install and enable Turbolinks
yarn add turbolinks
// app/javascript/application.js
import Turbolinks from 'turbolinks'
Turbolinks.start()
Step 9. Install UI Kit - AdminLTE
# Add AdminLTE Theme
yarn add admin-lte bootstrap@^4.6.0 css-loader
# Include adminlte in app/views/layouts/application.html.erb
<%= stylesheet_pack_tag 'adminlte' %>
Step 10. Configure continuous integration and other services for static code analysis
# Pre-setup for services like GitHub, CircleCI, Codecov
- GitHub: Create a new repository
- Heroku: Set up reviews apps
- CircleCI: Set up a project and add a config file (.circleci/config.yml)
- Codecov: Configure codecov.yml
The Rails 6 + Vue.js 2 Starter Kit GitHub Template is a versatile toolkit that makes it easy to set up a Ruby on Rails project with integrated Vue.js. It includes essential features such as PWA support, Turbolinks, Webpacker, and Bootstrap with AdminLTE theme. The kit also provides options for unit and system testing, continuous integration, and static code analysis through various services. With detailed installation instructions, developers can quickly get started with building robust web applications using this template.