Great - thanks nynhex. I'm trying to figure this out now. Most of the courses I'm finding are node backend API - makes me think its time to learn node. i'd love to know your general configuration. I'm struggling to make initial architecture decisions

Are you planning to do any react front end sessions? I know you're tired of authentication, but I'd love to see you do some work in react so that I can get a feel for how to use it with rails in the back end. I'm getting a lot out of this series. Something is preventing me from commenting on episode 6, but I'd love to learn more about AMS too

Hi Gabriella, I'm using webpack on the client side (its one of my node modules), so I dont think I have use for the gem.

Thanks everyone.

Feedback on the pluralsight course. I didnt get much from it. It uses react-rails on the front end but rails still runs the application. I was trying to learn how to let react control the frontend, so for me it wasnt what I was looking for.

Thanks Mark Radford for the links. Some of the feedback I've found on using webpack is that it makes the front end smooth, but there will still be duplication in the back end if it's seved by a rails api - as opposed to a node mongoDB stack.

I dont want to get too caught up in this because I think it might come down to preference. Reading the materials Mark shared, I'm keen to use the process that Stephen Grider's course has shared and skip the gem in favour of setting things up directly.

Thanks very much Matthew. I'm going to give it a try.

I just found the pluralsight course. I'll give that a try & come back to let anyone else that's interested whether learning Flux looks like a good option.

I'm trying to learn how to use react in my rails 5 app.

I've just finished following Kenny Hibino's you tube series for his medium clone. He used react-rails gem, but then realised he wanted to use the react router.

The alternative gem is react-on-rails. There is a lot of commentary on this gem that concludes it is heavy.

A further alternative is not to use either of these gems and have a react front end app with a separate rails back end app. I've just finished the udemy course by Stephen Grider on getting started with react (Modern React with Redux). It gives a very clear overview of react and JSX.

Has anyone had any experience with this third option? I'd like to learn how to use the separate app concept before I decide to invest time in learning how to use react-on-rails, especially if that gem isnt a solid solution (I see the advice on the gem page is not to use server side rendering as a default). I cant find an intro course to using rails with react (apart from Kenny's video tutorials, which he has realised don't get him to where he wants to be re the router). I've read several medium posts about choosing one gem or the other, but I'm now looking for an option without a gem.

Thanks

Sharing - just in case it helps anyone else (although I think I'm bringing up the rear in the learning curve)

This is the rake task that worked for me:

require 'csv'
namespace :import do

  desc "import research fields from csv"
  task randd_fields: :environment do
    filename = File.join Rails.root, 'for_codes.csv'
    counter = 0

    CSV.foreach(filename, headers: true) do | row |
      p row ["anz_reference"]

      for_code = Randd::Field.create(anz_reference: row["anz_reference"], title: row['title'])
      counter += 1 if for_code.persisted?
    end
    puts "Imported #{counter} field codes"
  end
end

The key changes are:

1. put a separate row reference in for the second field.

2. check what is being used in the counter. Instead of the table name, count from the file field.

Thanks very much again to everyone for helping me

Thanks very much David.

One of the things I tried was to manually type a couple of lines in by hand and try to rake that file instead of an imported CSV that i saved into the app.

I still get the same error.

NameError: undefined local variable or method `title' for main:Object

Someone on SO suggested that error might be attributable to:

not specifying row for the title field.
referencing randd_fields (table) instead of for_codes (csv file) in the import counter method.

They suggested that I try changing the rake task to add a row reference around the title attribute and replacing the reference to randd_fields in the counter line as follows:

require 'csv'
namespace :import do

desc "import research fields from csv"
task rannd_fields: :environment do
filename = File.join Rails.root, 'for_codes.csv'
counter = 0

CSV.foreach(filename, headers: true) do | row |
  p row ["anz_reference"]

  for_code = Randd::Field.create(anz_reference: row["anz_reference"], title: row['title'])
  counter += 1 if for_code.persisted?
end
puts "Imported #{counter} field codes"

end
end

but - I still get the same error.

Thanks anyway for trying to help me.

It might now be faster if I enter my 2000 records by hand instead of trying to learn to import them via a CSV upload.

Hi David,

Thanks very much for taking a look.

The routes are:

namespace :randd do
resources :maturities
resources :activities
resources :purposes
resources :fields do
collection {post :import }
end
end

One 'end' is for the "fields" and the other is for the "randd".

It's probably unclear because one of the other tutorials I tried to use showed to do it using the post :create line that I showed as commented out (which needed the extra end).

I think its right the way it is above or do you think there is another way to try to express this?

Hi Ryan

Thanks a lot for the suggestion.

I'm the Melanie that has filled up the comments section on that article. I couldnt get that working. It seems from the comments that a few people had issues - although they had problems different to my own.

Thanks again for the suggestion.

Melanie

I am really stuck in trying to follow along with this. I moved my xls data into a google drive sheet and downloaded that as a csv saved in my root directory, but it still isn't working. Are there any other references to different tutorials that i can try. I tried those published by RichonRails and Matt Morgante but those don't work either. I tried the roo gem with the 2012 rails cast but that is out of date and I cant get that configured to work. Please can you go deeper into this so that the issue I keep running into is covered in your process. Thank you

I've had a break from trying to solve this for a few weeks and am now back. I cant get the process Chris used in his CSV upload video to work. I've just finished attempting to get the records into the table with the roo gem but that hasnt worked either.

Can you recommend a tutorial, text or topic that i can search for to figure out how to uopload records from an xls file into my db?

Thank you

Cool. I'll try it this afternoon. Thanks so much again.

Hi John

THANK YOU

Please can I pay you for the time you took to do this? I dont understand why the js cant be in the js folder but I'm beyond grateful that you found a way to make this work.

Thanks so much again.

Mel

No console errors, but still a blank white space instead of a map. The address details populate to the script that I can see in the elements tab of the chrome inspector (as they do with the other variations on this).

So now my address.js has nothing in it and my views/addresses/_map.html.erb has:

<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=<%= ENV["GOOGLE_MAPS_API_KEY"] %>"
    async defer></script>
<script>
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 5
  });
  var bounds = new google.maps.LatLngBounds();
  // var opts = {
  //   zoom: 10,
  //   max_zoom: 16
  // }

  var n = addresses.length;
  for (var i = 0; i < n; i++) {
    var lat = addresses[i].latitude;
    var lng = addresses[i].longitude;
    if (lat == null || lng ==null){
      console.log(addresses[i].name + " doesn't have coordinates");
    }else {
      // var addresses = <%= raw @addresses.to_json %>,

      var address = new google.maps.Marker({
        position: {lat: parseFloat(lat), lng: parseFloat(lng)},
        title: addresses[i].name,
        map: map //,
//        zoom: 8
      });
      bounds.extend(address.position);
    }
  }
  map.fitBounds(bounds);
}
</script>

<%= javascript_tag do %>
    var addresses = <%= raw @addresses.to_json %>;

<% end %>

The result in production is the same as before. A blank white space where the map placeholder is. No errors in the console tab of the chrome inspector.

I think when you say:

Make sure your address.js code is after your map element in your view. That way, the javascript code runs after the element has been created.

you mean that I need a listener in my address.js file.

That file currently has:

// document.addEventListener("turbolinks:load", function() {
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 5
  });
  var bounds = new google.maps.LatLngBounds();
  // var opts = {
  //   zoom: 10,
  //   max_zoom: 16
  // }

  var n = addresses.length;
  for (var i = 0; i < n; i++) {
    var lat = addresses[i].latitude;
    var lng = addresses[i].longitude;
    if (lat == null || lng ==null){
      console.log(addresses[i].name + " doesn't have coordinates");
    }else {
      // var addresses = <%= raw @addresses.to_json %>,

      var address = new google.maps.Marker({
        position: {lat: parseFloat(lat), lng: parseFloat(lng)},
        title: addresses[i].name,
        map: map //,
//        zoom: 8
      });
      bounds.extend(address.position);
    }
  }
  map.fitBounds(bounds);
}

My view partial has:

<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=<%= ENV["GOOGLE_MAPS_API_KEY"] %>"
    async defer></script>
<%= javascript_tag do %>
  $(document).ready(function() {
    var addresses = <%= raw @addresses.to_json %>;
  });
<% end %>

I've replaced the turbolinks listener (because I've switched turbolinks off again) with a function to check if the document is ready.

I'm not sure if I am including the address.js file after the page loads by taking that step. It doesnt look like anything in the partial is specifically referencing address.js.

I tried this in production - I dont get any errors but I also get a blank white space instead of a map.

I intentionally removed those two lines (underscore and gmaps). They were required when I was trying to use gmaps4rails gem but are not required to just use javascript. I couldnt get gmaps for rails gem to work. I found a solution that worked (although I couldnt set a zoom level) to render a map without that gem - so I removed the requirment for those 2 lines.

I can either have googlemaps working (if I move the javascript include tag out of the head and to the end of the body tag) in which case, the rest of my javascript doesnt work.

Alternatively, I can use the rest of my javascript (except google maps) by includig the javascript include tag in the head tag - but then the google map doesnt render.

I tried removing turbolinks. I commented out all the files that refer to turbolinks and pushed that to production. I get no js errors showing in the console tab of the chrome inspector, but I also dont get a map - just a blank white square where the map should be.

Thanks very much for helping me.