In dev mode i stored some photos and i get them buy using img tag with image link as src.
also , the api request from server using server url.
how should i make react use the correct url while using in deployment site and not "localhost"
//api
const url = "http://localhost:5000"
const exampleRouter= axios.create({
baseURL: `${url}/recipes/public`,
});
//In React components - img work fine
<img src={http://localhost:5000/users/${user._id}/avatar`} alt"avatr">
its worked perfectly in localhost, now i should deploy to heroku but i dont know how to treat this links ( i have tame many in my project)
I am using in React as FE and Node as BE with (using Express libary)
If it is frontend code
const l = window.location;
const url=`${l.protocol}//${l.host}:${l.port}`;
should do the trick.
Also, relative paths are a thing.
Related
I am hosting a NextJS site on cloudflare pages but I can't read the environment variables.
Locally I am using in .env.local:
NEXT_PUBLIC_API_URL=https://localhost:5001/
And reading it in code:
const apiUrl = process.env.NEXT_PUBLIC_API_URL;
It works fine locally but when I try to set NEXT_PUBLIC_API_URL or API_URL in cloudflare pages environment variables the code always reads an empty string.
I am not using edge runtime, I am using static site with next export
What am I doing wrong? How can I read the env var on cloudflare pages?
I am trying to use next/image to load local images as well as remote images. I have my local images in public/assets/images and remote images in AWS S3. I want to use a placeholder image (from local) before uploading the image, and then after the upload, replace it with the remote image.
I have added domains in my next.config.js:
const withPlugins = require('next-compose-plugins')
const nextTranslate = require('next-translate')
const nextConfig = {
...
images: {
domains: ['xxx.amazonaws.com'],
},
...
}
module.exports = withPlugins([nextTranslate], nextConfig)
But still, it proxies it with localhost and returns The requested resource isn't a valid image.
I tried adding path and loader along with domains in the config, but then it loads all the images from the given path, be it remote or local.
I can use the img tag for it but I wish to use next/image for image optimization. Is it possible?
I just ran into this problem and this is how I solved it. In your project's next.config.js file, add the list of domains where your site may be pulling images from. This would include localhost, the domain your site is on when deployed, and an external site. Then set the loader to custom.
// next.config.js
module.exports = {
images: {
domains: ['localhost', 'yourdomain.com', 'externaldomain.com'],
loader: 'custom'
}
}
Then in your code, for each image make sure you set the loader attribute and the correct src. Then for your local images set up your custom loader this way.
<Image loader={({src}) => src} src="/logo.png" layout="fill" />
Thank you to Hughes' above comment and the issue they linked for helping me figure this out.
I'm starting my studies in Next.js and managed to develop a relatively simple website, my problems started when I did a next export to make the website available on my client's hosting.
The problem is with the image paths. My settings are these:
File next.config.js
module.exports = ({
basePath: '/sitenext'
}
My image
<Image
src="/assets/images/logo.webp"
alt="Logo"
width={96}
height={116}
/>
The path of the image generated in HTML is this
/_next/image?url=%2Fassets%2Fimages%2Flogo.webp&w=384&q=75
After configuring basePath, works perfectly, only images that have not loaded correctly.
I also tried the root of the host and was also unsuccessful.
Locally everything works perfectly in both dev and start mode.
Thanks a lot for the help
I have created a vueJS website and I have used the history mode for routing in order to get rid of the # in the URL which shows in the default has mode routing. However when I deploy my project to the server after
npm run build
it runs fine but when I reload any page or type the url in the browser manual i get a 404 error instead.
I have used the history mode for routing. I am using firebase for the backend. I read the documentation on how to fix this however I did not quite understand it.
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
mode : 'history',
routes : [
{
path : '/',
name : 'dashboard',
component : 'Dahsboard',
}
]
})
I don't have enough reputation to answer in the comment section under your question, so i provide an answer here.
You can find the code that tells the web server to serve the index.html file for every routing request here. Just create a .htaccess file and upload it to your server.
In your example above you also need to import your Dahsboard-Component if you are using single file components.
var express = require('express');
var app = express();
app.get('/', function(req, res) {
res.sendFile('main.html', { root : __dirname})
});
app.listen(9000, function(){
console.log('Listening on port 9000');
});
This current block of code works fine. Express is required and assigned to the variable app.
A HTML file is then sent (from the same directory) using res.sendFile as part of the app.get method.
Within the HTML file I am referencing a css file in the same directory, yet nothing is happening.
<link rel='stylesheet' type='text/css' href='mainstyle.css'>
How am I able to send the CSS file to the browser for use? res.sendFile does not work.
Thanks.
You need to define a static files directory. Create a folder called public and then include this line:
app.use(express.static('public'));
Don't include public in the file path when you include the css file though. All of your static files can go in that folder. Or, better still, create sub-folders for styles, images, fonts etc.
You can read more about it here: https://expressjs.com/en/starter/static-files.html
I think the problem you're having is that you're trying to create a web application from scratch using Express without any of the surrounding functionality. Your app sends a file when you navigate to the URL. It does not listen for specific requests for files and respond to them, it does not handle missing files, server errors etc.
You could do all that from scratch but in fact Express have created an application generator which creates a skeleton app for you with the web server, public folder, routes etc. It's called Express Generator and you can find it here: https://expressjs.com/en/starter/generator.html
That's a brilliant starting point for an MVC application. You get the package.json file for additional node modules, a template engine called Jade (although I prefer Hogan) for dynamic content and once it's created your app, you can fire it up by typing "npm start" in a console window.
try this
var express = require('express');
var app = express();
app.get('/', function(req, res) {
if(req.url == "/" || req.url == "/main.html"){
res.sendFile('/main.html', { root : __dirname})
}else if(req.url == "/mainstyle.css"){
res.sendFile('mainstyle.css', { root : __dirname})
}
});
app.listen(9000, function(){
console.log('Listening on port 9000');
});
I'm now aware of what was going wrong.
From the instance I started, I was experimenting with different code. The browser than created cache based on the incorrect code my server was providing, so no matter what I changed, the browser was reffering to it's cache to load, in this case, erroneous code.
For everyone who may be experiancing with similar issues when entering the correct code, clear cache history or use a incognito/private browser for developing.