I'm trying to turn an existing ember app to electron app using ember-electron addon. When I run ember serve and ember electron, files in dist and electron-out/project/ember are getting generated newly.
But the assets in these folders are different.
I'm using fingerprinted assets.
The assets expected by index.html file in electron-out/project/ember aren't present in dist/assets folder.
In ember-electron/main.js, I have the lines -
protocolServe({
cwd: join(__dirname || resolve(dirname('')), '..', 'ember'),
app,
protocol,
});
and
const emberAppLocation = 'serve://dist';
From my understanding, there are separate assets compiled for ember-electron app whose index.html refers to ember-electron assets but trying to fetch them from dist.
What is wrongly configured here? Please help!
Related
I am trying to convert our Gulp-based workflow to webpack, and am having trouble figuring out how to get the live reload functionality to work (auto refresh when any of the javascript changes). My project is an Angular 1.5.8 app with an Express backend, with jade markup files compiled to html and stylus (.styl) files compiles to css through our build step. For now, I'm ONLY transpiling the javascript and bundling it together just to see if I can get that part working, but I can't.
I should note, index.jade does NOT get transpiled by our build step. When a user makes a request to our backend, index.jade gets compiled to html and served up to the client.
My project structure looks like this
- bin (compiled/transpiled files)
- js
- index.js(transpiled js)
- templates.js (created for angular's template cache)
- stylesheets ( compiled from stylus to css)
- stylesheet1.css
- stylesheet2.css
- ...
- templates
- random-html-file.html
- ...
- lib
- index.js (this file serves up `index.jade`)
- server
- index.js
- api
- index.js
- client (es6 angular code)
- index.jade
- javascript
- index.js (main entry point)
- restOfAngularStuff
- stylesheets folder
- templates folder (jade)
Ok so that's basically the file structure (simplified). The Express server listens on port 3000 and knows to serve up content from ./bin (the server is started with NODE_PATH=./ so from the root directory) I can get the javascript to be transpiled by webpack with this set up in my webpack.config.js: https://gist.github.com/anonymous/cc1350022175288895ab956036569f94
That file gets called by my npm script npm run webpack-dev, which runs webpack-dev-server.
The server starts up and my app loads, but when I changed some of the javascript in lib/client/javascript/index.js, the page doesn't refresh and I can't seem to figure out why. I'm fairly new to Webpack but I'm willing to provide as much info as I can if anyone needs more info to help me debug this problem. I've also posted the server-side code for how index.jade gets served up for reference (lib/index.js): https://gist.github.com/anonymous/70c267e6ceddd194b5cd0e6c1c177445
Thanks!
I have a js app (packaged with Electron) in which I wish to load a yaml file. The following works when I have packaged the app since the app.getAppPath() gives me access to the app.asar file, but in development it returns the path \node_modules\electron-prebuilt\dist\resources\default_app.asar.
fs.readFileSync(`${app.getAppPath()}/src/app/data/items.yml`, 'utf8')
Is there any way to get around this? Should my yaml file not be placed in the same directory as the rest of the app?
Use the path module together with the __dirname built-in to construct file paths to assets relative to your source files, the relative paths won't change between development and packaged builds. For example, assuming the following directory structure:
src/
app/
browser/
main.js
data/
items.yml
You should reference items.yml in main.js like so:
path.join(__dirname, '..', 'data', 'items.yml')
In Ember JS project, we have package.json (for NPM managed) and bower.json (Bower managed) where we have all our dependencies/devDependencies (e.g. bootstrap, jquery, ember, etc)
Now these get downloaded from their respective registries and get downloaded locally into node_modules/bower_components folder.
Now my question is while these folders (node_modules/bower_components) contain a lot of code dependencies, when we do a build, I see some code in the "dist" folder.
I want to understand what actually goes into this dist ?
I see things like vendor.css, vendor.js, myappName.css, myappName.js, etc
So how do these get constructed and what code actually goes inside these ?
Is it also base on what we have in our package/bower json config files ?
Or is it based on what we have in ember-cli-build.js ?
What is put under /dist should be everything you need to publish your application. Components from bower_components are typically loaded via app.import() in ember-cli-build.js and stuff from node_modules by addons you've installed (which ember-cli picks up automatically).
Here is a quick rundown of the files.
index.html --> Generated by ember-cli upon project creation
* --> Everything from /public
assets/
appName.css --> All css from under /app
appName.js --> All js and compiled templates from /app
vendor.css --> Any css imported from bower_components/node_modules (via ember-cli-build.js)
vendor.js --> Any js imported from bower_components/node_modules (via ember-cli-build.js)
test-*.js --> Test loader/support for ember-cli if you've run "ember test"
Most files also come with sourcemaps as .map which you can exclude when publishing the site.
As you said, the dependencies you declare in your bower.json and package.json get downloaded to bower_components and node_modules
When you do you an ember build command what happens is that all the code you decide to import in your ember-cli-build.js will get dumped to the vendor.js / vendor.css file. All your application code (templates/routes/components/controllers/services) will be placed in my-app-name.js. All your application styles will go to the my-app-name.css file. All these files will be placed in the dist directory so that you can deploy it.
See this sample ember-cli-build.js file:
var EmberApp = require('ember-cli/lib/broccoli/ember-app');
module.exports = function(defaults) {
var app = new EmberApp(defaults, {
//CSS - Content of these files will go to "vendor.css"
app.import('vendor/css/bootstrap.css');
app.import('bower_components/datatables/media/css/jquery.dataTables.css');
app.import('bower_components/datatables/media/css/dataTables.bootstrap.css');
app.import('vendor/css/plugins/toastr/toastr.min.css');
// Javascript - Content of these files will go to "vendor.js"
app.import('vendor/js/bootstrap.js');
app.import('vendor/js/plugins/metisMenu/jquery.metisMenu.js');
app.import('vendor/js/plugins/toastr/toastr.min.js');
app.import('bower_components/datatables/media/js/jquery.dataTables.js');
return app.toTree();
};
The CSS imports will go to the vendor.css file and the JS imports will go to the vendor.js files.
The content of your my-app-name.css comes from the app/styles folder.
If you do ember build --environment production the ember build process will also fingertring your assets (append a hash at the end of the filename and generate an appropriate reference in the index.html file).
In my project I have directory with partials of javascript files.
In this directory I have files like:
_register.js, _user.js, _cart.js, _common.js
and I wanna make some full files
user.js must have _user.js, _common.js, _register.js
product.js must have _user.js, _common.js, _cart.js
and this should be compiled to 2 directories
dev/ and prod/
in dev I must have normal javascript and in prod I must have minified versions, how to get it with grunt?
I'm looking at this sample Angular application.
In the index.html file, there are lines like
<script type="text/javascript" src="/static/angular.js"></script>
However, upon closer inspection there are no folders in the project called static.
How does this work? How does angular locate these references?
Angular has nothing to do with this. It is the express server which takes care of the paths.
Take a look at server/config.js. You will see staticUrl: '/static' mentioned there.
Now open server/server.js (server.js is the script which runs before anything else runs in the app so all the configuration is done within this file) and on line 21 you will see require('./lib/routes/static').addRoutes(app, config);. This requires the static.js file which instructs the app to use /static (mentioned in the config.js file) as the path for static files such as CSS and javascript files.
This is a server side phenomenon. There is a middleware in this file server/lib/routes/static.js :
line : 9
app.use(config.server.staticUrl, express.static(config.server.distFolder));
What this does is : if any http request is started from config.server.staticUrl (whitch is /static for this app) the server tries to respond with the resource that are kept in a config.server.distFolder folder (which is client/dist for this app).
For example :
when you request to this url /static/angular.js the middleware tries to find angular.js file in client/dist/. Because client/dist directory is mapped to the url which starts with /static by the middleware.
When that HTML file is processed by the browser, the layout engine is making a separate HTTP request to the server to download the resource in question:
/static/angular.js
Since all of that is handled by the server routing mechanism there doesn't have to be a folder named static in client code. Your example is using Node.js Express routing which maps /static routes to actual physical paths.
Here is a piece of code that configures static routes:
https://github.com/angular-app/angular-app/blob/master/server/config.js
The important parts are:
staticUrl: '/static', // The base url from which we serve static files (such as js, css and images)
And the destination folder that /static maps to:
distFolder: path.resolve(__dirname, '../client/dist'), // The folder that contains the application files (note that the files are in a different repository) - relative to this file
Per the documentation the dist folder contains the Grunt build results, and if you take a look at the gruntfile you will find all the grunt configuration that makes this possible.
https://github.com/angular-app/angular-app/blob/master/client/gruntFile.js