Webpack and assets/dist folder - url

I'm using Angular5 and webpack for generate the dist folder.
For generating the assets folder i'm using the "copy-webpack-plugin". It copies the assets folder from /src/assets into /dist folder.
The problem is: all the path used by a admin console template of my src code uses relative paths starting from "assets/..." and the server include /dist/assets. All static resources will throw 404 not found.
What is the best way to include an assets folder into a dist folder?

I would recommend using the file-loader designed for this very purpose.
Once you have it configured in your webpack.config.js you can import paths to your files for use in JavaScript, as well as HTML templates if you're also using the html-loader.
const myImageUrl = require('./path/to/an/image.png')
doSomething(myImageUrl)

Related

Include non-electron folder as part of the NSIS installation

I've been trying to add additional functionality to the electron installer, where I copy some files that are packaged inside the installer, but I receive a non-descriptive error when I try to compile my electron project to create the installer i.e. I get:
* writing effective config
* packaging
* building
x [object Object]
Here is what my script looks like:
!macro customInstall
Rename "$APPDATA\myfolder\img" "$APPDATA\myfolder\img-old"
SetOutPath "$APPDATA\myfolder"
File /nonfatal /a /r "additional_files\*"
CreateShortcut "$SMSTARTUP\mylink.lnk" "$INSTDIR\mylink.exe"
!macroend
Basically everything works except the file copy part. When I remove that part the project builds and compiles into an installer with no problems.
I've also tried to use CopyFiles instead of SetOutPath and File and it works as expected when I place the additional_files folder into the same folder as the installation (dist folder), but I want the folder to be packaged inside the installer. However, I cannot get the additional_files to be packaged with the installation.
I believe it's a location issue, that is, that the NSIS script cannot locate the additional_files/ folder. I've tried modifying the package.json file by adding to the files section the additional_files/ folder and placing it in the root of the project.
I've even tried placing it in the build folder where my installer.nsh script resides, but with no luck.
File looks for files relative to the directory where the .nsi is by default. /NOCD can be used to prevent that but I'm not sure if electron uses that switch.
!cd can be used inside a script to change the directory but I'm not sure if that is going to help you much in this case unless you are willing to use a absolute path and in that case you could just use the absolute path with the File instruction instead.
If you only know where your .nsh file is I suppose you could try File /r "${__FILEDIR__}\additional_files\*"
if you are using electron-builder you have two options inside the settings
extraResources this will copy files into the $INST_DIR/resources folder in your app (this is where the app.asar file is too), and you can access via process.resourcesPath, ex:
extraResources: [
{ from: './dist/ThirdPartyNotices.txt', to: 'ThirdPartyNotices.txt' },
]
extraFiles this would do the same but place the files into the $INST_DIR root folder of your installation ex:
extraFiles: [
{ from: './distrib/mytool.exe', to: 'mytool.exe' },
],
to get the root folder you can use something like remote.app.getAppPath().replace('resources\\app.asar', '').replace('resources/app.asar', '');
all info on: https://www.electron.build/configuration/configuration#overridable-per-platform-options

How do I use Bower components in codekit

I have installed into a new project in codekit the following components:
jquery
animate.css
normalize
Modernizer
I understand that keeping these components in the bower directory is recommended so these files are easily updated. However, do we link to these in our html files directly? My sass files get compiled and outputted to assets/css but there aren't any sass files in the bower components and creating them in the original folder would, I assume, get overridden if I was to upgrade. Seems very odd to me to upload the entire bower_components file to the production server with all the dependent files. I have been building site for a long time without all this node, git, grunt, bower, et al stuff. I see the value in it, but I'm having a tough time getting up to speed. Any help sure would be appreciated.
In most cases, you would want to include the third-party components (e.g. css, javascript, ... files) within your own master css or javascript file and then minimize that file for production. For example, my folder structure looks like:
bower_components/
...
release/
css/
styles.min.css
img/
...
js/
scripts.min.js
src/
images/
...
scripts/
scripts.js
styles/
styles.less
templates/
...
And then, within styles.less, I might have:
#import (less) "../../bower_components/normalize-css/normalize.css";
Or within scripts.js I could have:
//#codekit-prepend "../../bower_components/jquery/dist/jquery.js"
I have CodeKit set to generate the minified versions in release/ from those files. The only files that go to production are all of the files in the release/ folder.

Can't link to my bower_components folder using google web-starter-kit

My problem is I can't link to the bower_componets folder.
I am using web-starter-kit, and basically took those files into my dev environment/folder structure. I know that defeats the purpose of WSK, however I created a gulp work flow and wanted to try it out.
This is what i get in the console.
And this is my folder structure...
I am positive based on where the 'bower_components' folder exists this should be the path.
<script src="../../app/_bower_components/flowtype/flowtype.js"></script>
e.g. Start out of in development, then out of builds and dive into 'app'
Is there a bower config file that I am supposed to create?

Dart: structuring assets

I just read Dart's article on Assets and Transformers and want to make sure I am understanding the correct way of structuring your asset directory.
Say my project name is MyApp, and it should produce - after cross-compiling - a JavaScript file called myapp.dart.js. Here is how I have the asset directory set up:
MyProject/
asset/
bootstrap/
css/
...
fonts/
...
js/
...
myapp/
... myapp's CSS and images
...other package's assets
web/
...
Am I doing this right? Or should I be placing my assets some place else, or in a different convention?
Yes it's fine this way.
The asset directory is currently only supported by pub serve and pub build but not by the web server integrated into the Darteditor.

hibernate.cfg.xml path

I have a java project and I am using hibernate.The thing here is I want to place the hibernate.cfg.xml file outside "src" folder, but when I am configuring this file it is showing FileNotFoundException. If I put it inside src folder its ok. But I want to separate the java src and all config file in separate folder.
root
|____src
|____conf
|____mapping
|____(all xml file with hibernate.cfg.xml)
SessionFactory _sessionFactory = (new Configuration()).configure("./conf/mapping/hibernate.cfg.xml").buildSessionFactory();
Its showing exception......
Add conf/mapping directory to your CLASSPATH and load the configuration file
new Configuration().configure("/hibernate.cfg.xml").buildSessionFactory();
or just
new Configuration().buildSessionFactory();
as this is the standard name.
Regardless there would be no ./ at the beginning of the resource path.
What you want to do is
include conf/mapping in your project build path(With Eclipse properties->javabuild path->source->add Folder)
then no need to precise the hibernate config file in your code
new Configuration().buildSessionFactory(); is enough
This manipulation is simple and works like a charm.

Resources