My default file in nginx https://github.com/NatuMyers/nginxSSL-setup/blob/master/default
I used that, then my node app doesn't allow Angular to work, it just serves the static index page, but the routing etc doesn't work. When it was straight http it worked.
In my file with the node app I have app.js, node modules, and /public among other things.
in public I have angular packages, index.html, and partials.
When I call node app.js, it just serves index.html without the functionality. Here is a complete github of the set up minus the nginx content: https://github.com/NatuMyers/A.M.E.N.SQL-Stack
This is ubuntu, with Nginx on the digital ocean LAMP stack
You are including angular.js with
<script src="http://code.angularjs.org/1.2.13/angular.js"></script>
When your browser is loading assets for a https website it will block http only scripts. So you should change your link to have no protocol, just // and the browser will insert whatever the rest of the page is loaded with.
<script src="//code.angularjs.org/1.2.13/angular.js"></script>
Related
I have a Spring Boot backend and ReactJS front end, all builds and runs fine until I deploy to a tomcat external server.
In the index.html page which gets generated via the npm run build it is creating paths as below (this is part of index.html):
<script src="/static/js/2.507eac03.chunk.js"></script>
So, when the index.html is loaded, it cannot locate /static/js/2.507eac03.chunk.js because it is missing my application context folder (where my webapp is) - is this something in Spring boot I need to do in order for it to work?
PS. Removing the / makes it work as it then picks up my application context folder:
<script src="static/js/2.507eac03.chunk.js"></script>
Thanks
There is a neat and simple HTML solution for your problem:
<base href="/your/context/location" target="_blank">
If the tag above is in your head, then you can refer to locations in the manner you desire.
Our React app is served from a static hosting using S3 and CloudFront.
We configured S3 and CloudFront to add CloudFront-Viewer-Country in the return header of each request made to resources in it. So for instance, our index.html makes a call to get the .js bundle from CloudFront, the returned header would include: cloudfront-viewer-country: US in my case.
My goal is to have the React app "wake up to life" already knowing the location of its user. I realize I can probably add some javascript to the index.html to keep/store it somehow so that the React root component can pick up on that and pass it on to wherever it needs to be (probably the redux state). But then I ask myself, how do I tap into the response header received when the <script> tag finished loading the bundle in order to extract the custom header from it?
the index.html is pretty straightforward. Its body looks like this:
<body>
<div id=root></div>
<script type="text/javascript" src="/myBundle.ac9cf87295a8f1239929.js"></script>
</body>
What do you recommend?
It isn't possible to access the headers from the page load or script load. You will have to make a separate request to access the headers.
You could also use browser's locale (navigator.languages) if you need this information for localization.
I have a react application build with create-react-app. Its using octoberCMS as the backend fetching data using Axios calls from the frontend. Till now I was developing keeping the build content of react inside a directory named 'react' in the root directory of octoberCMS installation. Hence the URL I was hitting was http://example.com/react/.
The problem is now I am done with the development phase and look forward to deployment. But I want my front-end to be served at http://example.com and backend to be served at http://example.com/backend (backend served as I want). How can I achieve this? I am fairly new to both frameworks.
I have tried keeping the build content along with the rest of the octoberCMS
First build your react app that will give you vendor.js[third party scripts] and your app.js[your actual app]
put them in to theme directory assets something
Then In Ocotber CMS make page with URL /:url? and paste your index.html content there.
it will be your root div and including js html, change path for js which points to the build js which you put in theme directory.
now what happens when anybody come to site
- we are serving same content as we do in dev build
- index.html with root tag and needed js
Now if use hit any other url like https://www.example.com/test/etc it also will be catch by /:url? (and all other requests) and home page served and our react app will work as we needed.
if any questions please comment.
Problem
After setting a base tag to run Angular 1.x in HTML5 mode, the browser (Chrome) makes requests to the wrong path for scripts when accessing the app by navigating directly to localhost:3000/resource/id.
Details
I have an Angular 1 app that I have recently set to run in HTML5 mode, like so:
$locationProvider.html5Mode(true);
I have included a base tag in the head of index.html like so:
<base href="/">
I have set up my express routes so that a request for (for example) http://localhost:3000/album/38ad87f will return index.html, like so:
.use('/', express.static(__dirname + '/crate-frontend/app'))
// Playlist endpoints
.use('/api/playlists', playlistRoutes)
// Album endpoints
.use('/api/album', albumRoutes)
// Artist endpoints
.use('/api/artist', artistRoutes)
// Track endpoints
.use('/api/tracks', trackRoutes)
// User endpoints
.use('/api/user', userRoutes)
// Discogs proxy endpoints
.use('/api/discogs', discogsRoutes)
// Youtube proxy endpoints
.use('/api/youtube', youtubeRoutes)
// Search endpoints
.use('/api/search', searchRoutes)
// For serving up crate-frontend/app/index.html
.all('/*', function(request, response){
response.sendFile(__dirname + '/crate-frontend/app/index.html' );
})
Now, when I go to the home page, and navigate around, everything works fine. BUT if I refresh the page that is not the root OR a copy/paste a URL like http://localhost:3000/album/38ad87f into a new window, it breaks. I can see that it receives index.html, but then when the browser requests each of the linked scripts, for example:
<script src="app.js"></script>
it actually makes a request to http://localhost:3000/album/app.js, which returns index.html.
Can someone tell me what I've missed / am doing wrong?
Try to include your ressources with an absolute path and you will be fine for all time.
<script src="/app.js"></script>
I have just generated an Spring/Angular app using JHipster.
I successfully accessed the home page by using this URL: http://localhost:8080 which redirects to http://localhost:8080/#/ and the index.html file is loaded properly.
I am not sure how Angular and the browser determine that they need to load the index.html file.
Where is this configured in a JHipster app?
edit: Is there some "default home page" configuration somewhere?
I successfully accessed the home page by using this URL:
http://localhost:8080 which redirects to http://localhost:8080/#/
The request to the server is for "/" and index.html is served. The "/#/" is all client side stuff (Angular routing) that happens when the javascript on the index.html page fires up, not the result of a server side redirect.
Where is this configured in a JHipster app?
This is a Spring Boot default, not something specific to JHipster. From the Spring Boot docs:
The auto-configuration adds the following features on top of Spring’s
defaults:
Static index.html support.
By default Spring Boot will serve static content from a directory
called /static (or /public or /resources or /META-INF/resources) in
the classpath or from the root of the ServletContext. It uses the
ResourceHttpRequestHandler from Spring MVC so you can modify that
behavior by adding your own WebMvcConfigurerAdapter and overriding the
addResourceHandlers method.
I don't think this is configurable through a property file or something similar, you'll have to write some code. See the answer to this question.