Is it possible to bundle external resources linked with absolute URLs to the dist folder with Parcel?
This bundles and hashes fine
<img src="./image.jpg" /> to <img src="image.f83j2f.jpg" />
What i'd like to do
<img src="http://example.com/image.jpg" /> to <img src="image.f83j2f.jpg" />
I know this is an expected behaviour but my reasoning is that I want to use an asset CDN like Cloudinary or Uploadcare for the image transformations, then copy them to the build directory.
I'd love to replicate the Gatsby image functionality where transformations are done during build but i cannot find anything to do image transformations locally with Parcel.
Is there something I can trigger externally before the Parcel bundler to download the files to the src and update references to the local file? Any ideas would be much appreciated
Related
I'm crating application in angular with SSR
How do I apply <link rel="preload" href="/styles.css" as="style" /> to head section or Link header in order to preload/prefetch whole styles.css file?
Using plain styles.css is not enoug as production build generate file that contains random characters like styles.7541caaaab536370.css (different in every build)
Googling about preloading and prefetching in angular only results in preloading components/modules and I'm out of ideas
You can include the styles.css file in the assets folder. This will prevent the angular build process from "fingerprinting" the file and the resulting build file will simply be named styles.css allowing you to reference it directly from your index.html.
I am using vite purely as dev server with a backend server that does the file serving for me and has no connection to vite itself. My vite application lives under nested path. Thats why I set the base-url as specified in the config to '/my/path/'. This works well and everything is served correctly.
Once I run build, it creates a dist folder with a manifest file. My index HTML that is served by the backend server either includes the vite devserver in dev more or loads the main.ts as specified by the maninifest.json { "src/main.ts": { "file": "assets/main.b3ed3483.js", ...}}. Therefore my index HTML looks somewhat like this:
<?php if($dev): ?>
<script type="module" src="http://localhost:3000/#vite/client"></script>
<script type="module" src="http://localhost:3000/src/main.ts"></script>
<?php else: ?>
<?php $entry = parseJson('dist/manifest.json'); /* pseudocode */ ?>
<link rel="stylesheet" href="/my/path/dist/<?= $entry.css[0] ?>" />
<script type="module" src="/my/path/dist/<?= $entry.file ?>"></script>
<?php endif ?>
Now, I have the problem, that whenever a module is imported, it tries to load it from /my/path/assets instead of my/path/dist/assets. I tried changing the basepath to /my/path/dist/ but now obviously the path arent resolved in dev correctly. What do I have to do to make this work?
I am not sure if I completely understand the src paths in your script tags but I think this should work, though you might need to make some changes to make your src paths match.
Option one: If you are using linux, I would create a symbolic link from /my/path/ to/dist/assets/ e.g. ln -s -r ./dist/assets/ assets (-s for symbolic link and -r for relative links). This will provide two paths to the same directory, one from /my/path/assets and one from /my/path/dist/assets/.
Option two: use a relative base path i.e. set base in your vite config to ''. Note: in vite 2.x there is an issue where if you have multiple entry points the asset path will be incorrect. There is a fix merged for vite 3.0.
where I link index.js
<script src="/assets/js/index.js"></script>
Folder Directory is such
assests
-css
--style.css
-js
--index.js
enter image description here
Error Im getting
index.html:25 GET file:///assets/js/index.js net::ERR_FILE_NOT_FOUND
I guess you are using an express app(by the tag in question). The static resources such as your javascript, css, images, etc. should be inside the public folder which gets served on running the application. Could you try moving the assets folder inside the public folder and then have a script tag pointing to that resource.
Maybe it helps to remove the first slash:
<script src="assets/js/index.js"></script>
Or startend with a dot
<script src="./assets/js/index.js"></script>
I need to display related image in ngFor
Like
<div class="row" *ngFor="let name of cheaterNames">
<div class="col-4">
{{ name.name }}
<img src="{{name.path}}" class="rounded mx-auto d-block">
</div>
</div>
This is how the data look like in database
_id OgjectId("566666tyyhhhh")
name Laravel
path uploads\logo.png
This how my project folder looks like
Project
client
about
about.component.html // this the html i used to display images
about.component.ts
dist
e2e
node_modules
server //this is where express/nodejs
controllers
models
routes
app.ts
uploads // this is where the images is stored during file uploads
logo.png
other imgs...
Any ideas for this? The image does not show up and shows 404 error
Your paths will all be relative to the base content directory for your web server which is probably not your project's home directory. Basically, the uploads directory is not within your base content directory, so your image files will not be found by the server at runtime. You need to determine where your base content directory is (express server configuration) and ensure that your uploads directory is under that directory.
For example, if you're serving up a build from the dist directory, uploads should be under dist;
Having a lot of trouble understand how paths are treated at various points in the configuration and usage of grunt-usemin.
I've got the following repo layout, where the repo root will also be the web app root:
/dashboard/index.html
/Gruntfile.js
/vendor/...some 3rd party CSS and JS...
So the index.html file -> somedomain.com/dashboard/index.html.
The index.html file includes some CSS and JS assets from the /vendor folder. I have grunt configured to put build output in a build folder:
/build/dashboard/index.html
In the index.html file, I have usemin blocks wrapped around all the CSS link and JS script tags:
<!-- build:css(.) app.min.css -->
<!-- build:js(.) app.min.js -->
I had to specify an "alternative search path" with "(.)" so that a script tag for "/vendor/backbone.js" will find it in the right place. Until I did that, it was looking for /dashboard/vendor/backbone.js.
I want the output of processing the CSS/JS assets to be output to build/dashboard/app.min.css and build/dashboard/app.min.js, and included by index.html using a simple relative "app.min.css/js" path.
The problem is, grunt-usemin seems to be using the "app.min.*" path I'm specifying for both contexts in a way that makes it impossible for them to work together:
1) It treats the path as relative to the build directory for purposes of creating the file; the files end up in build/app.min.css and build/app.min.js.
2) It treats the path as relative to the index.html file for purposes of generating the new link/script tags; the browser loads build/dashboard/index.html, which then tries to load "app.min.css", which maps to build/dashboard/app.min.css.
Is there a solution?
I'm really late to the party, but I was also extremely frustrated by this issue and didn't find any satisfying fixes or work arounds. So I worked out some pretty dirty tricks to hopefully better work around this issue. So I'd like to share it with you.
First of all, let's quickly review why this issue happens. When usemin generates output JS/CSS files, it performs a simple path join between your dest directory and the output directory you specified in your usemin block. So if dest is build and usemin block is
<!-- build:css(.) app.min.css -->
then it joins build with app.min.css to spit out the output file at build/app.min.css
But then the usemin task simply replaces the path in your block to you end up with
<link rel="stylesheet" href="app.min.css"/>
which is now linking the wrong directory since your HTML file is under build/dashboard/index.html
So my work around revolves around this idea: what if dest directory is relative to where the HTML file is located? Wouldn't that solve this issue? So given the above example, what if dest is build/dashboard? You can see that it will spit out the output file location and link it correctly. Keep in mind that you are supposed to create a copy task to copy over your HTML files, so make sure your HTML file is copied to build/dashboard/index.html as before.
Of course, the next question would be what if I have HTML files in multiple directories? Wouldn't that be super painful and unintuitive to create a useminPrepare target for each directory, where HTML files could reside? This is why I create a very special grunt task just for working around this issue while I was creating my own grunt scaffolding. I call it useminPreparePrepare Yes, it's deliberately named stupidly, because I'm hoping to remove this thing altogether one day when usemin people make an actual fix for this issue.
As its name suggests, this is a task to prepare useminPrepare configs. It does exactly what I described above. All of its configs mirror useminPrepare configs (in fact, most of them are simply copied over to useminPrepare), with one exception: you need to specify a src directory to identify the root directory of all of your sources so that it can generate relative path to the HTML files. So in your example src: "." will be fine. To use useminPreparePrepare, import it into your build first (you may want to just copy and paste my code, I don't mind), rename your useminPrepare task to useminPreparePrepare and add src property that I just mentioned. Make sure you run useminPreparePrepare with whatever target you like, then immediately run useminPrepare without specifying target so that all of its targets are run. This is because useminPreparePrepare will generate one target for each directory relative to where HTML files are found and copies over your configs for the useminPreparePrepare target your ran. This way, your config can simply look for all HTML files.
Example
"useminPreparePrepare": {
// Search for HTML files under dashboard even though src is .
// because we want to avoid including files generated under build directory.
html: "dashboard/**/*.html",
options: {
src: ".",
dest: "build",
...
"usemin": {
html: ["build/**/*.html"],
...
"copy": {
html: {
files: [{
expand: true,
src: ["dashboard/**/*.html"],
dest: "build"
}
]
},
...
Hope this helps! Have a good day.
EDIT: I realized that given the above example, if you actually include all HTML files from current directory, you will include the generated HTML files too if they are not cleaned ahead of time. So either you clean them ahead of them or look under dashboard directory. I'd recommend separating src and dest directories so that config could look a lot more intuitively.
I don't like it, but the only way I've found to make it work so far is to specify a full path:
<!-- build:css(.) /dashboard/app.min.css -->
<!-- build:js(.) /dashboard/app.min.js -->
The leads to the app* files being in /build/dashboard alongside index.html (which is where I want them), and index.html ends up with the following tags:
<link rel="stylesheet" href="/dashboard/app.min.css">
<script src="/dashboard/app.min.js"></script>
It means the dashboard app is now acutely aware of it's location within the whole, so you can't just rename or relocate it's position in the tree without updating those paths.