I'm hosting an angular 2 app on s3. I'm using redirect rules on the s3 bucket, as defined in the answer.
<RoutingRules>
<RoutingRule>
<Condition>
<HttpErrorCodeReturnedEquals>404</HttpErrorCodeReturnedEquals>
</Condition>
<Redirect>
<HostName>yourdomainname.com</HostName>
<ReplaceKeyPrefixWith>#!/</ReplaceKeyPrefixWith>
</Redirect>
</RoutingRule>
</RoutingRules>
My angular app is then using html5 routing to match the redirect rules:
In app.module.ts:
RouterModule.forRoot(appRoutes, { useHash: true })
This combination works well, with the exception of displaying an image in the assets folder of the website. This is in my navbar:
<img src="./assets/logo.png" id="group-ed-logo" />
I am using the angular-cli, which has the following in the angular-cli.json:
"assets": [
"assets",
"assets/logo.png",
"favicon.ico",
"logo.png"
],
Edit: I have added logo.png to the above and put the logo.png file at the root directory of the src file and then used:
<img src="logo.png" id="group-ed-logo" />
The logo then displays. It would be tidier to have the images in an assets folder. However, it may be that the angular-cli currently doesn't support assets in folders when using html 5 routing.
If the file is in the assets directory, then I am getting a 404 url not found: "http://www.myurl.com/#/assets/logo.png".
For folders, in the bucket 'Create a folder' then add your files to that bucket.
Also, if you drag and dropped the whole dist folder, you may be looking at the inside of the dist folder on the AWS UI, not realizing that you are in the dist folder. Copy only the contents of the dist folder, not the dist folder. -- This happened to me.
Related
I am using react and laravel and the image save in backend folder how I can display it in the frontend ?
I use this path
<img src="http://localhost:8000/public/avatar/images.png"/>
but do not work
the /public folder is usually the web root - so you may want to try -
<img src="http://localhost:8000/avatar/images.png"/>
Assuming you have moved the uploaded file to your applications "public" path.
The root folder for laravel is usally the folder above the public web root.
Better also not include the host
<img src="/avatar/images.png"/>
How can I make the {domainname}.com/public route of my React app just serve the files in my /public directory? I am using react-photo-gallery which to my knowledge only allows the use of full urls (not the relative ones that are used inside components).
An example of this working would be that if I have a file image.jpg inside my /public folder, I could access it by going to {domainname}.com/public/image.jpg.
Is there a way how to bundle Web App Manifest (manifest.json) and favicons with webpack?
I'm using React. Until now, I included all my favicons, including manifest.json, directly in index.html in public folder (so it didn't go through webpack). However, I needed to dynamically load favicons and so I decided to move the code and favicon images into React application and inject the tags dynamically. But I don't know how to deal with manifest.json because there are paths to favicons and the favicons when included in React app and bundled with webpack have random hashed names.
Any ideas?
You can try to add directly in your webpack configuration
plugins: [
// ...
new HtmlWebpackPlugin({
favicon: 'admin/src/favicon.ico',
inject: true, // Inject all files that are generated by webpack
)}
],
Within a new SailsJs application I'm trying to serve an angular app from the assets folder. Considering assets/admin/index.html I can access localhost:1337/admin, however, none of the additional js files or sub-directories can be accessed. I've even checked the .tmp/public folder and everything is copying over correctly but when I try to refer to any file within the admin folder other than index.html it can not be found.
Referring to angular module in index.html
<!--Sailes IO Library-->
<script src="/js/dependencies/sails.io.js"></script>
<!--Vendor Scripts-->
<script src="/js/angular-animate.js"></script>
<script src="/js/angular-aria.js"></script>
<script src="/js/angular-material.js"></script>
<script src="/js/angular-messages.js"></script>
<script src="/js/angular.js"></script>
<script src="/js/release/angular-ui-router.js"></script>
<!--Admin Application Definition-->
<script src="/admin/app.js"></script>
<script src="/admin/config/router.js"></script>
However, app.js is not being served!
Can I not do it this way? How can I access my angular application files from the admin folder?
To load an angular application in sails.js you need to serve the index.html file from the views folder.
so in you config/routes.js
'/': {
view: 'homepage'
}
this means when you hit the root of you application then homepage.ejs from the views folder is served
copy the contents of assest/admin/index.html file in homepage.ejs and if necessary check that all the link and script tags have the file path relative to assets folder.
once the homepage is served you can use angular ui router for routing purpose
Note--
change your
localhost:1337/admin to
localhost:1337
After reading the documentation a little more in-depth, sails will also serve index.html files found in the assets folder. So I created a new folder, inside that folder I created a new index.html and app.js file, and then lifted. My index.html file was then available at a url that matched my folder name. My folder was called "admin" so navigating to localhost:1337/admin loaded my index.html page.
As far as serving the other dependencies, I used grunt-bower and a new grunt task to start serving my bower_components over to my assets/vendor folder.
I am fairly new to the mean stack, and when I switch from importing angular from cdn to bower in layout.jade my app stopped working. I am getting a "ReferenceError: angular is not defined" and 404s for all the sources I am trying to import.
This is how my layout.jade looks(I also tried ../ and ../../ in front, but got the same results):
doctype html
html(ng-app='RIThym')
head
title= title
link(rel='stylesheet', href='/stylesheets/style.css')
script(src='bower_components/angular/angular.js')
script(src='bower_components/angular-resource/angular-resource.js')
script(src='bower_components/angular-route/angular-route.js')
script(src='bower_components/angular-ui-map/ui-map.js')
script(src='/javascripts/RIThym.js')
body
block content
This is my project structure:
bin
bower_components
node_modules
public
routes
views
layout.jade
app.js
package.js
I assume that public_html is root directory for your webserver. In that case server doesn't have access to bower_components directory. And won't return anything from bower_components.
To solve this move bower_components directory to public_html.