hi i've run following command pm2 start process.json on ec2 AWS.
Here is my process.json file
{
"script": "serve",
"env": {
"PM2_SERVE_PATH": './build',
"PM2_SERVE_PORT": 5000
}
}
When I run the pm2 command shown above. I can access the Base URL. But when I type the Sub URLs from browser, it shows a page that contains 404 |The requested path cannot be found.
Below is my file structure
I am generating the project using npm run build then pm2 start process.json
So the app starts up and you can access the root page? What about your routes? Are they set up properly? Are you using react-routing or something else?
This sounds like a routing issue. Does it only happen on the AWS platform?
Hi I found a solution to this problem.
When I use serve on pm2 it shows 404 page whenever it didn't find a url resource. To resolve that I used screen on ec2.
To open a new screen type screen
Then in your react folder type command serve -s build -p 5000 Now you can detach your screen using CTRL + D
Related
I've deploy a react application with this protocol:
1- build from local api:
npm run build:preprod
2- put the build folder into a server folder
3- start the application:
pm2 serve build 3000 --name "myApplication" --spa
the application run perfectly if I check http://myapi:3000
The problem is that I've setted a redirection from another server (to benefit from its certificate and from a "same-origin" with the back application.
So normally, here is the result:
https://server-preprod/myapplication
REDIRECT TO
http://myapi:3000
But this redirection doesn't work:
1- the root folder of the api react is finded - status 200
2- all files called with it are 404 error due to a bad redirection
In fact, to find a simple chunk.css, instead of :
https://server-preprod/myapplication/static/chunk.css
It misses an url fragment:
https://server-preprod/static/chunk.css
The url https://server-preprod/myapplication/ is generate by the redirection server like I said before, so I don't understand how it appends and how I can resolve this problem
EDIT :
So, I've set an homepage in package.json like this :
"homepage": "https://server-preprod/myapplication",
and now, the css and the js files seems to be called from the good adress but I've an error :
Uncaught SyntaxError: Unexpected token '<'
The code is exactly the same and I absolutely don't know why I have this error...
I am working on a React app that's running on AWS Amplify. My React app is using the react-router-dom library to route to different components. After running amplify publish in the CLI, at the root of the app (obktraining.com) everything is fine in the browser, I can also route to other components in the app just fine as well. But when I refresh my browser while I am on a route (obktraining.com/menu), I get an Access Denied error message.
I have found other posts about similar issues regarding rewrites and redirects in Amplify, but the solutions given do not work for me.
Here is an image of the error:
My Amplify app rewrites & redirects :
Again, the error only displays when I refresh on a route (obktraining.com/menu or obktraining.com/drinks) not on obktraining.com. Is the issue being caused by the react-router-dom library or is it an issue with Amplify settings? I am not sure where to go from here.
I have been facing the same error since days.The error is being caused by the amplify settings. The solution is simple,
Edit your Rewrites and redirects by adding a new rule.
source address = </^[^.]+$|.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>
target address = /index.html
status = 200 (Rewrite)
Country code can be left blank
Save and try refreshing your app again. It should probably work.
use this for reference: https://docs.aws.amazon.com/amplify/latest/userguide/redirects.html#redirects-for-single-page-web-apps-spa
Then you can just put in (as Dhruv Godambe posted above)
</^((?!.(css|gif|ico|jpg|js|png|txt|svg|woff|ttf)$).)*$/>
as the Source address and
/index.html as your target address
You can navigate to 'rewrites and redirects' in your app from AWS Amplify console and click on edit and select open text editor, and add this piece of code in your array(if present) else put the array braces around it.
{
"source": "</^[^.]+$|\\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf)$)([^.]+$)/>",
"target": "/index.html",
"status": "200",
"condition": null
}
Reference: https://docs.aws.amazon.com/amplify/latest/userguide/redirects.html#redirects-for-single-page-web-apps-spa
Reference:
https://docs.aws.amazon.com/amplify/latest/userguide/manual-deploys.html
I have faced the same problem.
I was using Manual Zip File (Compressed) download (wrong).
Here is how to deploy manually correctely:
Run this command
npm run build
Now a build folder will be created.
2. Compress the content of this folder
Not the content of the whole project.
You chnage directory to the build folder and Compress the content in side.
3. Upload that compressed file Inside the build directory
Now this should work just fine.
:)
The correct rule should be like this:
Source address: </^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf)$)([^.]+$)/>
Target address: /index.html
Status: 200
I was getting the an Access Denied error message too. The error went away when I followed the documentation described in the answer above, but then I got the white screen problem described above too.
Reviewing the steps I noticed the auto-complete for the "Destination Address" listed in the "Rewrites and redirects" settings was /. When I tried using / as the "Destination Address" instead of /index.html I no longer got the white screen and got the expected page content.
Sharing what I found in case this helps others who are seeing a white screen after fixing the error with the rewrite rule described in the answers above. (Note as of Nov 2022 the "Rewrites and redirects" setting page uses the wording "Target Address" instead of "Destination Address".)
I have faced the same problem. I was zipping build folder, but not the contents within the zip folder.
Here is how I fixed it:
Run build command
npm run build
Now a build folder will be created inside your project directory.
Open build folder.
Compress the contents of build folder, and not build folder.
Now upload this new zip created from sub files and folders from build folder.
App will run fine on AWS Amplify.
I got the same error,
I zipped the build folder first then uploaded it and got that error,
but when I just uploaded the folder without zipping it, it worked fine !! weird!!
in my application I used the port 8080
Trying to deploy for the first time to firebase , I looked in alot of guides on youtube and stackoverflow did the same as they did but keep getting blank page after deploy the app.
This is my process:
-yarn build
-firebase login
-firebase init
That's how i filled the init:
Hosting: Configure and deploy Firebase Hosting sites
2.What do you want to use as your public directory? build
3.Configure as a single-page app (rewrite all urls to /index.html)? No
4.File build/404.html already exists. Overwrite? No
5.File build/index.html already exists. Overwrite? (y/N) No
I tried few ways sometimes i change some of them to Yes still the same result
-firebase deploy
That how my files looks like:
This is the code of my Router:
const App = () => {
return (
<div>
<Switch>
<Route path="/" exact component={Home} />
<Route path="/about" exact component={About} />
<Route path="/brands" exact component={Brands} />
<Route path="/guide" exact component={Guide} />
<Route path="/contact" exact component={Contact} />
<Route
render={function() {
return <p>Not found</p>;
}}
/>
</Switch>
</div>
);
};
The error i have:
Update:
This is the screen now:
Update:
The new error:
Go to your firebase.json file and make sure that the 'public' key under "hosting" is set to "build" like below:
"hosting": {
"public": "build"
}
It was likely set to "public" by default when you ran firebase init. In which case it would look like this:
"hosting": {
"public": "public"
}
The problem with the default is that React places all your static assets in the 'build' directory when you run npm run build, so that is where you want to point firebase to.
I had the same issue and this worked for me.
It's possible the index.html file in build got overwritten during the firebase init process. When that happens, firebase overwrites the files with its default template structures and hence the reason for that template. If the index.html file in the public folder still has your required template, delete the build folder, alongside the files and folders generated by firebase(not really a requirement, but just to keep stuff cleaner and fresher) i.e .firebase folder, .firebaserc and firebase.json file, and then:
run npm run build or yarn build, depending on your package manager
run firebase login and fill necessary requirements (skip if already logged in)
run firebase init
select the Hosting option (navigate using arrow keys, select using spacebar. Enter after selection)
select an existing firebase app or create a new one
type build for the folder choice
type/select yes for single page app option
type/select no to avoid overwriting of files by firebase
run firebase serve --only hosting for testing
run firebase deploy
I tried to deploy to github before doing it with firebase , So an "homepage:" field was left in the package.json. all i needed to do was to delete this field and rebuild and redeploy and everything is working
First you npm build or yarn build depending on what you use.
Then firebase login.
Then firebase init - choose hosting, then choose build instead of the public that is generated automatically for you.
Then you choose yes and then no.
And then you deploy.
you'll need to set proper HTTP caching headers for service-worker.js file in firebase.json file or you will not be able to see changes after first deployment (issue #2440). It should be added inside "hosting" key like next. See this:
https://create-react-app.dev/docs/deployment/#firebase
Run:
% firebase login
% firebase init
Select 'hosting - with firebase'
Choose Yes to overwrite
Choose Build
Choose no to Deploy with Github
Run:
% npm run build
% firebase deploy
Same error I got then my problem solved with following step
run npm run build or yarn build, depending on your package manager
run firebase login and fill necessary requirements (skip if already logged in)
run firebase init
select the Hosting option (navigate using arrow keys, select using spacebar. Enter after selection)
select an existing firebase app or create a new one
type build for the folder choice
type/select yes for single page app option
type/select no to avoid overwriting of files by firebase
run firebase serve --only hosting for testing
run firebase deploy
I don't know the exact reason of the issue (Page was blank and was giving 404 Error) but somehow, I solved it. The reason of this issue could be (according to my assumptions):
By running command (npm run build) just before (firebase deploy
command)
Setting public directory option to public or build instead of using
dist
Setting (Configure as a single-page app (rewrite all urls to
/index.html)? No)
Setting (File dist/index.html already exists. Overwrite? Yes)
The steps that I followed to solve this issue are:
Pre-requisite:
delete .firebase folder
copy your project's index.html file content/code and replace it with
the build folder's index.html file content because these two files
should have same content/code
Step 0): npm run build (For React App)
Step 1): npm install -g firebase-tools
Step 2): firebase login (If you are already login, then there is no need for this step)
Step 3): firebase init
Step 4): Are you ready to proceed? Yes
Step 5): What do you want to use as your public directory? dist
Step 6): Configure as a single-page app (rewrite all urls to /index.html)? Yes
Step 7): Set up automatic builds and deploys with GitHub? No
Step 8): File dist/index.html already exists. Overwrite? No
Step 9): firebase deploy
my react app is working locally but after the deploy, I faced the problem when I press any button there is no problem but if I want to refresh I see that problem "404 - File or directory not found."
I found this solution:
https://github.com/ReactTraining/react-router/blob/v3/docs/guides/Histories.md#browserhistory
Configure Your Server
"Your server must be ready to handle real URLs. When the app first loads at / it will probably work, but as the user navigates around and then hits refresh at /accounts/23 your web server will get a request to /accounts/23. You will need it to handle that URL and include your JavaScript application in the response."
But I don't know how can I do this
I try something but it doesn't work
TRY
npm run build, this will create build folder inside your project root folder
if you want to deploy to remote server just transfer that build
folder.
npx serve -s build on windows, if you are using mac kindly see if it is still npx.
then try to refresh every path of it
hope this works, happy coding.
Since the server cannot find the static content in the directory (i.e. not found the file /tomcat/accounts/23), it will give you 404 unless you have additional route handling.
In React routing I think you can try with HashRouter
See more details here:
https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/api/HashRouter.md
HashRouter vs BrowserRouter
We created a Linux Web App in Microsoft Azure. The application is static written with React (html and Javascript).
We copied the code into the wwwroot folder, but the application only showing only hostingstart.html and when we try to get page index.html we have this error:
Cannot GET /index.html
We tried with a sample of Azure in GitHub (https://github.com/Azure-Samples/html-docs-hello-world) but the error is the same.
The url is this: https://consoleadmin.azurewebsites.net/index.html
Last week the application was running correctly.
We forget to do something?
MAY 2020 - You don't have to add any javascript files or config files anywhere. Let me explain.
I was facing this exact same issue and wasted 6 hours trying everything including the most popular answer to this question. While the accepted answer is a nice workaround (but requires more work than just adding the index.js file), there's something a simpler than that.
You see, when you just deploy an Azure Web App (or App Service as it is also called), two things happen:
The web app by default points to opt/startup/hostingstart.html
It also puts a hostingstart.html in home/site/wwwroot
When you deploy your code, it replaces hostingstart.html in home/site/wwwroot but the app is still pointing to opt/startup/hostingstart.html. If you want to verify this, try deleting opt/startup/hostingstart.html file and your web app will throw a "CANNOT GET/" error.
So how to change the default pointer? It's simpler than it looks:
Go to Configuration tab on your web app and add the following code to startup script:
pm2 serve /home/site/wwwroot --no-daemon
If this web app is a client-side single-page-app and you're having issues with routing, then add --spa to the above command as follows:
pm2 serve /home/site/wwwroot --no-daemon --spa
This will tell the web app to serve wwwroot folder. And that's it.
Image for reference:
Screenshot explaination
PS: If you only set the startup script without deploying your code, it will still show the hostingstart.html because by default that file lies in the wwwroot folder.
Ok you are gonna love this. This happened to me today also. Same exact thing.
I am pretty sure the azure team flipped a switch somewhere and we fell through a crack.
I found this obscure answer with no votes and it did the trick (with a little extra finagling)
BONUS! this also fixed my router issues I was having only on the deployed site (not local):
Credit: #stormwild: Default documents not serving on node web app hosted on Azure
From #stormwild's post see here:
https://blogs.msdn.microsoft.com/waws/2017/09/08/things-you-should-know-web-apps-and-linux/#NodeHome
Steps:
Go to your azure portal, select your app service and launch ssh
In ssh terminal, navigate via command line to /home/site/wwwroot
create index.js there with the following code:
var express = require('express');
var server = express();
var options = {
index: 'index.html'
};
server.use('/', express.static('/home/site/wwwroot', options));
server.listen(process.env.PORT);
NOTE: Be sure to run npm install --save express also in this folder else your app service will crash on startup
Be sure to restart your app service if it doesn't do so automagically
A workaround, I changed the webapp stack to PHP 7
Another solution would be to add a file called ecoysystem.config.js right next to your index.html file.
module.exports = {
apps: [
{
script: "npx serve -s"
}
]
};
This will tell pm2 to associate all requests to index.html as your app service starts up.
Very helpful information here: https://burkeholland.github.io/posts/static-site-azure/