I have a strange problem with this tool
https://github.com/kriasoft/react-static-boilerplate
I have an React-redux-wepback app and want to build as a static site
after clone react-static-boilerplate project from github and install all dependencies
and use $ yarn start, everything working fine except one thing,
When I click on "About" button it's not redirecting me to /about
it just change address and stay in home page,
When I use $ yarn build, and copy all files from public folder to my hosting it's working just perfect
but I want to test it in development mode (yarn start) on my vps
and there is weird stuff
fragment of my routes.json
{
"path": "/about",
"page": "./about"
},
but if I change my routes json to
{
"path": "/sign_up",
"page": "./sign_up",
"chunk": "main"
},
/about working in development mode (yarn start) but not working after yarn build and copy to static files to hosting
I don't understand that chunk option, any help please?
Or maybe there is more easy way than boilerplate tool to convert React app to a static app which would be working on basic hosting (no VPS etc)?
Checkout https://phenomic.io/
It's a React to static HTML generator.
Related
I'm having problems trying to access my website, it returns 404 status code.
I'm using React with Vite and Heroku.
I'm using this buildpack as it says in Vite docs:
Vite Heroku Deploy Doc: https://vitejs.dev/guide/static-deploy.html#heroku
Heroku Buildpack for static file: https://github.com/heroku/heroku-buildpack-static
Website page:
Folder Structure:
Static.json file:
Package.json file:
Vite.config.ts file
if you are having deployment issues with ANY single page application, use the following buildpack and make sure you are specifying the root folder of your bundled application
https://github.com/heroku/heroku-buildpack-static
This error can occur when:
1 - You don't specify in static.json file the index route. To solve it, just add this few lines:
"routes": {
"/**": "index.html"
}
Now you are saying that all routes redirects to index.html file.
If, for some reason, you want to add more routes for different html files, just do this:
"routes": {
"/": "index.html",
"*": "404.html"
}
In above example, when request reaches "/" route, it redirects to index.html, but if request uses any different route, it redirects to 404.html file.
2 - It also can happen when you don't have heroku/nodejs buildpack installed in your Heroku app.
If you are using Vite, you have to install both heroku/nodejs and heroku/heroku-buildpack-static
To install it you can access your app in heroku website, then go to settings, finally click on add buildpack button, place this url,save it and redeploy:
https://github.com/heroku/heroku-buildpack-static
I was hoping to deploy a Next.js app with Laravel API. I had developed React apps with CRA and in those I used the API server to serve the index.html of the CRA as the entry point of the app.
But in Next.js, after development I get to know that it needs a Node.js server to serve (which is my bad, didn't notice that). There is an option next export that builds a static representation of the Next.js app and it has an index.html. I am serving the index.html as the entry of the app by my Laravel API. It is serving the page, but just some of the static contents.
What I was hoping to know is it possible to host the aPI and the Next app from a single PHP shared hosting without any node server? If so, how? If not so, what could be the alternatives?
Actually the acepted answer is completly wrong, when you do yarn build and in your package.json is set like "build": "next build && next export", you will get an out folder which all the items in there are used to build without node.js server
Now since you are using laravel, and you use the out folder you will only load half of the page because the routes are not set properly. for that to work you need to edit your next.config.js edit it to
module.exports = {
distDir: '/resources/views',
assetPrefix: '/resources/views',
}
These will set the root directory to the root one in Laravel. now this will work for SPA (single page application) only for the dynamic routes you need to match with a view file for each one that you have in your out folder
For each route that you have you need to create a new "get" route in laravel
Route::get('/', function () {
return require resource_path('views/index.html');
});
Route::get('/contacts', function () {
return require resource_path('views/contacts.html');
});
Route::get('/post/{slug}', function () {
return require resource_path('views/post/[slug].html');
});
Notice that you can pass a wildcard for dynamic routes and they are all gonna work. once you do that and you deploy route out folder inside /resources/views in Laravel it's going to work
Apparently there is no alternative to nodejs server, which is not an option for me currently, so I unfortunately had to abandon next.js and create a CRA app and used as much from the next.js as I could.
I'm using Nextjs for a front-end application and dotnet core 3.1 for the Web API. There are some pages that are static and other that are dynamic I followed the official documentation to achieve this. On development mode (local machine) everything works fine. Both static and dynamic routes are working properly and fetching data from the dontnet core Web API.
However, when publishing the Nextjs app following this steps:
yarn build
yarn export
An out folder is generated at the root of the project
The content of that folder is uploaded to the server
After, the deployed files are uploaded and when loging to the app, it redirects to the main page (until here is working OK), but as soon as I click on the reload page botton (Chrome) I am gettint the 404 error.
Looking at the console in the developer tools I got this:
I found this Stackoverflow link with same issue but there the answer is to use Express for server routing. In my case I am using dotnet core Web API for server requests. So, not sure how to do that.
Is there a way to fix this from the client side? Might be a configuration is missing?
The only thing I noticed while doing the export was a message saying: No "exportPathMap" found. Not sure if that would the the reason.
I had got similar issue in react when all of my pages after building and exporting had ".html" extensions. I solved it by the following code in next.config.js file.
next.config.js
module.exports = {
exportTrailingSlash: true,
}
Note: Do not work with the above code while in development. Use it just before building the project.
You can find the documentation link here: https://nextjs.org/docs/api-reference/next.config.js/exportPathMap#adding-a-trailing-slash.
UPDATE
The above code was for next.js v9.3.4 which I was using at that time. For newer versions below code should be used according to docs.
next.config.js
module.exports = {
trailingSlash: true,
}
it has been fixed update your nextjs package
npm install next#latest
based on the current version of Next js you have, visit here to see if there's any breaking change before updating what you have
I had a similar issue where after deploying the out folder created by next export all URL's would redirect me to the homepage. Everything was working fine during development and all URL's were accessible with next/link but in order to access pages with a URL I had to add a .html extension at the end of the URL.
Because I needed a quick workaround I added a useEffect block in the _app.tsx file for rerouting so that upon landing on the homepage it would act as if a Link component was clicked redirecting to the entered URL.
useEffect(()=>{
router.push(window.location.href)
},[])
Using the starter gatsby site, when I build it and load /public/index.html in chrome without running gatsby serve - none of the route links work. They point to the root of my drive - so <Link>'s look like this file://c:/page-2
I tried setting the pathPrefix in gatsby-config.js and ran a gatsby build --prefix-paths - but I can't get the route <Link>'s to be relative.
module.exports = {
pathPrefix: `/`,
....
Any ideas? I know this is possible with create-react-app without a server - as long as you set "homepage": "./" in package.json and use HashRouter - but not sure how to achieve the same in Gatsby.
I am trying to deploy my react app to Firebase (using firebase-tools).
The app was generated using this generator (which has deployment instructions in the readme). I followed them, but they didn't flag that Firebase overrides the index html, so they initial step replaced my html in the build file with the Firebase override. I copied my src/index.html back to the build file and re-ran the init, build and deploy calls.
I have an intercom script on the home page - the only part of the page that renders is the intercom icon. The rest of the page is blank.
I have seen this post. Like this user, I had to remove the predeploy script from my firebase.json because it was generating eslint errors.
The facebook create-react-app advice for Firebase hosting is to add an additional script to the firebase.json with:
"headers": [
{"source": "/service-worker.js", "headers": [{"key": "Cache-Control", "value": "no-cache"}]}
],
I also tried this, but it doesn't change anything.
I tried removing, reinstalling npm and then cleaning the cache (in the functions folder). I have noticed that reinstalling node modules does not result in a functions/node_modules/eslint folder. I'm not sure why.
Others have suggested chrome/devtools/application/clear storage/clear site data. I have tried it but nothing changes.
Some posts attribute the problem to firebase-tools - although more recent posts suggest that the error that gave rise to that solution has now been remedied.
Has anyone found a solution for this problem?
In firebase.json - change public from 'build' to 'dist'
"hosting": {
"public": "dist",