Migrate from Ember Start Kit (not appkit) to Ember.cli - ember.js

I have a node.js backend server and an ember front-end project which is together:
public\js -> contains all the ember app stuff
app\ -> contains the node.js files
server.js -> main express server code
I would like to migrate to use ember-cli. I've tried the migrator and running ember init but both do not really work and give me errors. Most the documentation talks about migrating from EmberAppKit which I didn't use, but use my own grunt script to complie the templates and uglify and minify the css and js files.
How should I go about migrating such a project to Ember-cli? I'm very confused..please help.
Thanks!

Related

How to use ember sass in ember addon and correctly implement it into ember project

The following problem needs to be solved: I try to create a component within an ember addon, that's using sass. Within my addon I don't want to compile that scss files, that should be done within my project using ember-cli-sass and ember-css-modules-sass. The component I'm creating in my addon is also using sass modules, but I didn't install the ember packages for this, because I do that in my project.
I run into the problem, that when I try to serve my ember application from my project directory, I get the error that within my addon an imported scss file is unreadable or not there.
What am I doing wrong?
Thank you very much!
Add the Sass files to /app/styles/, not /addon/styles. This way they will be merged with the host app.

Flask serving Vue.js bundle file. Re-compile on change?

I'm using flask as my backend and Vue.js for my frontend. I created my VueJS project with vue-cli.
The way I have my project setup right now is that my backend is serving my static files. I, npm run build, and output the bundle files to my backend.
Everything works. It's just annoying to build every time.
I would like to re-compile my bundle every time I make changes to Vue. Is this possible? Modify my webpack?
Note: My project/flask is dockerized too.
This is what I was looking for: https://github.com/vuejs/vue-cli/issues/1120 then I found https://www.npmjs.com/package/vue-cli-plugin-build-watch

Ember build for production not building properly

I am building my ember app in production environment and deploying it on my local wamp server(apache server). But when I copy the file and open the app using url, the handlebar template application.hbs or index.hbs is not rendered.
I am building my project using
ember build --environment production --output-path dist/
But when I open the path 127.0.0.1/path-to-my-project
I get following error in console.
Uncaught Error: Could not find module `ember-data/-private\system\references\record` imported from `ember-data/-private/system/references`
vendor-192d3eef66f0205b64b4acf903f80f63.js:1
I am getting this error when building in production environment,building in development environment is working fine
I checked the documentation and sources available online, but couldn't find the cause for this error.
Please Help...
On Windows, it's mixing / and \s. See:
https://github.com/emberjs/data/pull/4205
If you're using the latest Ember, the solution is to upgrade to Ember-Cli 2.4.2 and use Ember Data 2.4.0.

ember-cli watch file changes in subdirectories of the styles folder

I started using EmberJS and ember-cli for a new project. Therefore I created a new project with ember-cli and added broccoli-compass with sass support. When I execute "ember server" in the terminal, ember is just watching for file changes on /app/styles/app.scss. I want ember-cli to also reload on file changes in subdirectories of the /app/styles folder (e.g. /app/styles/helpers/breakpoints.scss). How can I configure ember-cli for this purpose?
I just tried making a helpers directory and watchme.scss, and it sucessfully watches for changes, I suggest update your ember-cli version via npm update ember-cli. Here's the output:
file changed styles/helpers/watchme.scss
Build successful - 157ms.

Ember Inspector won't detect application using Grunt

I'm currently digging into Ember.js, using Yeoman as an automation tool for project deployment. Since Grunt is already included in Yeoman, I'm using it to fire up a Grunt Server everytime I'm working on my project.
I just started my very first Ember.js project using Yeoman when I realized, that Chrome's Ember Inspector Extension isn't able to detect my application as an Ember.js app when I'm running my Grunt Server at localhost. I've already checked the "Allow access to file URLs" option within the Extension settings, still no detection.
When I work on the project without running the Grunt Server, Ember Inspector detects my application immediately.
Any solution how I can use the Inspector while running Grunt?
Change your grunt to run on port 80.
Honestly it might be a problem localhost not being allowed with the extension, but I have a hard time believing that. Can't connect to localhost from Chrome extension