In the last section I had mentioned that we would move onto the client side but before we do there's
just one last little task that I think we need to take care of inside of our survey template file which
is inside these services email templates directory.
You'll recall that we are currently directing any users who click on the yes or no button to localhost
3000.
Now this approach is working out just fine with development.
But obviously when we go to production sending a user to local 3000 is going to be pretty bad.
And it's just going to show a user error on the screen.
Definitely not ideal.
So we need to make sure that whenever a user clicks on this link right here they are being sent to an
appropriate domain based on whether or not we are in production or development.
So in development you know maybe a local is 3000 is appropriate in production maybe email dot com or
our production domain is appropriate.
It's really up to us to decide what's best.
Now in the past when we spoke about domains especially around links like this inside of the client side
of our application we had said many times hey we don't want to specify the domain at all.
We want to just put in like a relative path to something and say That's it.
Let the browser figure out what's going on.
However remember that this email right here is going to be rendered inside of a user's e-mail inbox.
And so in an e-mail inbox we can't rely upon relative links.
If we do something like you know slash surveys or whatever it might be if the user clicks on this link
they will be sent to slash surveys on their current domain which might be Gmail or something like that
or MSM email with Hotmail.
People still use that.
I don't know.
So we can use relative links here.
We have to use a very definite domain.
OK.
So there's really two ways we can do this.
We can either add a key to our config file inside the Devyn prod J.S. files and say hey here's the domain
that we should use or we can just specify the domain directly inside of our survey template file.
I think that it's probably a little bit more elegant to place it inside of our keys file inside the
config directory so that even though we're talking about this thing and referring to them as keys they're
still specifying all of our high level of configuration inside of our app.
So we're going to add a little bit configuration to Devon Prod. and we'll make sure that we correctly
specify what domain the user should go to after clicking on yes or no.
So let's first go over to dev.
I'm going to add a new key onto this thing.
Make sure you get to come on the line above it and we'll Abdus we'll call it out like domain.
I think that works.
RC Well let's call it redirect domain
Yeah it's appropriate.
So we'll say that whenever a user clicks on the link while in development mode we're going to send them
to local host Colin 3000.
We will then specify the same thing over on the prod file as well.
So here's my project file and we'll call this one redirect domain.
Make sure you to come on the line right above it and then in this case it would definitely be nice to
have it on Heroku as well because Heroku really is what really knows our current domain.
So I think that makes a reasonable amount of sense to put the environment variable up there as well.
Specifying what the redirect domain should be.
Even though it's not really a protected key or anything like that around our application.
So let's open up our Heroku dashboard.
One more time we'll go to Heroku dot com.
We'll open up our application
plough pull open settings so your settings right here reveal config variables and we just call this
property redirect domain.
So we'll say redirect domain and then we're going to specify the domain that we want to send a user
to.
So the domain is going to be slightly different for you versus me because obviously inside of my production
environment I want to send the user to adj I'll buy you Roku app dot com.
Remember that's the name of my app.
So you're going to want to use whatever your application name is.
But you do definitely want to get a link to it.
So inside a new tab I'm going to just manually navigate over to you and I'll buy you a copy of this
thing and put it in as my value.
So again for this value right here you really just want to use the root domain of your particular Heroku
app.
OK.
So here it is.
Look at it and we're good to go.
Now the last step is to make sure that we wire that up inside of our actual loops.
Let's take care of specifying the environment variable in the project file.
So will say process EMV dot redirect domain
then we can go over to our survey template file will import the keys file at the top so will say Consta
keys is require up one directory up another directory because remember we're nested.
Now we're inside of email templates.
We'll then go into config slash keys and now rather than just redirecting the user to local hosta 2000
we are going to delete that link or delete that domain.
I'm going to leave behind the double quotes because we still want to double quotes but we will use a
little bit of E.S. six string interpellation syntax.
So put down the dollar sign and the curly braces and say keys dot redirect Domingue keys dot redirect
Domingue and it will do the same thing for no as well so keys dot redirect dummy.
OK.
Now the last thing I want to mention here very last thing we can test this out inside the browser at
this point if we sent ourselves a new e-mail.
Right.
But I think you know as well as I it's probably going to work just fine and it's probably going to kick
us back to the re-act application depending upon the environment that we're in.
So we can kind of just assume that's going to do the right thing.
But here's the thing.
When a user gets get kicked back to the re-act application that's kind of a weird flow for our users
like the end user or the person receiving these survey emails.
Imagine if some company that you just were working with sends you one of these feedback emails and they
say hey give us some input and then you click on one of these buttons and then it kicks you over to
e-mail.
Dotcom Why.
Why am I here like this doesn't make any sense.
Why am I here.
I thought I was just trying to get some feedback.
I clicked on yes.
And so in reality rather than sending a user back to the root of our application and showing them the
landing page of our app I think that it might be a lot more appropriate to put together some type of
custom route handler and just give the user a very quick message that says Hey thanks so much for giving
us your feedback.
You know or whatever we might want to say so we can take care of that really really quickly.
Very straightforward inside of the template right here.
Let's say that we're going to put together a new route inside of our routes survey routes file.
Let's do that right now.
Inside of the survey routes file above our existing one for opt out post API surveys.
Let's just add an account called something like apt get on our own.
We can still call it API surveys even though it's not quite a survey thing.
We'll take the incoming request and the response and then we'll just send back our message to the user
that says Hey thanks so much for voting so we'll say redstart sent.
Thanks for
for voting.
So right now it's got still a get request to API slash surveys.
We might want to use this route for when we fetched a list of all of our surveys in the future.
So rather than saying just API slash surveys I think that we could probably do something like API surveys.
Thanks.
I mean that'll work out just fine.
So now back inside of our template file when we create this H.F. right here we'll take the redirect
domain and then immediately after it.
So now outside of the curly braces we'll say slash API surveys things like so and we'll update both
of them with that API surveys.
Thanks.
OK time to test this out.
So make sure that we don't have any typos by checking my server.
Everything looks good.
Now flip on over to my re-act application.
I should be able to just do another up arrow and send it like so that should give me a second survey
request.
OK looks good.
I'm now down to eight credits here.
And if I go back over to my e-mail here's the new message I'll show it.
It gets collapsed because it's identical to my other ones.
And now if I click on one of the buttons I see the nice message.
Thanks for voting.
And so obviously you know yeah we should really probably like polished this page up a lot more than
it is right now.
But you can very easily imagine that you could really add in a tremendous amount of markup to the request
handler handler that we just added to make sure that the user feels a little bit more appreciated and
just say to them Hey thanks this really means a lot to us.
Whatever else you might want to say as a toll side topic.
Just in the context of the course still one other way that you could go with this is to say that whenever
someone creates a new survey.
So one of our direct users like the startup owner creates a survey.
Maybe they should also have to provide a route or a link or a u r l to send the user to after they have
voted.
So maybe we would say that whenever you create a new survey we should also take an additional property
called like redirect you are l and so every single individual survey can say hey if someone votes that
they liked us or they didn't like us go send them.
Send them over to some custom you are l that says you know maybe it's just customized for a very particular
user who is using our application and make sure that if someone says hey I like your application and
they click on yes or no I don't.
They get sent to some appropriate page that says hey sorry you didn't like our stuff.
Here's how we can make it better or you know whatever else.
So this would be a great place where if you want to come back and do a little bit of extra work to really
amp up this product that would be a great place to get started.
So a side topic.
OK.
So I think that's about it for creating surveys on the back end.
I can't imagine a single other thing that we need to do right now at this point.
We'll take a break.
We'll then continue in the next section and start working on the front end of our application where
we need to make sure that users have the ability to create a new survey.
So I'll see you in just a minute.