When building with gulp, there is a plugin to take html code from any source directory and embed it into a .js file and use $templatecache
the code snippet for this is
var partialsInjectFile = gulp.src(path.join(conf.paths.tmp,
'/partials/templateCacheHtml.js'), { read: false });
gulp.src(path.join(conf.paths.tmp, '/serve/*.html'))
.pipe($.inject(partialsInjectFile, partialsInjectOptions))
I was looking for something similar but for images. I have a bower component that has some image assets, but when I build my app for bower distribution, I lose the images (or the url for that image)
How do people repackage third-party assets for use in their packaged app ?
thanks
You have options to:
repackage assets by hand to your folder of images
modify gulp/grunt (whatever) build script to copy assets from bower to your selected folder
Whatever you choose to do, at the end of day, make a sprite image (image of all images) and reference that in your styles/htmls. (sometimes you have to override some third-party styles).
Anyway hacking can't be avoided to achieve synergy. ;)
Please check here: https://github.com/dabit3/angular-easy-image-preloader . If you load the images in your home controller or during initialization you should not have any delays anymore.
Related
I want to run a React app inside salesforce Lightning container. I built the app with npm run build, upload zip file but nothing works. All I can get is a blank page.
Build folder before zip
Zip and uploaded to Static resource
In deveoper console
<aura:application >
<lightning:container src="{!$Resource.Mirage + '/index.html'}"/>
</aura:application>
The preview page is blank and I don't know how to do it properly. I feel like it cannot load my resource.
Do I have to give up on CRA and build custom webpack?
Full disclosure: I never tried this. But it looks like you have to:
To reference a file in an archive, use the URLFOR function.
I am not 100% sure this is the answer.
Let me know.
I have a question regarding webpack and serving images.
I have a webpack config that build a React webapp and also serves .jpg files from a specific folder.
But what happens if from my webapp I download and add a new image to this folder?
Can I refresh webpack so that it will serve the new image and I will be able to import it with require.context?
Or, is it something that webpack is not supposed to do, and so I need to have this handled in the backend?
Thanks,
This isn't something that would typically be handled by Webpack. require.context creates references to all modules (or in this case images) in a directory that can be required with a request matching a regular expression, so if you were to use that, you'd need to recompile your app every time you add or remove an image from the folder.
It would be best to handle this in the backend, so you can just use the URLs to the images directly.
I am using react for my application. I have a div that I would like to have a background image. But I can't get it to show.
When I include it in the src folder as myapp/src/bgimage.png it works perfectly but I've heard that I should include it in a folder named images at the root level so it's myapp/images/bgimage.png, however this does not work for me and gives me:
You attempted to import ../images/bgimage.png which falls outside of the project src/ directory.'
Can anyone tell me the proper way to include image assets in reactJS?
public: anything that is not used by your app when it compiles
src: anything that is used when the app is compiled
So for example if you use an image inside a component, it should be in the src folder but if you have an image outside the app (i.e. favicon) it should be in public.
I would add that creating an "assets" folder inside the "src" folder is a good practice.
Use /src if you are using create-react-app
If you are using create-react-app, You need to use /src for the following benefits.
Scripts and stylesheets get minified and bundled together to avoid extra network requests.
Missing files cause compilation errors instead of 404 errors for your users.
Result filenames include content hashes so you don’t need to worry about browsers caching their old versions.
Also, if you are using webpack's asset bundling anyway, then your files in /src will be rebuilt.
You may create subdirectories inside src. For faster rebuilds, only files inside src are processed by webpack. You need to put any JS and CSS files inside src, otherwise webpack won’t see them.
See this link
No,
public folder is for static file like index.html and ...
I think you should make an "assets" folder in src folder
and access them in this way.
In this article, I mentioned that
Keep an assets folder that contains top-level CSS, images, and font files.
In react best practices we keep an assets folder inside the src which may contain top-level CSS, images, and font files.
According to the create-react-app documentation, regarding the use of the public folder:
Normally we recommend importing stylesheets, images, and fonts from JavaScript. The public folder is useful as a workaround for a number of less common cases:
You need a file with a specific name in the build output, such as manifest.webmanifest.
You have thousands of images and need to dynamically reference their paths.
You want to include a small script like pace.js outside of the bundled code.
Some libraries may be incompatible with webpack and you have no other option but to include it as a tag.
In continuation with the other answers I would further like to add that you should create an 'assets' folder under 'src' folder and then create 'images' folder under 'assets' folder. You can store your images in the 'images' folder and then access them from there.
As per my understanding I will go with easier way. If you use your assets from public folder, after build contents from public will be maintained as same. So, if you deploy your app, the contents from public folder will also be loaded while your app loads. Assume your build is 5 MB (4 MB assets and 1 MB src) the 4 MB will get downloaded first then follows the src contains. Even if you use lazy and suspense your app will be slow during deployment.
I am using webpack in my Project, here is the tools:
HTML as - jade-html-loader
CSS as - sass-loader
Project written with AngularJS - all with components & templateUrl (ngTemplate-loader in webpack)
So I got 1 JS file in the end of the process.
All this stuff pretty cool, but I think that it will be good to create static HTML files for clients...
It's going to Improve performance(caching / no need to draw DOM elements throw JS) and it's better for browser - to download few small files, not one big JS...
I am wrong? I can't find good tools that generates static assets(html, css)/cache files.
In the end of the line - I need to find an easy way to require Jade files as templates(templateUrl) into Angular Component, but files needs to be static - so I can see them in "Sources" of the browser...
It is hard to explain - so I hope you can understand me =(.
I been there and what i learned is angular cache template are faster then static. You can also copy static html files to dist map using npm cpy tool but i will highly recommend you to use angular cache template. There is this tool you can use for converting you jade to html.
You don't need to build only one single file you could build one for the vendors and one for your app this will keep your app more clean and you can also make one for the only templates which load in angular from cache on demand. I hope i could explain. webpack come with lot's awesome plugins witch can make life easier! good luck
After week I agree that cache templates works fantastic! =).
I used plugin "webpack.optimize.CommonsChunkPlugin" to generate 2 files for my app:
Vendor - all node_modules/bower_components/libs (js+css).
App - all source of app - controllers/models/business logic/views (js,css(sass),html(jade+ngTemplate for angular)).
My entry looks like:
entry: {
app: './src/app.js',
vendor: [
"angular",
"angular-route",
... and other libs...
],
},
And there I found really cool thing: html-webpack-plugin - this plugin creates index.html file and automatically attaches all your generated JS files.
Add Used "hash" string to my files.
My dist looks like this:
/dist
/index.html
/app.xxxxxxxxx.js
/vendor.xxxxxxxxxx.js
Little magic with webpack.optimize.UglifyJsPlugin to minify all files.
And now I got lightweight, small app that waiting for deploy! =)
I'm trying to figure out the right way to add any eventual new library (for example I need angularJS ui-router) in an onsen app.
I installed bower and then downloaded ui-router.
Since I do not know exactly the way Gulp is used, I got confused on what I'm suppose to do.
At the moment, I have the following folders:
bower_components, hooks, merges, node, modules, platforms, plugins, www
The index.html has the following reference:
What I suppose to do, now?
manually copy the ui-router js files in /www/lib/
configure gulp to copy the files automatically
change the script tag src and make the reference to the bower_component folder
change the Bower default folder
could you please guide me on sort it out?
tnx
At the end I chose the option 2.
I edited the file gulpfile.js adding a new custom task supposed to copy the missing bower libraries.
var mainBowerFiles = require('main-bower-files');
gulp.task('copy-bower-libs', function() {
return gulp.src(mainBowerFiles())
.pipe(gulp.dest(__dirname + "/www/lib/bower/js"))
});