React production using react-app-rewired nginx
I have tried to deploy my app on heroku and it work normally. But when I build my app using react-app-rewired script and deploy it to my server using nginx. When access my app, it still work fine but if I reload page with contextPath: http://35.240.229.243/products it throws 404 error. You can access my app in http://35.240.229.243 to test. I am using react-router with history. Help me thanks
reactjs nginx react-router react-router-v4 antd
asked Nov 12 at 5:42
Duc Anh Pham
146
add a comment |
I have tried to deploy my app on heroku and it work normally. But when I build my app using react-app-rewired script and deploy it to my server using nginx. When access my app, it still work fine but if I reload page with contextPath: http://35.240.229.243/products it throws 404 error. You can access my app in http://35.240.229.243 to test. I am using react-router with history. Help me thanks
reactjs nginx react-router react-router-v4 antd
asked Nov 12 at 5:42
Duc Anh Pham
146
Can you show your nginx conf file
– Kyaw Kyaw Soe
Nov 12 at 5:47
I dont use any conf. I just throw build folder to /usr/share/nginx/html
– Duc Anh Pham
Nov 12 at 6:41
u have to use .htaccess file
– Asif vora
Nov 12 at 7:56
@Asifvora can you tell me about this file? thanks so much
– Duc Anh Pham
Nov 12 at 8:38
Please refer here htaccess-guide.com
– Asif vora
Nov 12 at 9:05
add a comment |
I have tried to deploy my app on heroku and it work normally. But when I build my app using react-app-rewired script and deploy it to my server using nginx. When access my app, it still work fine but if I reload page with contextPath: http://35.240.229.243/products it throws 404 error. You can access my app in http://35.240.229.243 to test. I am using react-router with history. Help me thanks
reactjs nginx react-router react-router-v4 antd
asked Nov 12 at 5:42
Duc Anh Pham
146
I have tried to deploy my app on heroku and it work normally. But when I build my app using react-app-rewired script and deploy it to my server using nginx. When access my app, it still work fine but if I reload page with contextPath: http://35.240.229.243/products it throws 404 error. You can access my app in http://35.240.229.243 to test. I am using react-router with history. Help me thanks
reactjs nginx react-router react-router-v4 antd
reactjs nginx react-router react-router-v4 antd
asked Nov 12 at 5:42
Duc Anh Pham
146
asked Nov 12 at 5:42
Duc Anh Pham
146
asked Nov 12 at 5:42
Duc Anh Pham
146
asked Nov 12 at 5:42
Duc Anh Pham
146
asked Nov 12 at 5:42
Duc Anh Pham
146
146
Can you show your nginx conf file
– Kyaw Kyaw Soe
Nov 12 at 5:47
I dont use any conf. I just throw build folder to /usr/share/nginx/html
– Duc Anh Pham
Nov 12 at 6:41
u have to use .htaccess file
– Asif vora
Nov 12 at 7:56
@Asifvora can you tell me about this file? thanks so much
– Duc Anh Pham
Nov 12 at 8:38
Please refer here htaccess-guide.com
– Asif vora
Nov 12 at 9:05
add a comment |
Can you show your nginx conf file
– Kyaw Kyaw Soe
Nov 12 at 5:47
I dont use any conf. I just throw build folder to /usr/share/nginx/html
– Duc Anh Pham
Nov 12 at 6:41
u have to use .htaccess file
– Asif vora
Nov 12 at 7:56
@Asifvora can you tell me about this file? thanks so much
– Duc Anh Pham
Nov 12 at 8:38
Please refer here htaccess-guide.com
– Asif vora
Nov 12 at 9:05
Can you show your nginx conf file
– Kyaw Kyaw Soe
Nov 12 at 5:47
Can you show your nginx conf file
– Kyaw Kyaw Soe
Nov 12 at 5:47
I dont use any conf. I just throw build folder to /usr/share/nginx/html
– Duc Anh Pham
Nov 12 at 6:41
I dont use any conf. I just throw build folder to /usr/share/nginx/html
– Duc Anh Pham
Nov 12 at 6:41
u have to use .htaccess file
– Asif vora
Nov 12 at 7:56
u have to use .htaccess file
– Asif vora
Nov 12 at 7:56
@Asifvora can you tell me about this file? thanks so much
– Duc Anh Pham
Nov 12 at 8:38
@Asifvora can you tell me about this file? thanks so much
– Duc Anh Pham
Nov 12 at 8:38
Please refer here htaccess-guide.com
– Asif vora
Nov 12 at 9:05
Please refer here htaccess-guide.com
– Asif vora
Nov 12 at 9:05
add a comment |
1 Answer
1
active
oldest
votes
First you need to find default nginx conf file and disable it, by default it will be under /etc/nginx/sites-enabled/default
sudo rm -rf /etc/nginx/sites-enabled/default
and create new file under /etc/nginx/sites-available/
sudo touch /etc/nginx/sites-enabled/default/redbox
and use vim or nano to put this text into new conf file redbox,
server {
listen 80;
root /usr/share/nginx/html;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
}
and enable it
sudo ln -s /etc/nginx/sites-available/redbox /etc/nginx/sites-enabled/redbox
next, make sure that there are no syntax errors in Nginx files,
sudo nginx -t
If no problems were found, restart Nginx.
sudo systemctl restart nginx
answered Nov 12 at 8:52
Kyaw Kyaw Soe
533211
Thanks. I already make it work correctly withlocation / { try_files $uri /index.html; }
– Duc Anh Pham
Nov 12 at 10:16
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53256468%2freact-production-using-react-app-rewired-nginx%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
First you need to find default nginx conf file and disable it, by default it will be under /etc/nginx/sites-enabled/default
sudo rm -rf /etc/nginx/sites-enabled/default
and create new file under /etc/nginx/sites-available/
sudo touch /etc/nginx/sites-enabled/default/redbox
and use vim or nano to put this text into new conf file redbox,
server {
listen 80;
root /usr/share/nginx/html;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
}
and enable it
sudo ln -s /etc/nginx/sites-available/redbox /etc/nginx/sites-enabled/redbox
next, make sure that there are no syntax errors in Nginx files,
sudo nginx -t
If no problems were found, restart Nginx.
sudo systemctl restart nginx
answered Nov 12 at 8:52
Kyaw Kyaw Soe
533211
Thanks. I already make it work correctly withlocation / { try_files $uri /index.html; }
– Duc Anh Pham
Nov 12 at 10:16
add a comment |
First you need to find default nginx conf file and disable it, by default it will be under /etc/nginx/sites-enabled/default
sudo rm -rf /etc/nginx/sites-enabled/default
and create new file under /etc/nginx/sites-available/
sudo touch /etc/nginx/sites-enabled/default/redbox
and use vim or nano to put this text into new conf file redbox,
server {
listen 80;
root /usr/share/nginx/html;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
}
and enable it
sudo ln -s /etc/nginx/sites-available/redbox /etc/nginx/sites-enabled/redbox
next, make sure that there are no syntax errors in Nginx files,
sudo nginx -t
If no problems were found, restart Nginx.
sudo systemctl restart nginx
answered Nov 12 at 8:52
Kyaw Kyaw Soe
533211
Thanks. I already make it work correctly withlocation / { try_files $uri /index.html; }
– Duc Anh Pham
Nov 12 at 10:16
add a comment |
First you need to find default nginx conf file and disable it, by default it will be under /etc/nginx/sites-enabled/default
sudo rm -rf /etc/nginx/sites-enabled/default
and create new file under /etc/nginx/sites-available/
sudo touch /etc/nginx/sites-enabled/default/redbox
and use vim or nano to put this text into new conf file redbox,
server {
listen 80;
root /usr/share/nginx/html;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
}
and enable it
sudo ln -s /etc/nginx/sites-available/redbox /etc/nginx/sites-enabled/redbox
next, make sure that there are no syntax errors in Nginx files,
sudo nginx -t
If no problems were found, restart Nginx.
sudo systemctl restart nginx
answered Nov 12 at 8:52
Kyaw Kyaw Soe
533211
First you need to find default nginx conf file and disable it, by default it will be under /etc/nginx/sites-enabled/default
sudo rm -rf /etc/nginx/sites-enabled/default
and create new file under /etc/nginx/sites-available/
sudo touch /etc/nginx/sites-enabled/default/redbox
and use vim or nano to put this text into new conf file redbox,
server {
listen 80;
root /usr/share/nginx/html;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
}
and enable it
sudo ln -s /etc/nginx/sites-available/redbox /etc/nginx/sites-enabled/redbox
next, make sure that there are no syntax errors in Nginx files,
sudo nginx -t
If no problems were found, restart Nginx.
sudo systemctl restart nginx
answered Nov 12 at 8:52
Kyaw Kyaw Soe
533211
answered Nov 12 at 8:52
Kyaw Kyaw Soe
533211
answered Nov 12 at 8:52
Kyaw Kyaw Soe
533211
answered Nov 12 at 8:52
Kyaw Kyaw Soe
533211
533211
Thanks. I already make it work correctly withlocation / { try_files $uri /index.html; }
– Duc Anh Pham
Nov 12 at 10:16
add a comment |
Thanks. I already make it work correctly withlocation / { try_files $uri /index.html; }
– Duc Anh Pham
Nov 12 at 10:16
Thanks. I already make it work correctly with
location / { try_files $uri /index.html; }– Duc Anh Pham
Nov 12 at 10:16
Thanks. I already make it work correctly with
location / { try_files $uri /index.html; }– Duc Anh Pham
Nov 12 at 10:16
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53256468%2freact-production-using-react-app-rewired-nginx%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Can you show your nginx conf file
– Kyaw Kyaw Soe
Nov 12 at 5:47
I dont use any conf. I just throw build folder to /usr/share/nginx/html
– Duc Anh Pham
Nov 12 at 6:41
u have to use .htaccess file
– Asif vora
Nov 12 at 7:56
@Asifvora can you tell me about this file? thanks so much
– Duc Anh Pham
Nov 12 at 8:38
Please refer here htaccess-guide.com
– Asif vora
Nov 12 at 9:05