Hi!
I am brand new to Ember - I am trying to resolve a site that has been aboandoned by the developer. I just need to change one link in the nav. However, for the life of me I just cannot figure out what file contains the nav links. I can see it in developer tools but I cant find the actual file in the FTP.
Can someone help ? THank you!!
ps. Sorry this is such a beginner question
Typically this would be in the application template. If it’s new enough that it’s an ember-cli project it would be in <project-root>/app/templates/application.
This is of course assuming you have the source. If you just have a compiled version of the app you may still be able to edit that but it’s going to be harder.
Hey - thanks for the reply!
I found an application file [ application.hbs ] but it had no content related to the link. i also found the .hbs file for that page and tried to change the href but it doesn’t affect the site at all.
application.hbs only contains this
{{top-nav}}
I’m confused as to how this could be so hidden. The page specific HBS file did have a href in it, but I changed that to the new link and site still reacts the same.
Any ideas? thanks!
Ah, ok so {{top-nav}} is probably a component that is rendered in the application template. That component would then have it’s own template (probably app/templates/components/top-nav.hbs). I’d assume that’s where the nav link is.
Once you edit that to your satisfaction you’ll need to rebuild the app. Forgive me if you’re doing this already but you haven’t mentioned it so I’ll try to briefly explain it… Basically the way Ember (or really any single page application framework) works is it provides a way to separate all of your code into chunks and then at build time it smashes all the javascript, templates, and css together into a few files which are in a publishable package.
Ember contains a “development webserver” which you can use to live-reload changes as you make them (so you don’t have to rebuild manually) and then once you’re satisfied you can run ember build -e <environment> and it will dump a built app into /dist. To run the development server run ember serve -e development at the command line in the project root. Or maybe the app is only configured for prod, or you want to test that, so run ember serve -e production. Then point your browser at localhost:4200. Looks good? Kill the server and run ember build -e production to generate a production app build. You should see output something like this:
dknutsen$ ember build -e production
Could not start watchman
Visit https://ember-cli.com/user-guide/#watchman for more info.
cleaning up...
Built project successfully. Stored in "dist/".
File sizes:
- dist/assets/<project-name>-aefdd5618436c2dc00afc27e0e71c5e6.css: 122.38 KB (20.77 KB gzipped)
- dist/assets/<project-name>-fe948ecf30407f4f9e2dbaa22bf85a41.js: 438.97 KB (48.89 KB gzipped)
- dist/assets/vendor-368b09a9271b21dd04b38ecb98db9af9.js: 1.33 MB (331.92 KB gzipped)
- dist/assets/vendor-5170e8d2134c15ed1b951bb314fa9bf6.css: 510 B (174 B gzipped)
NOTE: you’ll need to have a modern version of node installed along with ember-cli (installed globally). You might also need bower depending on how old the ember app is. You’ll also need to run npm install and maybe bower install in project root to download all of the necessary packages.
Sound like a lot of work to change just a nav link? Well, it is, but Ember was designed for complex data-driven apps so there’s a lot to it. Good luck, and feel free to post with any more questions.
EDIT: once you’ve successfully built the app the files will be in /dist. Then if you copy those files to wherever the app is served it should update the deployed app. It’s possible the source may have deploy scripting set up but there’s no way for me to know that without seeing the code.
I suggest installing Ember Inspector and using the “View Tree” panel:
Alternatively you can do a project-wide search for {{link-to and {{#link-to, the inline and block forms of the link-to component for making links.
Hi ,
Thanks so much for this detailed response. Do I need to have the whole site downloaded locally to run the app rebuild ? That is the one aspect I’m a little lost about - since I am not the dev of this app, I’m just trying to fix this one link.
Thanks so much for breaking this down, definitely undertstanding it more at least.
Best - DA
Ah interesting, I will check this out !
Would this allow me to make the change without rebuilding the app and all ?
Thank you ! DA
@locks’ great suggestion, using Ember Inspector, would allow you to easily identify where the link is being created (what template/component). You’ll still need to rebuild the app once you’ve made the change and then redeploy it to wherever it is hosted.
You will need the entire project source to rebuild. A typical project will have the following (and more usually) in the project root:
package.json - defines the package name/version, what dependency libraries it uses, etcapp - where the app source code is, all templates, components, routes, router, etc is hereconfig - includes a file called environment.js which defines some global environment data and configdist - where your deployable website assets will go once the project is builtnode_modules - where all of the dependency packages are installed when you run npm install
So you’ll need that entire directory fully intact to build properly. Hopefully this is what you have. To recap:
npm install and if you have a bower.json file you’ll need to run bower install as well.<project-root>/app/templates/components/top-nav.hbs, might be somewhere else). You can optionally run the dev server (ember serve and go to localhost:4200 in a web browser) to check your work.ember build -e production to build the production-ready website. This will generate an index.html, a couple js files, a couple css files, etc and shove it all in a deployable format into /dist. Then depending on your webserver you just need to copy the entire contents of dist to the deploy location and that’s it!For more info I would look at the guides too. That link is version 2.13 which I selected kinda randomly. If you check the “package.json” file in the project you should find an entry for “ember-cli” which will specify the version of ember-cli the project was built with. That should probably be what you install when you install ember cli (via npm install -g ember-cli@<version>)
Hey All -
I really appreciate this help. It all seems incredibly daunting. I;m wondering if there is someone I could hire on like Fiverr to do this or something haha. I dont have the site locally installed, I mean, I could download it all of course. I’m going to check your notes to see if the complete app is intact.
This is a great learning experience none-the-less. The whol eprocess is probably not as crazy as it sounds to me coming at it without any specific knowledge on Ember.
Thanks!! DA
If you really can’t bear having to rebuild the site, you could edit the built template directly. How this actually works depends on what version of Ember you’re on, and how the link is set up in the template.
In this screenshot, I show how I was able to find the URL for the Code All Day link in the footer of the Ember Observer site. If you changed the string in the built template, the link would change when the site is rendered.
This is quite hackish but might be easier for you!
Hi!
Sorry got side tracked from this - on my Phone now but I will investigate this today. I’m Definitely for a hack ish approach right now - this whole app is a bit over my head. Thanks for this I will follow up after I attempt.
Best - DA
