Welcome back! We left off last time in a good place. We set up the back end by generating three models – User, Meal, and UserMeal (our joins table) – with associations. We used scaffolding to generate our models. In most cases, we would normally not generate models using scaffolding, because it creates a lot of things we won’t need. This causes bloat in our app, and if we want our app to scale nicely and be fast, this will be a problem. For our case (and our little app), it’s nice and easy to use scaffolding – so we did. Then we installed a great gem called Active Model Serializer, which formats our model data into reusable JSON, which our front end will consume. In this edition we’ll be installing AngularJS and Webpack. Let’s dive in.
# In your gemfile.rb file, add gem 'webpacker' # Back in your terminal bundle bundle exec rails webpacker:install # if you get an error that looks like this: 'Webpacker requires Yarn >= 0.25.2 # and you are using 0.24.6 # Please upgrade Yarn https://yarnpkg.com/lang/en/docs/install/' # do this: npm install -g yarn # if everything is honky dory bundle exec rails webpacker:install:angular
Now our files will be included and we can get coding. Let’s create the entry point to the angular app. Create a new folder and file in our views folder:
app/views/application/angular_home.html. Now we need a route. Let’s add it to our routes.rb file.
root to: 'application#angular_home'
Let’s add something to our angular_home file.
# app/views/application/angular_home.html Goodbye World # LOL?
Now run ‘rails s’ in your terminal and head on over to ‘locahost:3000’ in your browser. We should see ‘Goodbye World’ on the webpage. Now look in the console (Apple Control ‘J’) and you should see ‘Hello World from Webpacker’. We’re in business.
I think this is a good place to leave off. Our backend is set up. Webpack is setup. We have an entry point to Angular. Things are looking good. Next week we’ll dive head first into Angular. Working with modules and all the goodness that comes with ES6! Until then…cheeeeeers:)