{"id":18449559,"url":"https://github.com/jetthoughts/vuejs-rails-from-template","last_synced_at":"2025-04-16T19:42:31.205Z","repository":{"id":66617291,"uuid":"222243488","full_name":"jetthoughts/vuejs-rails-from-template","owner":"jetthoughts","description":null,"archived":false,"fork":false,"pushed_at":"2019-11-17T12:19:36.000Z","size":196,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-04-13T14:04:18.414Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-11-17T12:19:33.000Z","updated_at":"2019-11-17T12:19:39.000Z","dependencies_parsed_at":null,"dependency_job_id":"a6ed9190-17ce-434c-a8b1-0a20567803ff","html_url":"https://github.com/jetthoughts/vuejs-rails-from-template","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":"jetthoughts/vuejs-rails-starterkit","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jetthoughts%2Fvuejs-rails-from-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jetthoughts%2Fvuejs-rails-from-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jetthoughts%2Fvuejs-rails-from-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jetthoughts%2Fvuejs-rails-from-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jetthoughts","download_url":"https://codeload.github.com/jetthoughts/vuejs-rails-from-template/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249128345,"owners_count":21217124,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":[],"created_at":"2024-11-06T07:20:44.435Z","updated_at":"2025-04-15T18:28:08.687Z","avatar_url":"https://github.com/jetthoughts.png","language":"Ruby","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Setting up Rails 6 with PWA, Turbolinks, Webpack(er) 4, Babel 7, Vue.js 2 and Jest.\n\n**NOTE:** For Rails 5.2 please check\nhttps://github.com/jetthoughts/vuejs-rails-starterkit/tree/rails-5-latest\n\nA quick and easy way to setup Rails + PWA + Turbolinks + Webpacker + Vue + Jest.\nIf your team is considering, or has already decided, to use Vue, this is the right for you.\nAs extra review how to setup PWA, Turbolinks, CSS frameworks, Storybook.\n\nThings you may want to cover:\n\n* [Ruby](https://www.ruby-lang.org/en/) version: 2.6.5\n\n* System dependencies: [Node.js](https://nodejs.org/en/), [Yarn](https://yarnpkg.com/en/), [PostgreSQL](https://www.postgresql.org/), [Heroku CLI](https://devcenter.heroku.com/articles/heroku-cli)\n\n* Key Dependencies: [Ruby on Rails](https://rubyonrails.org/) version 6, [Vue.js](https://vuejs.org) version 2, [Webpacker](https://github.com/rails/webpacker) with Webpack 4 and Babel 7\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\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 *unsafe-eval rule* to support runtime-only build and\n   *webpacker-dev-server*\n\nThis can be done in the `config/initializers/content_security_policy.rb` with the following\nconfiguration:\n```ruby\nRails.application.config.content_security_policy do |policy|\n  if Rails.env.development?\n    policy.script_src :self, :https, :unsafe_eval\n\n    policy.connect_src :self, :https, 'http://localhost:3035', 'ws://localhost:3035'\n  else\n    policy.script_src :self, :https\n  end\nend\n```\n\nYou can learn more about this from: [Vue.js Docs](https://vuejs.org/v2/guide/installation.html#CSP-environments) and [Webpacker/Vue Docs](https://github.com/rails/webpacker#vue).\n\n4. Verify that we have not broken anything\n\n```bash\nbin/webpack\nbin/rails runner \"exit\"\n```\n\n### Use Webpacker assets in the application\n\n2. Enable Webpacker by updating `app/views/layout/application.html.erb`:\n\nAdd after:\n\n```erb\n    \u003c%= stylesheet_link_tag 'application', media: 'all' %\u003e\n    \u003c%= javascript_pack_tag 'application' %\u003e\n```\n\ninlcude of vue example:\n\n```erb\n    \u003c%= stylesheet_pack_tag 'hello_vue', media: 'all' %\u003e\n    \u003c%= javascript_pack_tag 'hello_vue' %\u003e\n```\n\n3. Add sample page to host Vue.js component:\n\n```bash\nbin/rails generate controller Landing index --no-javascripts --no-stylesheets --no-helper --no-assets --no-fixture\n```\n\n4. Setup sample page as home page by updating `config/routes.rb`:\n\n```ruby\n  root 'landing#index'\n```\n\n7. Verify locally that vue.js working\n\n```bash\nbin/rails s\nopen \"http://localhost:3000/\"\n```\n\nExpect to see ![](https://user-images.githubusercontent.com/125715/41176720-28eb3268-6b6a-11e8-9cb8-29cd78155d1b.png)\n\n## Install Jest for Component Unit Tests\n\n1. Add Jest\n\n```bash\nyarn add --dev jest vue-jest babel-jest @vue/test-utils jest-serializer-vue 'babel-core@^7.0.0-bridge' @babel/core\n```\n\n2. Add to `package.json`:\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      \"^@/(.*)$\": \"app/javascript/$1\"\n    },\n    \"moduleFileExtensions\": [\n      \"js\",\n      \"json\",\n      \"vue\"\n    ],\n    \"transform\": {\n      \"^.+\\\\.js$\": \"\u003crootDir\u003e/node_modules/babel-jest\",\n      \".*\\\\.(vue)$\": \"\u003crootDir\u003e/node_modules/vue-jest\"\n    },\n    \"snapshotSerializers\": [\n      \"\u003crootDir\u003e/node_modules/jest-serializer-vue\"\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\nYou should found ![](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.isVueInstance()).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 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 buildpacks:add heroku/ruby\n\nheroku config:set RAILS_ENV=production NODE_ENV=production\n```\n\n5. Deploy and verify that vue.js 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. By following guide: https://github.com/rossta/serviceworker-rails\n   should get something to: https://gist.github.com/pftg/786b147eff85a6fc98bd8dc1c3c9778e\n\n## Setup Turbolinks\n\n1. Add node dependencies\n\n```bash\nyarn add vue-turbolinks turbolinks\nyarn install\n```\n\n2. Load Turbolinks by adding\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. Uncomment in `hello_vue.js`:\n\n```javascript\nimport TurbolinksAdapter from 'vue-turbolinks'\nimport Vue from 'vue/dist/vue.esm'\nimport App from '../app.vue'\n\nVue.use(TurbolinksAdapter)\n\ndocument.addEventListener('turbolinks:load', () =\u003e {\n  const app = new Vue({\n    el: '#hello',\n    data: () =\u003e {\n      return {\n        message: \"Can you say hello?\"\n      }\n    },\n    components: { App }\n  })\n})\n```\n\n5. Update layout with:\n\n```html\n\u003cdiv id=\"hello\"\u003e\u003c/div\u003e\n```\n\n6. Run tests and server to verify:\n\n```bash\nbin/rails t\nbin/rails s\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjetthoughts%2Fvuejs-rails-from-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjetthoughts%2Fvuejs-rails-from-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjetthoughts%2Fvuejs-rails-from-template/lists"}