I currently have a static website running on an nginx server. I am moving this over to React and so need to get my website working as an NPM project.
Currently all the html pages work without having the .html file extension in the URL. For example www.xyz.com/login is equivalent to www.xyz.com/login.html (but looks cleaner in the browser).
How do I get this to behave in the same way on an NPM based web project?
Working perfectly on nginx using the following line in nginx.conf file:
location / { try_files $uri $uri/ /$uri.html /index.html; }
What is the npm equivalent?
Related
based on Angular's official website, we should run "ng build" command to create files ready for hosting ( in dist folder ). But after running it, there is no content in index.html. Only the title of the page and if you run it or host it, you will only see a blank page. While if you run the ng serve command, the content will be displayed correctly. What is the problem?
Thanks.
You need to deploy your index.html with a deployment server like nginx server, apache server or angular deploy service, etc…
And make sure that index.html has base url=“/“.
Here you can check how to deplay with angular: https://angular.io/guide/deployment
Or
Apache server: https://httpd.apache.org/
I'm making a website that I used to edit directly online on Neocities, but due to some problems, I'm looking to switch my editing to local offline. But I can't make my links point correctly to their targets, such as the favicon or my css files because locally, "/" doesn't point to the root.
Is there any program that allows me to set a folder as the root directory so these links can point properly? I'm currently trying Notepad++ but I haven't found a way to do so.
I know I could put the full path as "C:\folder\folder\file.css" for examle, but that would mean I'd have to edit the html of every single of my many pages and then re-edit them when I upload them online, and that's very undesirable. I need a way to preview the html locally without changing any paths, so my favicon link, for example, which currently is href="/favicon.png" can stay unchanged on all the pages. I could remove the "/" but then it wouldn't work for any pages within subfolders, and there's a lot of those in my project.
It's possible that I'm just missing some simple detail but I'm really just very much a beginner to making websites in general.
You can run a local web server to serve the contents of your root directory at a domain like http://localhost:8080. So rather than opening index.html in the browser you visit that URL instead.
There are a bunch of simple web servers you can use - my favourite for purposes like this is the NPM package http-server. It requires Node to be installed.
Install node
Install http-server by executing npm install -g http-server in your Terminal
Run the http-server by navigate to the website root folder and run http-server in your Terminal
http-server will produce an output that will tell you where to access the site.
Starting up http-server, serving ./
http-server version: 14.1.0
Available on:
http://127.0.0.1:8080
http://localhost:8080
Hit CTRL-C to stop the server
I am trying to deploy my website using Flask. Everything is working perfectly locally (localhost:5000), but when I deploy it on my distant linux ubuntu server (www.linode.com) I encouter a problem. I have installed gunicorn and nginx, but my CSS files are not taken into account, thus, my webpage just appears as an HTML content alone, without shape/colors and so on.
I am very new at web development, and I don't understand why it works perfectly locally and not anymore (not totally) on the linux server. Is the problem related to the nginx that can't manage to do the link between HTML and CSS? Because locally I don't need to use nginx, and everything works.
Here is my nginx config file for when I type sudo nano /etc/nginx/sites-enabled/assets:
server {
listen 80;
server_name 45.79.250.111;
include /etc/nginx/mime.types;
location /static {
alias /home/gardy/ladybird_site/assets/static;
}
location / {
proxy_pass http://localhost:8000;
include /etc/nginx/proxy_params;
proxy_redirect off;
}
}
And here is my website directory tree:
ladybird_site/
requirements.txt
run.py
assets/
__init__.py
config.py
models.py
fonts/
et-line.eot
...
fontawesome-webfont.woff2
main/
routes.py
__init__.py
templates/
index.html
layout.html
static/
css/
animate.css
bootstrap.min.css
font-awesome.min.css
style.css
bxslider/
jquery.bxslider.css
images/
bx_loader.gif
controls.png
et-line-font/
style.css
magnific-popup/
magnific-popup.css
owl-carousel/
owl.carousel.css
owl.theme.css
owl.transitions.css
images/
ldb_ico.ico
founder_pics/
custom_pics/
f1.jpg
f2.jpg
f3.jpg
ldb_imgs/
1.png
2.png
3.png
js/
bootstrap-hover-dropdown.min.js
bootstrap.min.js
...
jquery.bxslider.min.js
main.js
I am getting crazy with that stuff, trying and modifying things since two days without significant improvments, and found no answers on the internet...
Thanks a lot
Your static path looks fine. You have set your server to listen to port 80, which is the default port for HTTP, but maybe you have not opened it. The next step is for you to open it.
sudo ufw allow http/tcp
You mention that your server is still listening to port 5000. However, if you are done with testing, you can disallow this port from being used by Nginx.
sudo ufw delete allow 5000
Enable these new rules by running the command below:
sudo ufw enable
# Hit 'y' for 'yes' when prompted
Finally, you can now restart your Nginx server:
sudo systemctl status nginx.service
If you navigate to your application's IP address, and append static/css/style.css, you should be able to access your CSS file. I mean http://<your IP address>/static/css/style.css
I'm trying to deploy a React app to the public site and everything works ok on localhost. When I put the website up and go to the url (i.e. www.something.com), the home page renders fine including static assets.
Then, when I created an .htaccess file containing:
FallbackResource /
The subroutes all render fine (static assets incl js, css, images), but the home page errors with a 502 Bad Gateway.
However, when I go to a subroute (i.e. www.something.com/about), it 404s.
I built using yarn build
I'm using "react-router-dom": "^5.1.2"
I set up the app using create-react-app
package.json contains "homepage": "."
What am I doing wrong here?
This question ended up being answered by .htaccess rewrite to redirect root URL to subdirectory
I redirected to the homepage as in the example and kept my FallbackResource defined.
RewriteEngine On
RewriteRule ^$ /index.html [L]
FallbackResource /index.html
I noticed you can also use any other defined route here (i.e. /contact)
AWS are now depreciating all their versions of Apache on Elastic Beanstalk, which means I can suddenly no longer use .htaccess files to rewrite urls.
No matter how much I read their ebextensions documentation, I can't seem to find out how to replace this functionality.
I've tried placing the following file in:
/.ebextensions/nginx/conf.d/custom.conf
With the following code:
location / {try_files $uri $uri/ /test.php?$args;}
It seems like Elastic Beanstalk doesn't even recognize the config file, nothing happens.
What am I doing wrong here with my package?