I created a small SPA Nuxt.js app and I’m having a hosting issue.
I’m trying to upload the app to a static hosting in bluehost. Under the domain name I created a sub-folder where I would like to run the app. (www.domain.com/myapp/)
I ran the command NUXT Generate to generate the static folder (Dist) - When I upload the content of the Dist folder to the folder myapp in the server and try to access it, it does not work.
I can access index.html but everything is broken. The reason is because it is looking for all the files in the domain’s root folder and not in the myapp folder.
I there a way I can tell the generate command to use the myapp folder path as its root folder?
Any help figuring this out would be greatly appreciated.
Thanks
CES
You have to set the base path for the router in your nuxt config file:
// nuxt.config.js
export default {
router: {
base: '/myapp/'
},
// ...
}
see nuxt documentation
Related
I am trying to make a simple React app with ViteJS and GitHub Pages but something is wrong with my images. I can't load them, event although I added them to assets folder. Can you help me how to fix that ?
when vite priview
vite.config.js file
that is my project, please help me
https://github.com/quocbinh-npm9081/React-App-Space-tourism-website
You are not referencing the correct url for your images you are using the path https://quocbinh-npm9081.github.io/assets/destination/image-titan.png where as it should be https://quocbinh-npm9081.github.io/React-App-Space-tourism-website/assets/destination/image-titan.png
Github pages deploys your site in your project sub-directory
You should build your site accordingly to be hosted in a sub-directory
Additionnaly, the vite doc say :
If you are deploying to https://<USERNAME>.github.io/, you can omit base as it defaults to '/'.
export default defineConfig(
// base: ''
}
If you are deploying to https://<USERNAME>.github.io/<REPO>/, for example your repository is at https://github.com/<USERNAME>/<REPO>, then set base to '/<REPO>/'.
export default defineConfig(
base: '/React-App-Space-tourism-website/'
}
then in your case:
git push -f git#github.com:<USERNAME>/<REPO>.git master:gh-pages
I have a project in Next.js. I have that upload files and share that in public URL to this project.
With npm run dev first I uploaded files to public folder and it worked fine, but when I change to npm run start and upload files, the files upload to public folder but with URL http://mydomain/fileuploaded.jpg it did not show, is rare but it's there.
I searched on the Internet but I didn't find a solution for this problem.
From Next.js documentation:
Only assets that are in the public directory at build time will be served by Next.js. Files added at runtime won't be available.
You'll have to persist the uploaded files somewhere else if you want to have access to them in the app at run time.
Alternatively, you could setup your own custom server in Next.js, which would give you more control to serve static files/assets.
You can also achieve something similar using API routes instead. See Next.js serving static files that are not included in the build or source code for details.
a bit late but if someone need the same.
If your goal is to upload and get picture from your next server, you can instead of using the Next router, getting the image by yourself by create a route /api/images/[id] where [id] is your file name and you manually with fs send the picture back.
something like:
const file = await fs.readFile(`./uploads/image.png`)
console.log(file)
res.setHeader('Content-Type', 'image/png')
res.send(file)
Try and use nginx or another webserver to serve the public directory. That way it will serve newly added files without having to write extra code to serve files in nextjs.
server {
/images/ {
root /var/www/site/public
}
}
Using ReactJS I made a Build (reactJs static, npm build) and uploaded it to Google Cloud Storage Bucket, but getting a issue with the Path and Build folder files. The app (/static website) running but could not fetch the files from the bucket directory for eg the index.html & logo. (404 or 403 error )
Structure: Parent Bucket > Build folder (index.html, static folder & other files inside Build)
Any one have any suggestion on this. How to resolve this?
Do I need to create an app.yaml for GCS Bucket or any alternative?
I have gone through the article quite similar but for AppEngine instead of Bucket. https://medium.com/google-cloud/how-to-deploy-a-static-react-site-to-google-cloud-platform-55ff0bd0f509.
I have tried with app.yaml file but does not work for me.
I had exactly the same issue as mentioned by the OP. I am sharing my version of solution just in case anyone else ends up here.
As shown in the screenshots by OP, the 403 errors showed up for me because the URL of the static files in build/static folder was not correctly configured by the react-scripts build script.
Eg:
The url for index.html file was https://storage.googleapis.com/{bucket-name}/index.html.
However, when the page loaded, it requested files having url https://storage.googleapis.com/static/js/main.f555c3e0.chunk.js. It should rather be
https://storage.googleapis.com/{bucket-name}/static/js/main.f555c3e0.chunk.js
This is happening because by default react-scripts build assumes that your files will be served from root folder of your host.
To fix this add the following field in package.json of your project
"homepage": "https://storage.googleapis.com/{bucket-name}"
This tells the build script that it needs to add a relative path for serving static files.
For details please refer: https://create-react-app.dev/docs/deployment/#building-for-relative-paths
In order to set the routes of a static website stored in Google Cloud Storage, you need to assign a suffix to your objects. In other words, using suffixes is the intended way to configure your website. You can see more information in Hosting a static website document.
For your main index page you should set MainPageSuffix and for the not found page 404.html you should set NotFoundPage as suffix.
You can see more information on how to configure your static web here
I'm creating a simply lightbox with create-react-app and I found one big issue that is bringing me some problems. I have in public folder some images. In root public folder I have spinner file Spinner-white.svg and I'm creating gallery on page localhost:3000/other When I am on this page all images that I want to add must be in folder /other but I'm using this Spinner somewhere else and I don't want to copy it on every folder that match my route path. localhost:3000/other2 for this path I need to create other folder /other2 and paste Spinner here.
I fixed this issue on production version but I cannot find answer in development.
Fixing for production:
{
id: 1,
url: process.env.PUBLIC_URL + '/other/3.jpg'
}
and in client package.json
"homepage": "path_to_domain",
Screen of my network tab:
Hope you are doing well.
For your issue, you have to introduce the base path in .env file.
With help of base path, your case to access the spinner wherever you want.
Hope it will help you.
create-react-app build with PUBLIC_URL
The Problem
I have successfully served the index.html file of my React app, but the index.js that replaces <root> in the html file
with my first React component is not triggering on ReactDOM.render.
How do I get the index.js file to start? If my understanding of serving a React app is skewed in certain ways, I would greatly
appreciate clarification.
Folder Structure
/ - contains all server-side files, including server.js
/client/ - contains all React files
/client/build/ - contains all production-ready client files
/client/build/index.html
/client/build/static/js/main.[hash].js - seems to be a minified version of index.js that contains the ReactDOM.render for
my React app
Current Deployment
I am using Facebook's create-react-app for the /client/ directory, including npm run build to automatically populate /client/build/
File Snippets
// server.js
let app = express();
app.use(express.static(path.join(__dirname, '../client/public')));
This successfully loads the default index.html provided by
create-react-app
// index.html
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
</body>
The above section of code may/may not be useful, but it is the default
html file that comes with create-react-app. Do I need to replace the
noscript tag with a script tag that references the minified index.js
file? I have attempted that, and nothing changed, but perhaps it is
because of incorrect relative path-making.
After trying many different things through trial/error, the solution is quite simple:
Serve the /client/build folder in the static call, like so:
app.use(express.static(path.join(__dirname, '../client/build')));
I had the same problem for a while and I would say that the solution that works is divided into 2 parts to avoid problems with the routers
Server the static from the CRA build (in your case the client/build)
const buildPath = path.normalize(path.join(__dirname, '../client/build'));
app.use(express.static(buildPath));
Set a final route (after all other routers in your server) to use the following:
const rootRouter = express.Router();
/*
* all your other routes go here
*/
rootRouter.get('(/*)?', async (req, res, next) => {
res.sendFile(path.join(buildPath, 'index.html'));
});
app.use(rootRouter);
//on your react app run
npm run build
//The insert the following code on your server
const path = require("path");
app.use(express.static(path.join(__dirname,"nameOfYourReactApp","build")))
//Replace nameOfYourReactApp with the name of your app
my project structure
project
-->client
back end(express)\
after using npn run build i found out that index.html in build was using wrong directory of css files or static instead of using
const path = require('path');
app.use(express.static(path.join(__dirname, '/client/build/')));
i know i also tried ../client...... but not working
so what i did is cut and paste static folder of build in root directory this image can give you the idea, and its working structure