I am trying to deploy a next js application to s3 bucket with dynamic routes and ISR implemented . I'm using some locally stored images from assets folder in public . But after deploying it to S3 , it's returning 404 for the images even after the build folder has all the image files . Can anyone help me with this issue ?
Related
My folder structure of Angular 10 project is given below
-Backend
-e2e
-node_modules
-src
I want to access backend/uploads/profilepic.jpg in the angular's index.html page. Simply, i just want to load an image file in the front end which is uploaded in the backend folders.
A static resource, like an image, is either bundled inside the angular webapp, by adding it to the assets folder (e.g. 'src\assets\images') and have that folder referenced inside angular.json:
"assets": [
"src/assets"
],
Or, make the backend serve that image and simply access it from the frontend like this:
<img alt="xyz" src="https://yourdomain/img_test.png">
If both the backend and frontend are hosted on the same domain, you can use relative path for the URL, i.e https://yourdomain can be omitted.
Finally, I found the solution. In order to access the files of the 'uploads' folder which is located in the backend folder. I have to make that folder static. for that in my server.js file, I have added below code
app.use('*/uploads',express.static('uploads'));
after that, I could load my image file from that uploads folder by calling
http://localhost:8090/uploads/image.jpg
I have angular 8 website which I build for production using following command:-
ng build --prod --configuration=production --base-href /eportal/*
I have created a folder "eportal" in hosting site and uploaded all components in the folder. It all worked fine and I can browse to the site using following url:-
www.abc.org/eportal/login
Is there any method or any command available in Angular 8 where I can keep my components in "eportal" folder in hosting site but access in this way(removing folder name):-
www.abc.org/login
Please help me on this.
First of all the —prod flag is an alias to —configuration=production. Please take advantage of this
Coming to the question in particular, use the following command
ng build —prod
There should be assets generated in your dist/[app-name]/ folder.
In your hosting site, instead of uploading those assets in the folder you created upload them outside.
ie. You would have uploaded your assets in public_html/eportal instead of that upload them in public_html directly.
I store user uploaded images inside /assets directory, so I serve them using require() which takes an uploaded image built inside _nuxt directory.
Now these uploads can be uploaded by users through the form and in production after every upload made I need to build them manually through the command line since the assets are not built on changes as it is in development.
Is there a sollution to build certain assets (uploaded images) after changes are made in production?
Currently all images in my react project are being served by the nginx server. These images are bundles with source. The source does not use require/import but instead uses url paths to render the images.
Now I want to serve these images from cloudfront, using S3 as my storage.
I plan to create a set of assets on S3 for every environment.
I can think of two approaches for doing this:
Approach 1. Using a script
create a script that runs after webpack bundling
the script will upload files to S3
paths in script and source will be deduced based on env variables
Approach 2. Create a webpack loader
update source to import/require images
create a loader that upload images to S3 and returns public path
Any opinions on these approaches or suggestions on a better approach ?
I ended up creating a webpack plugin that uploaded my static assets to S3.
I used a build parameter to deduce the base path of static assets in source and same param for deducing the upload path in plugin.
I am trying to deploy a static website to an s3 bucket. I built my site using the webpack template from vue-cli
When I build the site there is a note that:
Tip: built files are meant to be served over an HTTP server.
Opening index.html over file:// won't work.
Indeed there are no script tags in index.html but there is a comment that:
<!-- built files will be auto injected -->
If I add a path to the JS build file build/build.js I get that error that require cannot be found.
Is there a way to serve this site via s3? If so, how? Thank you