From d0c31f3144779068865768d54117abed66b5557d Mon Sep 17 00:00:00 2001 From: Ubuntu Date: Tue, 9 Feb 2021 22:57:48 +0000 Subject: [PATCH 1/2] Coming to you after class for some help. Yes I know I started late and I applogiize. I didnt think I would have issues --- README.md | 76 +------------------------------------------------------ 1 file changed, 1 insertion(+), 75 deletions(-) diff --git a/README.md b/README.md index 43c1fce..2483967 100644 --- a/README.md +++ b/README.md @@ -1,75 +1 @@ -# Instructions - -1. Set up your AWS Cloud9 environment first. Instructions are below. Video is on Canvas. -2. Fork this repo to your own GitHub account. Otherwise you can't push. -3. Clone your fork to Cloud9 and complete your homework in the main branch or a development branch. -4. Push your homework changes back to your fork on GitHub, merging into main if necessary. -5. Open a pull request to mverdicchio/421-reading-log to submit your homework -6. Post the link to your PR on Canvas to submit. - -# AWS Cloud9 Setup - -Follow [the video of my setup](https://youtu.be/IwRPcyY891g). In the video you will see the following actions (with approximate time stamps). -* (00:00) Create a new environment with t2.micro and Ubuntu Server 18.04 -* (00:35) Create and run the [resizing script from AWS](https://docs.aws.amazon.com/cloud9/latest/user-guide/move-environment.html#move-environment-resize). This will increase the amount of storage you have behind your C9 instance. Some of the libraries we install take up extra space and it can run out. -* (01:53) Install postgres and a dependency. We will use this database instead of sqlite3. Here's the command: - * `sudo apt-get install postgresql postgresql-contrib libpq-dev` -* (03:23) Clone your fork into C9 (do not clone my repo -- so you will use your own remote URL). - * Don't forget to change directories into the project root. -* (03:36) Run `bundle install`, which will install all required gems listed in `Gemfile`. -* (04:18) Install `figaro`, which will generate `config/application.yml` locally. -* (04:47) Edit `config/appication.yml` with the environment variables (database username and password) EXACTLY as shown. - -``` -PG_USER: "pg-user" -PG_PASS: "pg-pass123" -``` - - * These must be consistent with `config/database.yml`. -* (05:10) Set up the database user for your environment as shown in the next section. - -## postgres setup - -The postgres username and password is in `config/application.yml`, which is a file created by Figaro. This file is generated just for your development environment, but is never checked into version control. Otherwise outside people would have your credentials. The user we set is `pg-user`, so replace that in the commands below if you changed it. -Now you must give that user permissions to create the db. This must be done on every local machine (dev environment). - -``` -$ sudo -u postgres createuser -s pg-user -$ sudo -u postgres createdb pg-user -``` - -Now that user needs permission to migrate the database. Do this: -``` -$ sudo su postgres -postgres $ psql -postgres=# ALTER USER "pg-user" WITH SUPERUSER; -postgres=# \q -exit -``` - -Finally, that user needs a password, and that password must be the same one you defined in `config/application.yml`. Set it like this: - -``` -$ sudo -u postgres psql -postgres=# \password pg-user -Enter new password: -Enter it again: -postgres=# \q -$ -``` - -# AWS Cloud9 Setup (continued) - -* (07:23) Now you can run `bin/rails db:create db:migrate` since your local dev environment has a user with permission to create the database. -* (07:43) Install and run Yarn to avoid stupid problems with webpacker: -``` -$ curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add - -$ echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list -$ sudo apt update && sudo apt install yarn -$ bin/yarn install -$ bin/rails webpacker:install -$ bin/rails webpacker:install:vue -``` - -* (09:14) Run the app: `bin/rails s -b 0.0.0.0` and preview. - +I am coming to you after class to figure out why I cant preview a blank page after following your instructions and video \ No newline at end of file From 38ea300b4e9c364121543349dba70fd801a27ca8 Mon Sep 17 00:00:00 2001 From: Ubuntu Date: Thu, 11 Feb 2021 00:22:56 +0000 Subject: [PATCH 2/2] Added some CRUD, still getting errors and not knowing why. Not of fan of Ruby. Even with all the help and reasearch --- app/controllers/entries_controller.rb | 9 +++ app/javascript/app.vue | 22 ++++++ app/javascript/packs/hello_vue.js | 72 ++++++++++++++++++++ app/views/entries/index.html.erb | 10 ++- app/views/entries/new.html.erb | 12 ++++ config/routes.rb | 2 +- config/webpack/environment.js | 4 ++ config/webpack/loaders/vue.js | 6 ++ config/webpacker.yml | 1 + package.json | 5 +- yarn.lock | 98 ++++++++++++++++++++++++++- 11 files changed, 234 insertions(+), 7 deletions(-) create mode 100644 app/javascript/app.vue create mode 100644 app/javascript/packs/hello_vue.js create mode 100644 app/views/entries/new.html.erb create mode 100644 config/webpack/loaders/vue.js diff --git a/app/controllers/entries_controller.rb b/app/controllers/entries_controller.rb index f23963f..848b6e4 100644 --- a/app/controllers/entries_controller.rb +++ b/app/controllers/entries_controller.rb @@ -8,4 +8,13 @@ def show @entry = Entry.find(params[:id]) end + def new + @entry = Entry.new + end + + def create + @entry = Entry.create(params.require(:book_title).permit(:pages, :date)) + redirect_to new_entry_path + end + end diff --git a/app/javascript/app.vue b/app/javascript/app.vue new file mode 100644 index 0000000..e304dc1 --- /dev/null +++ b/app/javascript/app.vue @@ -0,0 +1,22 @@ + + + + + diff --git a/app/javascript/packs/hello_vue.js b/app/javascript/packs/hello_vue.js new file mode 100644 index 0000000..cc7a1e0 --- /dev/null +++ b/app/javascript/packs/hello_vue.js @@ -0,0 +1,72 @@ +/* eslint no-console: 0 */ +// Run this example by adding <%= javascript_pack_tag 'hello_vue' %> (and +// <%= stylesheet_pack_tag 'hello_vue' %> if you have styles in your component) +// to the head of your layout file, +// like app/views/layouts/application.html.erb. +// All it does is render
Hello Vue
at the bottom of the page. + +import Vue from 'vue' +import App from '../app.vue' + +document.addEventListener('DOMContentLoaded', () => { + const app = new Vue({ + render: h => h(App) + }).$mount() + document.body.appendChild(app.$el) + + console.log(app) +}) + + +// The above code uses Vue without the compiler, which means you cannot +// use Vue to target elements in your existing html templates. You would +// need to always use single file components. +// To be able to target elements in your existing html/erb templates, +// comment out the above code and uncomment the below +// Add <%= javascript_pack_tag 'hello_vue' %> to your layout +// Then add this markup to your html template: +// +//
+// {{message}} +// +//
+ + +// import Vue from 'vue/dist/vue.esm' +// import App from '../app.vue' +// +// document.addEventListener('DOMContentLoaded', () => { +// const app = new Vue({ +// el: '#hello', +// data: { +// message: "Can you say hello?" +// }, +// components: { App } +// }) +// }) +// +// +// +// If the project is using turbolinks, install 'vue-turbolinks': +// +// yarn add vue-turbolinks +// +// Then uncomment the code block below: +// +// import TurbolinksAdapter from 'vue-turbolinks' +// import Vue from 'vue/dist/vue.esm' +// import App from '../app.vue' +// +// Vue.use(TurbolinksAdapter) +// +// document.addEventListener('turbolinks:load', () => { +// const app = new Vue({ +// el: '#hello', +// data: () => { +// return { +// message: "Can you say hello?" +// } +// }, +// components: { App } +// }) +// }) diff --git a/app/views/entries/index.html.erb b/app/views/entries/index.html.erb index 741eeb3..917bb44 100644 --- a/app/views/entries/index.html.erb +++ b/app/views/entries/index.html.erb @@ -1,6 +1,6 @@ -

Future index page!

- +

All The Books Belong To Us

+<%= button_to "Add New Book", new_entry_path, method: :get %> diff --git a/app/views/entries/new.html.erb b/app/views/entries/new.html.erb new file mode 100644 index 0000000..fb5090a --- /dev/null +++ b/app/views/entries/new.html.erb @@ -0,0 +1,12 @@ +

New Books

+ +<%= form_for @entry do |f|%> + <%= f.label :book_title%> + <%= f.text_field :book_title%> + <%= f.label :pages%> + <%= f.text_field :pages%> + <%= f.label :date%> + <%= f.text_field :date%> + + <%= f.submit%> +<%end%> \ No newline at end of file diff --git a/config/routes.rb b/config/routes.rb index 85f1116..3630802 100644 --- a/config/routes.rb +++ b/config/routes.rb @@ -4,7 +4,7 @@ root "entries#index" - resources :entries + resources :entries, only: [:new, :create, :destroy ] end diff --git a/config/webpack/environment.js b/config/webpack/environment.js index d16d9af..6ef014b 100644 --- a/config/webpack/environment.js +++ b/config/webpack/environment.js @@ -1,3 +1,7 @@ const { environment } = require('@rails/webpacker') +const { VueLoaderPlugin } = require('vue-loader') +const vue = require('./loaders/vue') +environment.plugins.prepend('VueLoaderPlugin', new VueLoaderPlugin()) +environment.loaders.prepend('vue', vue) module.exports = environment diff --git a/config/webpack/loaders/vue.js b/config/webpack/loaders/vue.js new file mode 100644 index 0000000..509c742 --- /dev/null +++ b/config/webpack/loaders/vue.js @@ -0,0 +1,6 @@ +module.exports = { + test: /\.vue(\.erb)?$/, + use: [{ + loader: 'vue-loader' + }] +} diff --git a/config/webpacker.yml b/config/webpacker.yml index a6b1465..fe28eca 100644 --- a/config/webpacker.yml +++ b/config/webpacker.yml @@ -33,6 +33,7 @@ default: &default - .woff2 extensions: + - .vue - .mjs - .js - .sass diff --git a/package.json b/package.json index 90994c8..4d19d76 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,10 @@ "@rails/activestorage": "^6.0.0", "@rails/ujs": "^6.0.0", "@rails/webpacker": "5.2.1", - "turbolinks": "^5.2.0" + "turbolinks": "^5.2.0", + "vue": "^2.6.12", + "vue-loader": "^15.9.6", + "vue-template-compiler": "^2.6.12" }, "version": "0.1.0", "devDependencies": { diff --git a/yarn.lock b/yarn.lock index d93d109..c79034b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -920,6 +920,22 @@ resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.4.tgz#15925414e0ad2cd765bfef58842f7e26a7accb24" integrity sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug== +"@vue/component-compiler-utils@^3.1.0": + version "3.2.0" + resolved "https://registry.yarnpkg.com/@vue/component-compiler-utils/-/component-compiler-utils-3.2.0.tgz#8f85182ceed28e9b3c75313de669f83166d11e5d" + integrity sha512-lejBLa7xAMsfiZfNp7Kv51zOzifnb29FwdnMLa96z26kXErPFioSf9BMcePVIQ6/Gc6/mC0UrPpxAWIHyae0vw== + dependencies: + consolidate "^0.15.1" + hash-sum "^1.0.2" + lru-cache "^4.1.2" + merge-source-map "^1.1.0" + postcss "^7.0.14" + postcss-selector-parser "^6.0.2" + source-map "~0.6.1" + vue-template-es2015-compiler "^1.9.0" + optionalDependencies: + prettier "^1.18.2" + "@webassemblyjs/ast@1.9.0": version "1.9.0" resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.9.0.tgz#bd850604b4042459a5a41cd7d338cbed695ed964" @@ -1431,7 +1447,7 @@ block-stream@*: dependencies: inherits "~2.0.0" -bluebird@^3.5.5: +bluebird@^3.1.1, bluebird@^3.5.5: version "3.7.2" resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f" integrity sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg== @@ -2015,6 +2031,13 @@ console-control-strings@^1.0.0, console-control-strings@~1.1.0: resolved "https://registry.yarnpkg.com/console-control-strings/-/console-control-strings-1.1.0.tgz#3d7cf4464db6446ea644bf4b39507f9851008e8e" integrity sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4= +consolidate@^0.15.1: + version "0.15.1" + resolved "https://registry.yarnpkg.com/consolidate/-/consolidate-0.15.1.tgz#21ab043235c71a07d45d9aad98593b0dba56bab7" + integrity sha512-DW46nrsMJgy9kqAbPt5rKaCr7uFtpo4mSUvLHIUbJEjm0vo+aY5QLwBUq3FK4tRnJr/X0Psc0C4jf/h+HtXSMw== + dependencies: + bluebird "^3.1.1" + constants-browserify@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/constants-browserify/-/constants-browserify-1.0.0.tgz#c20b96d8c617748aaf1c16021760cd27fcb8cb75" @@ -2371,6 +2394,11 @@ dashdash@^1.12.0: dependencies: assert-plus "^1.0.0" +de-indent@^1.0.2: + version "1.0.2" + resolved "https://registry.yarnpkg.com/de-indent/-/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d" + integrity sha1-sgOOhG3DO6pXlhKNCAS0VbjB4h0= + debug@2.6.9, debug@^2.2.0, debug@^2.3.3: version "2.6.9" resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f" @@ -3381,6 +3409,11 @@ hash-base@^3.0.0: readable-stream "^3.6.0" safe-buffer "^5.2.0" +hash-sum@^1.0.2: + version "1.0.2" + resolved "https://registry.yarnpkg.com/hash-sum/-/hash-sum-1.0.2.tgz#33b40777754c6432573c120cc3808bbd10d47f04" + integrity sha1-M7QHd3VMZDJXPBIMw4CLvRDUfwQ= + hash.js@^1.0.0, hash.js@^1.0.3: version "1.1.7" resolved "https://registry.yarnpkg.com/hash.js/-/hash.js-1.1.7.tgz#0babca538e8d4ee4a0f8988d68866537a003cf42" @@ -3389,6 +3422,11 @@ hash.js@^1.0.0, hash.js@^1.0.3: inherits "^2.0.3" minimalistic-assert "^1.0.1" +he@^1.1.0: + version "1.2.0" + resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f" + integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw== + hex-color-regex@^1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/hex-color-regex/-/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e" @@ -4130,7 +4168,7 @@ loader-runner@^2.4.0: resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-2.4.0.tgz#ed47066bfe534d7e84c4c7b9998c2a75607d9357" integrity sha512-Jsmr89RcXGIwivFY21FcRrisYZfvLMTWx5kOLc+JTxtpBOG6xML0vzbc6SEQG2FO9/4Fc3wW4LVcB5DmGflaRw== -loader-utils@^1.1.0, loader-utils@^1.2.3, loader-utils@^1.4.0: +loader-utils@^1.0.2, loader-utils@^1.1.0, loader-utils@^1.2.3, loader-utils@^1.4.0: version "1.4.0" resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.4.0.tgz#c579b5e34cb34b1a74edc6c1fb36bfa371d5a613" integrity sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA== @@ -4221,7 +4259,7 @@ loud-rejection@^1.0.0: currently-unhandled "^0.4.1" signal-exit "^3.0.0" -lru-cache@^4.0.1: +lru-cache@^4.0.1, lru-cache@^4.1.2: version "4.1.5" resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.1.5.tgz#8bbe50ea85bed59bc9e33dcab8235ee9bcf443cd" integrity sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g== @@ -4336,6 +4374,13 @@ merge-descriptors@1.0.1: resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-1.0.1.tgz#b00aaa556dd8b44568150ec9d1b953f3f90cbb61" integrity sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E= +merge-source-map@^1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/merge-source-map/-/merge-source-map-1.1.0.tgz#2fdde7e6020939f70906a68f2d7ae685e4c8c646" + integrity sha512-Qkcp7P2ygktpMPh2mCQZaf3jhN6D3Z/qVZHSdWvQ+2Ef5HgRAPBO57A77+ENm0CPx2+1Ce/MYKi3ymqdfuqibw== + dependencies: + source-map "^0.6.1" + merge-stream@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60" @@ -5821,6 +5866,11 @@ prepend-http@^1.0.0: resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc" integrity sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw= +prettier@^1.18.2: + version "1.19.1" + resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.19.1.tgz#f7d7f5ff8a9cd872a7be4ca142095956a60797cb" + integrity sha512-s7PoyDv/II1ObgQunCbB9PdLmUcBZcnWOcxDh7O0N/UwDEsHyqkW+Qh28jW+mVuCdx7gLB0BotYI1Y6uI9iyew== + process-nextick-args@~2.0.0: version "2.0.1" resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2" @@ -7327,6 +7377,48 @@ vm-browserify@^1.0.1: resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0" integrity sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ== +vue-hot-reload-api@^2.3.0: + version "2.3.4" + resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz#532955cc1eb208a3d990b3a9f9a70574657e08f2" + integrity sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog== + +vue-loader@^15.9.6: + version "15.9.6" + resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-15.9.6.tgz#f4bb9ae20c3a8370af3ecf09b8126d38ffdb6b8b" + integrity sha512-j0cqiLzwbeImIC6nVIby2o/ABAWhlppyL/m5oJ67R5MloP0hj/DtFgb0Zmq3J9CG7AJ+AXIvHVnJAPBvrLyuDg== + dependencies: + "@vue/component-compiler-utils" "^3.1.0" + hash-sum "^1.0.2" + loader-utils "^1.1.0" + vue-hot-reload-api "^2.3.0" + vue-style-loader "^4.1.0" + +vue-style-loader@^4.1.0: + version "4.1.2" + resolved "https://registry.yarnpkg.com/vue-style-loader/-/vue-style-loader-4.1.2.tgz#dedf349806f25ceb4e64f3ad7c0a44fba735fcf8" + integrity sha512-0ip8ge6Gzz/Bk0iHovU9XAUQaFt/G2B61bnWa2tCcqqdgfHs1lF9xXorFbE55Gmy92okFT+8bfmySuUOu13vxQ== + dependencies: + hash-sum "^1.0.2" + loader-utils "^1.0.2" + +vue-template-compiler@^2.6.12: + version "2.6.12" + resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.6.12.tgz#947ed7196744c8a5285ebe1233fe960437fcc57e" + integrity sha512-OzzZ52zS41YUbkCBfdXShQTe69j1gQDZ9HIX8miuC9C3rBCk9wIRjLiZZLrmX9V+Ftq/YEyv1JaVr5Y/hNtByg== + dependencies: + de-indent "^1.0.2" + he "^1.1.0" + +vue-template-es2015-compiler@^1.9.0: + version "1.9.1" + resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825" + integrity sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw== + +vue@^2.6.12: + version "2.6.12" + resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.12.tgz#f5ebd4fa6bd2869403e29a896aed4904456c9123" + integrity sha512-uhmLFETqPPNyuLLbsKz6ioJ4q7AZHzD8ZVFNATNyICSZouqP2Sz0rotWQC8UNBF6VGSCs5abnKJoStA6JbCbfg== + watchpack-chokidar2@^2.0.1: version "2.0.1" resolved "https://registry.yarnpkg.com/watchpack-chokidar2/-/watchpack-chokidar2-2.0.1.tgz#38500072ee6ece66f3769936950ea1771be1c957"