{"id":13879511,"url":"https://github.com/jetthoughts/vuejs-rails-starterkit","last_synced_at":"2026-03-02T00:32:48.369Z","repository":{"id":28453379,"uuid":"118421995","full_name":"jetthoughts/vuejs-rails-starterkit","owner":"jetthoughts","description":"Vue.js + Rails Starting Kit GitHub Template to develop Hybrid Mobile Application: https://vuejs-rails-starterkit.herokuapp.com","archived":false,"fork":false,"pushed_at":"2023-01-19T11:16:15.000Z","size":2151,"stargazers_count":216,"open_issues_count":32,"forks_count":34,"subscribers_count":14,"default_branch":"master","last_synced_at":"2025-05-18T17:03:09.056Z","etag":null,"topics":["boilerplate-template","hackathon","heroku","nodejs","rails","rails-boilerplate","rails5","ruby","verify","vue"],"latest_commit_sha":null,"homepage":"https://jtway.co","language":"Ruby","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jetthoughts.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":["pftg"],"patreon":"pftg","custom":["https://www.jetthoughts.com","https://jtway.co"]}},"created_at":"2018-01-22T07:29:54.000Z","updated_at":"2025-01-25T22:43:37.000Z","dependencies_parsed_at":"2023-02-10T23:01:05.953Z","dependency_job_id":null,"html_url":"https://github.com/jetthoughts/vuejs-rails-starterkit","commit_stats":null,"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"purl":"pkg:github/jetthoughts/vuejs-rails-starterkit","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jetthoughts%2Fvuejs-rails-starterkit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jetthoughts%2Fvuejs-rails-starterkit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jetthoughts%2Fvuejs-rails-starterkit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jetthoughts%2Fvuejs-rails-starterkit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jetthoughts","download_url":"https://codeload.github.com/jetthoughts/vuejs-rails-starterkit/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jetthoughts%2Fvuejs-rails-starterkit/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29988047,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-01T22:42:38.399Z","status":"ssl_error","status_checked_at":"2026-03-01T22:41:51.863Z","response_time":124,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["boilerplate-template","hackathon","heroku","nodejs","rails","rails-boilerplate","rails5","ruby","verify","vue"],"created_at":"2024-08-06T08:02:23.414Z","updated_at":"2026-03-02T00:32:48.349Z","avatar_url":"https://github.com/jetthoughts.png","language":"Ruby","funding_links":["https://github.com/sponsors/pftg","https://patreon.com/pftg","https://www.jetthoughts.com","https://jtway.co"],"categories":["Starters/Boilerplates","Ruby"],"sub_categories":["Articles"],"readme":"# Rails 6 + Vue.js 2 Starter Kit GitHub Template.\n\n**NOTE:** For Rails 5.2, please check\nhttps://github.com/jetthoughts/vuejs-rails-starterkit/tree/rails-5-latest\n\n[![Deploy](https://www.herokucdn.com/deploy/button.svg)](https://heroku.com/deploy)\n![GitHub Actions Test](https://github.com/jetthoughts/vuejs-rails-starterkit/workflows/Test/badge.svg)\n[![CircleCI Test](https://circleci.com/gh/jetthoughts/vuejs-rails-starterkit.svg?style=svg)](https://circleci.com/gh/jetthoughts/vuejs-rails-starterkit)\n[![codecov](https://codecov.io/gh/jetthoughts/vuejs-rails-starterkit/branch/master/graph/badge.svg)](https://codecov.io/gh/jetthoughts/vuejs-rails-starterkit)\n\nA quick and easy way to setup Rails + PWA + Turbolinks + Webpacker + Bootstrap with AdminLTE theme + Vue + Jest.\nIf your team is considering or has already decided to use Vue, this is the right for you.\nAs an additional review of how to setup PWA, Turbolinks, CSS frameworks, Storybook.\n\n### Preview of all steps\n[![asciicast](https://asciinema.org/a/ArqvGrc6JK6pKzlRTMV3Jotwr.svg)](https://asciinema.org/a/ArqvGrc6JK6pKzlRTMV3Jotwr)\n\n### Expected Final Screen\n![image](https://user-images.githubusercontent.com/53345298/80085750-586bc080-8561-11ea-8c3b-dc1eab5b9200.png)\n\n## Table of Contents\n- [Step 1. Generate Ruby on Rails Project with Vue.js](#generate-ruby-on-rails-project-with-vuejs-no-turbolinks-included-on-this-stage)\n- [Step 2. Setup development environment](#setup-development-environment)\n- [Step 3. Add sample page to host Vue.js component](#add-sample-page-to-host-vuejs-component)\n- [Step 4. Use Webpacker assets in the application](#use-webpacker-assets-in-the-application)\n- [Step 5. Install Jest for Component Unit Tests](#install-jest-for-component-unit-tests)\n- [Step 6. Setup Heroku and Deploy](#setup-heroku-and-deploy)\n- [Step 7. Setup basic PWA](#setup-basic-pwa)\n- [Step 8. Setup Turbolinks](#setup-turbolinks)\n- [Step 9. Installs UI Kit - AdminLTE](#setup-adminlte)\n- [Step 10. Configure continuous integration and other services for static code\n  analysis](#configure-continuous-integration-and-other-services-for-static-code-analysis)\n\n\n#### Things you may want to cover:\n\n#### Features:\n\n* Optimized for peformance Webpacker with Vue.js: Lazy Load, Split Chunks\n* Turbolinks\n* PWA\n* Backend Unit and System Tests with coverage\n* Vue.js Unit Tests with coverage\n* Deployable to Heroku\n* Pre-setup for services:\n    - GitHub\n    - Heroku (Heroku Reviews Apps)\n    - CircleCI\n    - Codecov and Simplecov\n    - Dependabot\n* Static Code Analyzers:\n    - Pronto\n    - Rubocop\n    - ESLint\n    - EditorConfig\n\n\n#### Dependencies:\n\n* [Ruby on Rails](https://rubyonrails.org/) version 6\n* [Vue.js](https://vuejs.org) version 2 with [Vue Test Utils](https://vue-test-utils.vuejs.org/)\n* [Webpacker](https://github.com/rails/webpacker) 5 with [Webpack](https://webpack.js.org/) 4\n* [Bootstrap](https://getbootstrap.com/) 4 with [AdminLTE Template](https://adminlte.io/)\n* [Babel](https://babeljs.io/) 7\n\n#### System Dependencies:\n\n* [Ruby](https://www.ruby-lang.org/en/) 3.0\n* [Node.js](https://nodejs.org/en/) 14\n* [Yarn](https://yarnpkg.com/en/)\n* [PostgreSQL](https://www.postgresql.org/) 12\n* [Heroku CLI](https://devcenter.heroku.com/articles/heroku-cli)\n\n## Generate Ruby on Rails Project with Vue.js (No Turbolinks included on this stage)\n\n```bash\ngem install rails\n\nrails new vuejs-rails-starterkit --force --database=postgresql \\\n  --skip-action-mailer --skip-action-cable --skip-sprockets --skip-turbolinks \\\n  --webpack=vue\n\ncd ./vuejs-rails-starterkit\n\nbin/rails db:create db:migrate\n```\n\nThis generates Rails project with:\n\n - Vue component in `app/javascript/app.vue`\n - Example entry file `app/javascript/packs/hello_vue.js`\n\n### Setup development environment:\n\n1. Uncomment `system('bin/yarn')` in `bin/setup` and `bin/update` to\ninstall new node modules.\n\n2. Install dependencies:\n\n```bash\nbin/setup\n```\n3. Enable *content_security_policy* in the `config/initializers/content_security_policy.rb`\nwith the following configuration:\n\n```ruby\nRails.application.config.content_security_policy do |policy|\n  policy.script_src :self, :https\n\n  if Rails.env.development? || Rails.env.test?\n    policy.connect_src :self, :https, 'http://localhost:3035', 'ws://localhost:3035'\n  end\nend\n```\n4. Verify that we have not broken anything\n\n```bash\nbin/webpack\nbin/rails runner \"exit\"\n```\n\n### Add sample page to host Vue.js component\n\n1. Generate controller and view:\n\n```bash\nbin/rails generate controller Landing index --no-javascripts --no-stylesheets --no-helper --no-assets --no-fixture\n```\n\n2. Update `app/views/landing/index.html.erb` to:\n\n```erb\n\u003ch1\u003eLanding#index\u003c/h1\u003e\n\u003cp\u003eFind me in app/views/landing/index.html.erb\u003c/p\u003e\n\n\u003cdiv id='hello_vue_app'\u003e\u003c/div\u003e\n```\n\n3. Change `app/javascript/packs/hello_vue.js` to:\n\n```javascript\nimport Vue from 'vue'\nimport App from '../app.vue'\n\ndocument.addEventListener('DOMContentLoaded', () =\u003e {\n  const app = new Vue({\n    render: h =\u003e h(App),\n    el: '#hello_vue_app'\n  }).$mount()\n})\n```\n\n4. Setup a sample page as a home page by updating `config/routes.rb`:\n\n```ruby\n  root 'landing#index'\n```\n\n### Use Webpacker assets in the application\n\n1. Enable Webpacker with `SplitChunks`:\n\n   * Enable `SplitChunks` with default config by adding to `config/webpack/environment.js`:\n\n     ```js\n     environment.splitChunks()\n     ```\n\n   * Enable Webpacker by updating `app/views/layouts/application.html.erb`:\n\n     Change:\n\n     ```erb\n     \u003c%= stylesheet_link_tag 'application', media: 'all' %\u003e\n     \u003c%= javascript_pack_tag 'application' %\u003e\n     ```\n\n     to:\n\n     ```erb\n     \u003c%= stylesheet_packs_with_chunks_tag 'application', 'hello_vue', media: 'all' %\u003e\n     \u003c%= javascript_packs_with_chunks_tag 'application', 'hello_vue' %\u003e\n     ```\n\n2. Verify locally that vue.js is working and `SplitChunks` is enabled\n\n```bash\nbin/rails s\nopen \"http://localhost:3000/\"\n```\n\nExpect to see\n![](https://user-images.githubusercontent.com/8617866/79469404-ca478580-8008-11ea-8b1a-e74cdc906183.png)\n\nThe `javascript_packs_with_chunks_tag` and `stylesheet_packs_with_chunks_tag` helpers split assets\ninto small size chunks and create html tags for them:\n\n```html\n\u003cscript src=\"/packs/js/runtime~hello_vue-818eba5af0151079cb6c.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"/packs/js/1-7b962b4481d6abff6c2b.chunk.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"/packs/js/hello_vue-bc0218ac204eff3ff742.chunk.js\"\u003e\u003c/script\u003e\n```\n\n## Install Jest for Component Unit Tests\n\n1. Add Jest with required dependencies\n\n```bash\nyarn add --dev jest @vue/test-utils vue-jest babel-core@^7.0.0-bridge.0 babel-jest jest-serializer-vue\n```\n\n2. Configure Jest in `package.json` (including the Coverage enabling):\n\n```json\n  \"scripts\": {\n    \"test\": \"jest\"\n  },\n  \"jest\": {\n    \"verbose\": true,\n    \"testURL\": \"http://localhost/\",\n    \"roots\": [\n      \"test/javascript\"\n    ],\n    \"moduleDirectories\": [\n      \"node_modules\",\n      \"app/javascript\"\n    ],\n    \"moduleNameMapper\": {\n      \"^@/(.*)$\": \"\u003crootDir\u003e/app/javascript/$1\"\n    },\n    \"moduleFileExtensions\": [\n      \"js\",\n      \"json\",\n      \"vue\"\n    ],\n    \"transform\": {\n      \".+\\\\.js$\": \"babel-jest\",\n      \".+\\\\.vue$\": \"vue-jest\"\n    },\n    \"testPathIgnorePatterns\": [\n      \"\u003crootDir\u003e/config/webpack/\"\n    ],\n    \"snapshotSerializers\": [\n      \"jest-serializer-vue\"\n    ],\n    \"collectCoverage\": true,\n    \"collectCoverageFrom\": [\n      \"**/*.{js,vue}\",\n      \"!**/node_modules/**\"\n    ]\n  },\n```\n\n3. Add `test/javascript/test.test.js`:\n\n```js\ntest('there is no I in team', () =\u003e {\n  expect('team').not.toMatch(/I/);\n});\n```\n\n4. Verify installation\n\n```bash\nyarn test\n```\n\nExpect to see ![](https://cl.ly/3y0d2E110c3H/Image%202018-03-31%20at%2019.18.54.public.png)\n\n6. Add component test for App in `test/javascript/app.test.js`:\n\n```js\nimport { mount, shallowMount } from '@vue/test-utils'\nimport App from 'app';\n\ndescribe('App', () =\u003e {\n  test('is a Vue instance', () =\u003e {\n    const wrapper = mount(App)\n    expect(wrapper.vm).toBeTruthy()\n  })\n\n  test('matches snapshot', () =\u003e {\n    const wrapper = shallowMount(App)\n    expect(wrapper.html()).toMatchSnapshot()\n  })\n});\n```\n\n7. Verify by\n\n```bash\nyarn test\n```\n\nYou should see all tests passed\n\n## Setup Heroku and Deploy\n\n1. Confirm compilation is working:\n\n```bash\nRAILS_ENV=production \\\nNODE_ENV=production \\\nRAILS_SERVE_STATIC_FILES=true \\\nSECRET_KEY_BASE=\"7aa51097e982f34be02abe83528c3308768dff3837b405e0907028c750d22d067367fb79e2b223e3f223fea50ddf2d5dc9b3c933cf5bc8c7f2a3d3d75f73c4a7\" \\\nbin/rails assets:precompile\n```\n\n2. Create a Heroku App and provision it\n\nRequirements: [Heroku CLI](https://devcenter.heroku.com/articles/heroku-cli#download-and-install).\n\n**NOTE:** Do not forget to commit all your changes: `git add . \u0026\u0026 git\ncommit -m \"Generates Ruby on Rails application with Vue.js onboard\"`\n\n\n```bash\nheroku create\n\nheroku addons:create heroku-postgresql:hobby-dev\n\nheroku buildpacks:add heroku/ruby\n\nheroku config:set RAILS_ENV=production NODE_ENV=production YARN_PRODUCTION=true MALLOC_ARENA_MAX=2\n```\n\n3. Setup Node.js for Heroku\n\n```bash\nheroku buildpacks:add --index 1 heroku/nodejs\n```\n\nUse the `engines` section of the `package.json` to specify the version of Node.js to use on Heroku.\nDrop the ‘v’ to save only the version number:\n\n```json\n{\n  \"engines\": {\n    \"node\": \"\u003e= 12.x\"\n  }\n}\n```\n\n4. Deploy and verify that vue.js is working on Heroku\n\n```bash\ngit push heroku master\n\nheroku apps:open\n```\n\n## Setup basic PWA\n\n1. Install `serviceworker-rails` by adding into `Gemfile`:\n\n```ruby\ngem 'serviceworker-rails', github: 'rossta/serviceworker-rails'\n```\n\n2. Following the guide: https://github.com/rossta/serviceworker-rails\n   you should get something like: https://gist.github.com/pftg/786b147eff85a6fc98bd8dc1c3c9778e\n\n3. There'll be an issue with service worker registration on the page saying:\n`Uncaught ReferenceError: window is not defined` and\n`Failed to register a ServiceWorker...`.\nTo fix that add following line to `config/webpack/environment.js`\nas suggested [here](https://github.com/webpack/webpack/issues/6642#issuecomment-371087342):\n\n```javascript\nenvironment.config.set('output.globalObject', 'this')\n```\n\n## Setup Turbolinks\n\n1. Add node dependencies\n\n```bash\nyarn add vue-turbolinks turbolinks\n```\n\n2. Load Turbolinks by adding to\n   `app/javascript/initializers/turbolinks.js`:\n\n```javascript\nimport Turbolinks from 'turbolinks'\nTurbolinks.start()\n```\n\n3. Add to `app/javascript/packs/application.js`:\n\n```javascript\nimport 'initializers/turbolinks.js'\n```\n\n4. Change `app/javascript/packs/hello_vue.js` to:\n\n```javascript\nimport TurbolinksAdapter from 'vue-turbolinks'\nimport Vue from 'vue'\nimport App from '../app.vue'\n\nVue.use(TurbolinksAdapter)\n\ndocument.addEventListener('turbolinks:load', () =\u003e {\n  const app = new Vue({\n    render: h =\u003e h(App),\n    el: '#hello_vue_app'\n  }).$mount()\n})\n\n```\n\n5. Update layout `app/views/layouts/application.html.erb`:\n\n```erb\n\u003c%= javascript_packs_with_chunks_tag 'hello_vue', 'application', 'data-turbolinks-track': 'reload' %\u003e\n```\n\n6. Run tests and server to verify:\n\n```bash\nbin/rails t\nbin/rails s\n```\n\n## Setup AdminLTE\n\n1. Add node dependencies\n\n```bash\nyarn add admin-lte bootstrap jquery popover @fortawesome/fontawesome-free\n```\n\n2. Add `app/javascript/initializers/adminlte.js` initializer:\n\n```javascript\nimport '../assets/adminlte.scss'\nimport('./plugins') // () needed for async loading\n```\n\n3. Add `app/javascript/initializers/plugins.js` file with plugin importing:\n\n```javascript\nimport '@fortawesome/fontawesome-free'\nimport 'jquery/src/jquery.js'\nimport 'popper.js'\nimport 'bootstrap'\nimport 'admin-lte/build/js/AdminLTE'\n```\n\n4. Import admin lte initializer in `app/javascript/packs/application.js` pack:\n\n```javascript\nimport 'initializers/adminlte'\n```\n\n5. Next step is updating main layout `app/views/layouts/application.html.erb`. Code for layout you can find [here](https://adminlte.io/themes/v3/starter.html).\nAlso don't forget to add `yield` in div with `content` class:\n\n```html\n\u003cdiv class=\"content\"\u003e\n    \u003c%= yield %\u003e\n\u003c/div\u003e\n```\n\n6. Add styles to `app/javascript/assets/adminlte.scss`:\n\n```css\n$fa-font-path: '~@fortawesome/fontawesome-free/webfonts';\n\n@import '~@fortawesome/fontawesome-free/scss/fontawesome';\n@import '~@fortawesome/fontawesome-free/scss/solid';\n@import '~@fortawesome/fontawesome-free/scss/regular';\n@import '~@fortawesome/fontawesome-free/scss/brands';\n\n@import \"~admin-lte/build/scss/adminlte\";\n```\n\n7. Run tests and server to verify:\n\n```bash\nyarn test\nbin/rails test\nbin/rails test:system\nbin/rails s\n```\n\nExpect to see:\n![image](https://user-images.githubusercontent.com/53345298/80085750-586bc080-8561-11ea-8c3b-dc1eab5b9200.png)\n\n## Configure continuous integration and other services for static code analysis.\n\nTo be able to automatically analyze the quality of the code, let's install the [jt_tools](https://github.com/jetthoughts/jt_tools) gem.\n\n1. Add this line to your application's Gemfile:\n\n```ruby\ngem 'jt_tools', groups: [:development]\n```\n\n2. Next step is running bundle install and generator:\n\n```bash\nbin/bundle\nbin/rails jt_tools:install\n```\n\n3. Run linters to verify\n\n```bash\nbin/lint-pr\n```\nYou should see a list of the linters that were running.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjetthoughts%2Fvuejs-rails-starterkit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjetthoughts%2Fvuejs-rails-starterkit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjetthoughts%2Fvuejs-rails-starterkit/lists"}