while production i am fetching data from localhost:4000/contact but after deploying what should i change localhost:4000 to so that it works properly. In sever file i set it to process.env.PORT
I tried changing it process.env.PORT/contact but it does not working.
Related
I am using a Nuxt3 server currently running in develop mode that uses a Supabase Database and when I try to connect to the server from a diffrent device then my localhost I get a constant error of "WebSocket connection to 'ws://localhost:4000/ws' failed: " in the develop console.
I want this error to stop because I have a diffrent problem and want to rule out this error as a source for problems.
So far I didnt really try much because I just dont know where to start. I guess that it has something to do with Supabases Postgres database, but I am quite new to Vue3 and Supabase so I dont know if a URL needs to be configured diffrently.
Appreciate it if someone with more knowlede could help me!
Update:
This is how the error looks on a remote device
And this is how it looks on the local device
For Nuxt my Package.json looks like this
And my nuxt.config.ts looks like this
Additional information that might be usefull:
I store the supabase url and key in a .env file and when I use supabase I do it with:
const user = useSupabaseUser()
const client = useSupabaseClient()
The error always occures when I try to access the website by using the Network URL provided by the yarn dev command. It happens on mobile devices aswell as other computers
i created and deployed a next js application on vercel using github , after deployment i access the site , i noticed that the homepage loads just fine but i am unable to access other pages the application returns 500 | internal server error
these file routes (/Gal , /image/[slug] and /Shop ,/product/[slug]) which are created using "next/link" from nextjs works just fine on localhost but does not work after deployment
Fairly new to web dev and I'm trying to build fullstack for the first time.
I've built a simple blog using Next as frontend and Strapi as the backend. The app works fine locally but I'm stuck at deployment. I figure it's some sort of a connection issue with the backend (which is still running locally) or I'm totally missing something on the frontend. Is it that I need to make Strapi available online first and then use that domain in my fetch?
Vercel throws this error during build:
FetchError: request to http://localhost:1337/api/places?populate=%2A failed, reason: connect ECONNREFUSED 127.0.0.1:1337
at ClientRequest.
This is how I'm getting data from Strapi
export async function getStaticProps() {
// const postRes = await axios.get("http://localhost:1337/api/articles?populate=*");
const reviewsRes = await fetchAPI("/articles", { populate: ["image", "place"] });
return {
// props: { reviews: postRes.data.data },
props: { reviews: reviewsRes.data },
};
}
I'm also using this line to bring in images and data
backgroundImage: `url(${process.env.NEXT_PUBLIC_STRAPI_API_URL}${place.attributes.image.data.attributes.url})`,
I've also tried changing localhost to 127.0.0.1:1337 in my env/config
You've actually answered your question in this line:
Is it that I need to make Strapi available online first and then use that domain in my fetch?
Yes! You have to deploy your Strapi backend first, and use the domain/URL inside your deployed NextJS frontend.
Strapi Deployment Documentation: https://docs.strapi.io/developer-docs/latest/setup-deployment-guides/deployment.html
What you're doing with the backgroundImage url is what you need to do to your data-fetching url.
Use that NEXT_PUBLIC_STRAPI_API_URL env variable so you don't have to change the code before deploying.
Locally you can have .env file in you NextJS root folder something like this
NEXT_PUBLIC_STRAPI_API_URL=http://localhost:1337/api
Then, once you've deployed the NextJS app to Vercel, you have to set the NEXT_PUBLIC_STRAPI_API_URL variable to the project setting.
Set env variables in Vercel: https://vercel.com/docs/concepts/projects/environment-variables
Welcome to web dev world! Hope it helps!
I'm trying to make a Netlify app that posts data to an Atlas MongoDB, and while I can post to the DB when I run my page from localhost, Netlify is returning a 404 whenever I attempt to post data to the DB. I know it is not an issue with Atlas's whitelisted IP addresses because I have whitelisted all IP addresses for the time being. I suspect that this has something to do with Netlify not properly reading or running the env.process that I'm using to store my Atlas information, although I am not completely certain that is the cause. When I run it locally, I have my config set up to simply use the Atlas information directly rather than relying on a .env file. I'm using mongoose to connect to the DB, and the connection portion of my code is the following in my production build:
mongoose.connect(process.env.MONGODB_URI || "mongodb://localhost/dbname");
This has not been working, but on the working copy that I run from localhost, I use:
const uri = `mongodb://atlasDB:<PASSWORDHERE>#atlasDB-shard-00-00-ot2tv.mongodb.net:27017,atlasDB-shard-00-01-ot2tv.mongodb.net:27017,atlasDB-shard-00-02-ot2tv.mongodb.net:27017/test?ssl=true&replicaSet=atlasDB-shard-0&authSource=admin&retryWrites=true`;
mongoose.connect(uri);
I have configured Netlify to have a MONGODB_URI build environmental variable of mongodb://atlasDB:<PASSWORDHERE>#atlasDB-shard-00-00-ot2tv.mongodb.net:27017,atlasDB-shard-00-01-ot2tv.mongodb.net:27017,atlasDB-shard-00-02-ot2tv.mongodb.net:27017/test?ssl=true&replicaSet=atlasDB-shard-0&authSource=admin&retryWrites=true
I have replaced PASSWORDHERE with the actual password in both instances, but the Netlify build environmental variable does not feature string quotations around the value when viewed in the entry field on the Netlify website. I tried putting them in, but it seemed to make no difference, but I may have simply not waiting long enough for the change to take effect.
Aside from Mongoose, I am not running any other dependencies that should have any effect on this problem. The project deadline is in a couple days, so any help with this would be greatly appreciated.
I have a Parse Server running on top of a MongoDB, and that's running 100% fine on my Dev Server which is hosted on DigitalOcean. Here I'm able to send GET requests to my server to obtain the image, as well as access the image via it's Parse-Dashboard.
I cloned that droplet to set up a Production Server, and everything is running fine... Except, I can't access the images from Parse that were either cloned from the Dev Server, or ones that I uploaded after I initialized the new Production server. I'm able to send GET requests to obtain all other fields, except for the image files. I also can't access the image file via the Parse-Dashboard - it returns a 404 - Oh no, we can't find that page! error, on the following URL: http://server.ip/parse/files/ProdServer/de632aeb61f7265926e554fabfb25180_image1.png
Other key things to note:
The Dev Server is hosted on a domain that has a SSL; could it be an SSL issue?
I'm initializing the parse-dashboard with the --allowInsecureHTTP flag
Everything (even before the SSL) was working on the Dev Server beforehand
all packages + dependencies are up-to-date
tl;dr
How do I access the image files from my Parse Server, via Parse-Dashboard or GET request?
A couple methods I tried... Since this was an elaborate process for me, allow me to document the methods I tried to resolve this issue:
The first issue was, do the files exist? If so, where are they stored?
By accessing my parse-dashboard on port 4040, I tried to view the image path via the URL... So I knew it existed somewhere, and I recursively searched my entire server for the file path, but to no avail.
Then with more research I found that any file over 16MB gets converted into a GridFS object i.e. images are stored in my MongoDB. How you access these objects are through a utility called mongofiles.
By running mongofiles -d dbname list I was able to view in a list view all of the images stored on my Parse-Server.
just to ensure the images weren't corrupt...
I also sftp the images over into my local machine, and fortunately I could view them. So the problem was that the images weren't being served correctly...
The next issue was, how come the images aren't being served correctly?
So my parse-dashboard was being served on port 4040, but for some reason, my image file path within their respective URLs were being prefaced with the same port 4040... It turns out that within my Parse-Server config, the parse-server URL was pointing to port 4040, but was being served on ****. By changing my URL back to ****, my images were able to properly render on my parse-dashboard, and I was able to send http requests for the images as well :)
tl;dr make sure your image file path is being served on the same port where your parse-server is being served