I made an app using Django REST Framework as the backend and React as the frontend. It works on localhost.
Now I am trying to deploy the app to AWS.
When I follow the tutorial for deploying the Django app on AWS Beanstalk it worked for the API. I am able to use Postman and access the endpoints.
When I go to the URL, I get 404, debug is on:
Using the URLconf defined in dca.dca.urls, Django tried these URL patterns, in this order:
^api/dcasetting/$ [name='dcasetting-list']
^api/dcasetting\.(?P<format>[a-z0-9]+)/?$ [name='dcasetting-list']
^api/dcasetting/(?P<pk>[^/.]+)/$ [name='dcasetting-detail']
^api/dcasetting/(?P<pk>[^/.]+)\.(?P<format>[a-z0-9]+)/?$ [name='dcasetting-detail']
^$ [name='api-root']
^\.(?P<format>[a-z0-9]+)/?$ [name='api-root']
api/auth
api/auth/register
api/auth/login
api/auth/user
api/auth/logout [name='knox_logout']
The current path, index.html, didn’t match any of these.
EDIT:
When I go to the base url:
It seems the http://django-env.eba-3.us-west-2.elasticbeanstalk.com/ is trying to and succeding in loading the correct file: http://django-env.eba-3.us-west-2.elasticbeanstalk.com/static/frontend/main.js. I can see the template code on inspecting the page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fort</title>
<link rel="stylesheet" href="https://bootswatch.com/5/cosmo/bootstrap.min.css">
</head>
<body>
<div id="app"></div>
{% load static %}
<script src="{% static "frontend/main.js" %}"></script>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.5/dist/umd/popper.min.js" integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.min.js" integrity="sha384-ODmDIVzN+pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK" crossorigin="anonymous"></script>
</body>
</html>
Then it runs into a 404 when loading the main.js script. Would this be a path related error? Anyway to check this?
Then I tried one of the paths being tried above:
api/auth/login
This gives me error:
Request Method: GET
Request URL: http://django-env.eba-3.us-west-2.elasticbeanstalk.com/api/auth/login
Django Version: 4.0.6
Exception Type: TemplateDoesNotExist
Exception Value:
rest_framework/api.html
Exception Location: /var/app/venv/staging-LQM1lest/lib/python3.8/site-packages/django/template/loader.py, line 19, in get_template
Python Executable: /var/app/venv/staging-LQM1lest/bin/python
Python Version: 3.8.5
Python Path:
['/var/app/current',
'/var/app/venv/staging-LQM1lest/bin',
'/var/app/venv/staging-LQM1lest/bin',
'/usr/lib64/python38.zip',
'/usr/lib64/python3.8',
'/usr/lib64/python3.8/lib-dynload',
'/var/app/venv/staging-LQM1lest/lib64/python3.8/site-packages',
'/var/app/venv/staging-LQM1lest/lib/python3.8/site-packages',
'/var/app/current/dca']
The folder structure:
my_app
|-.ebextensions
|-.elasticbeanstalk
|-MyApp
|-accounts
|-MyApp
|-MyAppsett
|-frontend
| manage.py
| db.sqlite3
|-node_modules
| .babelrc
| package-lock.json
| package.json
| pipfile
| pipfile.lock
| requirements.txt
| webpack.config.js
I am not sure what to try next.
Related
My app works great in the dev environment, where I use proxies. After I pushed to heroku (production), I saw a blank screen. In Chrome Developer Tools, I saw the following two errors:
Unexpected token. manifest.json:1
Uncaught SyntaxError: Unexpected token < main.bac17543.js:1
When i click on these two errors, I saw that the manifest file, the main.css file, and the main.css file all have the HTML file as the source. It fails to load the other files from the client/build/index.html.
Okay, so experimenting with this, I found when I run "npm run dev," it works great on the client port. However, there's an error when the app starts on the server port and serves the index.html file with the following express code shown in the course:
if (process.env.NODE_ENV === 'production') {
//Express will serve up production assets like main.js file
app.use(express.static('/client/build'));
//Express will serve up html file if it doesn't recognize the route
const path = require('path');
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname, 'client', 'build', 'index.html'))
});
}
This code successfully serves up the html file. But all other files linked within fail.
After several reloads to Heroku, I reproduced the error by taking out the production if statement and navigating to localhost:5000 (sever port). After running "npm run build" from the client folder, I received the same errors when "npm run dev" is run. Even if i switch "build" to "public" to run index.html before "npm run build," I receive the same errors. To test if the html file was called, I wrote <h3>testing html</h3>, and the HTML successfully rendered to the screen as the only content. But it seems that manifest, favicon, css files, and javascript files were not found, returning the original index.html file and throwing an error at the beginning of the file: "<."
Here is my index.html file under the build folder:
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="theme-color" content="#000000"><link rel="manifest" href="./manifest.json"><link rel="shortcut icon" href="./favicon.ico"><title>Compass</title><link href="./static/css/main.c092d6b6.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script type="text/javascript" src="./static/js/main.bac17543.js"></script></body></html>
And here it is in the public folder:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<title>React App</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<h3>this HTML is called, but the javascript file fails when served from Express</h3>
<div id="root"></div>
</body>
</html>
I've tried both absolute and relative paths in the href and src attributes in both folders. Yet still no dice. I'm pretty confident the paths are right because they work otherwise, but for some reason it's not reading correctly. The build paths are server/build/index.html, sever/build/static/css/main.d3f5fbbb.css, and server/build/static/js/main.69f468ec.js.
Perhaps there is some configuration issue? I haven't touched configuration for webpack or anything. I'm just not sure why the buck stops with the HTML file when serving from express. Can you please advise?
I had this same exact issue. I was able to solve the problem by setting my homepage in my react package.json from the github page that was auto filled to the heroku url since that was what was serving the static files.
Found this info to be helpful and led me to checking homepage property in my package.json
https://github.com/facebook/create-react-app/issues/527
Hope this helps or someone else that is trying to deploy express and react from one repo to heroku.
I'm trying to build my react app using react's build tool. When I try to "npm start", the app works fine.
npm start
On http://localhost:3000 => I can access the application.
But when I build the application and try to access "index.html" file on the build folder, it doesn't work and I encounter with a white blank screen.
npm run build
http://myreact-app/build/index.html => White blank screen.
This is the build folder which has been created after run npm run build.
And this is the index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="/manifest.json">
<link rel="shortcut icon" href="/favicon.ico">
<title>React App</title>
<link href="/static/css/main.9a0fe4f1.css" rel="stylesheet">
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script type="text/javascript" src="/static/js/main.46d8cd76.js"></script>
</body>
</html>
Am I doing something wrong? Can't I access the built index.html file on my apache web server?
Probably you've not noticed yet but I don't think your html file is able to import css and script files correctly. When I look at your file structure, I see the everything about build is under the build folder. But in your html file, there are slashes ("/") before the file paths. That's why browser is looking for those files under the parent of the "build". Try to remove slashes.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="/manifest.json"><link rel="shortcut icon" href="/favicon.ico">
<title>React App</title>
<style></style>
<link href="static/css/main.65027555.css" rel="stylesheet">
</head>
<body
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script type="text/javascript" src="static/js/main.316f1156.js"></script>
</body>
</html>
The above problem can be overcome if you add
"homepage":".",
in your package.json. This is not official but a good hack to follow.
https://github.com/facebookincubator/create-react-app/issues/1487
To fix this problem go to your build folder then you will see manifest.json file, open it and you will see your manifest.json have:
"start_url": ".",
change it to
"start_url": "/",
there is alternative way to fix the problem:
before your react project build go to your package.json file and specify homepage property with . value or maybe with your site base url, see example:
{
....
"homepage": ".",
......
}
you should try use the serve package here to run single page app.
npm install -g serve to install globally
serve help to see help texts
serve --single build to serve single page app. I server will be started from which you can access your react app
If nothing of above works. Maybe the problem is that you are using react-router-dom and the routes needs a special compilation generating individual htmls for each page that exists in your router config.
Ref:
I'm using create-react-app and I need to open build/index.html in browser directly without a server
In summary you need to use <HashRouter> instead <Router> and a <Switch> wrapper to your routes. For example:
<Switch>
<Route exact path='/' component={WelcomePage} />
<Route exact path='/game' component={GamePage} />
</Switch>
Consider that your routes will change to:
http://localhost:3000/#/ -> Root page
http://localhost:3000/#/game -> Other page
You need to install local server plugin/extenstion.
If you are vscode user then search live server extension and install it. Then there will be "Go live" option in bottom of your editor.
For other editor user (atom/sublime) search for live server plugins.
Sometimes the reason that the content is not served is because the command of "serve -s" was executed from outside of the build directory. The correct way is to go into the build directory then execute "serve -s" from therein.
I had an index.php in the webroot which prevented my app from running index.html.
I use HashRouter instead BrowserRouter & also need to add /# infront of every url like this:
href={`/#/blogs/${slug}`}
this works for me , thanks
Try using <HashRouter> instead of <Router>, and don't forget to import {HashRouter}.
I've generated a Spring Boot application by using Spring Initializr. This is the screenshot of my resources directory.
I added Angular dependencies by using <script> tag in index.html
<!DOCTYPE html>
<html lang="en" ng-app="companyApp">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-resource.min.js"></script>
<script src="app.js"></script>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
Hello, Spring!
</body>
</html>
My main application class is configured with #SpringBootApplication annotation.
Once I open the page, I get this error in the console
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.0/$injector/modulerr?p0=companyApp&p1=Error…ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.0%2Fangular.min.js%3A20%3A449)
From documentation I see that some module failed to load.
Should I include any other libraries in the index.html page to fix this error?
Solved the issue. Just use Bower to download needed dependencies and add them to /static directory.
Include in index.html
<!DOCTYPE html>
<html lang="en">
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-resource/angular-resource.min.js"></script>
<script src="bower_components/angular-route/angular-route.min.js"></script>
<script src="app/app.js"></script>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body ng-app="companyApp">
Hello, Spring!
</body>
</html>
if you want to split your static contents in many ways:
put them separately on apache/nginx server then it will access your spring boot application throw REST, but with different IP "if different machine" or Port "on same machine".
spring boot application can get static content outside its fat jar if you put the in /static folder in same path of your fat jar file, and you can change this path in application.properties using spring.resources.staticLocations property check here
finally you can make jar project to contains your static contents and add this project using maven as dependency to your spring boot project, do not forget your static contents have to be in /resources/static
which option to use based on you case and you project size but it is recommended to split it if you have different developers working on front/back end.
Just add AngularJS using Spring Initializr and it will do it all for you, or do it separately and copy how it generates the front-end layout. I personally have resources -> static -> app then have all of my partials within 'app', index.html under 'static' and application.properties under 'resources'.
I'm using Yeoman and the angular-fullstack generator to bootstrap an angular app. When I do grunt serve or grunt serve:dist everything works as expected.
Now the question is, when I open the index.html file directly in the browser, isn't it supposed to work equally?
So I have a hard time understanding whats tasks grunt is executing here to make it work. Or maybe I am missing something else.
The console tells me:
GET file:///app/8d57a97f.app.css net::ERR_FILE_NOT_FOUND
GET file:///app/47ab0f3e.vendor.js net::ERR_FILE_NOT_FOUND
GET file:///app/01b9b8a8.app.js net::ERR_FILE_NOT_FOUND
The generated index.html looks something like this:
<!doctype html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<base href="/">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="app/8d57a97f.app.css"/>
</head>
<body ng-app="myApp">
<!-- some functionality... -->
<script src="app/47ab0f3e.vendor.js"></script>
<script src="app/01b9b8a8.app.js"></script>
</body>
</html>
The reason why I do this:
I try to run the angular app with phonegap on an android device. When I load it to the android mobile, the screen remains blank. So I opened it in the browser and got the same result.
So this is my first attempt to solve this issue.
The problem was the <base href="/"> in the header.
Explanation can be found here (Loading local file in browser referenced css or js).
I am using servereless to deploy me backend and front end. My front end is using create react app. I believe after I made the following changes
<img className="svg-width" src="/img/Icons/photographer-camera.svg" alt="camera icon" />
<img className="svg-width" src="/img/icons/photographer-camera.svg" alt="camera icon" />
Where I changed Icons/ to icons/ I get the following issue:
Uncaught SyntaxError: Unexpected token <
In my s3 bucket I navigate to img/ and verify that my directory is also lowercase for icons.
The file in question of the syntax error is main.977eb738.js under /static/js/main.977eb738.js of my domain. But when I go to my bucket I don't see that js file. I see
The code in the file its complaining about is the index.html in public/index.html in the create react app boilerplate.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#000000">
<script src="https://maps.googleapis.com/maps/api/js?key=MY_KEY&libraries=places"></script>
<script src="https://js.stripe.com/v3/"></script>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
</body>
</html>
One more thing to note is this works fine locally and even on mobile. I thought this could be cloudfront caching so I waited a full day and still cannot get to the bottom of this error.
I ran into the same issue. I tested incognito and the site worked fine in inco after doing a cache invalidation the same way that Michael stated in the first comment. It looks like it is browser caching alongside the Cloudfront caching.
I was able to resolve the issue by clearing browser cookies/data from the last day.
I would recomend anyone who is uploading directly to AWS S3 bucket to clear the CloudFront edge cache.
Using AWS CLI this can be done with the folowing line:
aws cloudfront create-invalidation --distribution-id YOURID --paths "/*"
In order to find the CloudFront Distribution Id navigate to cloudFront in AWS console.
Read more here: Invalidating Files
In my case, my CloudFront distribution was blocking access to all /static/* files. Creating a CF behavior that whitelisted that path resolved the issue.
I faced a similar issue. I wasn't using serverless(AWS lambda).
What was happening was that inside my build/index.html somehow it was failing at the link's hrefs, and script's src tag.
So, I had <link href="/static/css/main.866f5359.chunk.css" rel="stylesheet"> and I changed it to
<link href="https://s3-us-west-2.amazonaws.com/fullthrottle-labs-react-task/static/css/main.866f5359.chunk.css" rel="stylesheet">, similarly for scripts as well.
So, instead of giving relative paths in build/index.html, giving an absolute path did the trick for me.