Let's say I've this folder structure:
pages/index.js
pages/contact/index.js
with pages/index.js having this link:
<Link href='/contact'>Contact me</a>
If I run the production build locally:
yarn build
yarn start
(yarn build comand: next build && next export, cause I want to self-host it as a static html website)
Link works fine. But if I move that on my production machine, and I click the Link, I get a 404 error, which I can manually work around adding '.html' at the end of the url in the address bar:
/contact -> /contact.html
which is pretty obvious due to the build structure, that flats all the pages/folder in root renaming the index.js file with its floder name. Nonetheless, it works fine on my machine.
If I change the href to /contact.html, it works fine in production, but get broken locally.
So I believe there is some mismatch between my local server and the production one. What can I do to have the same build working on both machine?
Related
I have a strange issue with nextJS.
I created new directory components in the root folder and added some test component files.
While I try to import it, the pass exists, but at localhost I have error:
Module not found: Can't resolve '../../components/admin/AdminBoLayout'
The path is correct, and the component works 100% (tested this code with another nextJs project).
Why does problem appear?
P.S. according to this article, components directory exist in nextJs project structure.
Solved: just Ctrl+C and npm run dev in terminal
(restart localhost)
I just install new pwa onsen UI project for vue-cli using npm. All components working properly only icon components not showing icon while running app.
Even, I uncomment from v-ons-components file v-ons-icon
still its not working
I also wasn't seeing v-ons-icon components although everything else showed. The icons did show when in npm run dev but not after npm run build when opening the app from the built index.html file or running the app in the android emulator.
I got errors like GET file:///Users/[username]/[appname]/www/dist/static/css/static/fonts/fa-solid-900.132e975.ttf net::ERR_FILE_NOT_FOUND` and the file it was looking for would be in the place it was looking for, just without the "css" folder.
For example, the build would point to a www/dist/static/css/static/fonts/ folder for the font files, although it had placed those files in a www/dist/static/fonts folder. ... it was assuming a "css" folder to be there that wasn't there. The build process was somehow extracting the fonts reference into an additional "css" folder.
Since fonts were working in dev but not build, I compared webpack.dev.conf.js to webpack.prod.conf.js.
The webpack.prod.conf.js file contained extract: true inside of rules: utils.styleLoaders. This "extract" setting was not contained in the webpack.dev.conf.js file, so I deleted extract: true from webpack.prod.conf.js ... and then, when I ran npm run build again, the v-ons-icon components showed!
Using Ubuntu 16.04 and Nginx I am trying to deploy a Vue project to production but keep running against a white wall- literally.
I cloned my project to
/var/www/html/maak-web/maak_web/
Installed all needed dependencies with npm install and ran the following build script:
node build/build.js
This started the building for production which was successful and the project deployed.
In my nginx default config I changed the root to point to the correct folder like so:
root /var/www/html/maak-web/maak_web;
When I now visit my domain/IP I see that the project loads (e.g. favicon and site name loads) as well as I can access my static files from here:
https://mysitedomain.com/static
It seems the Vue project works but the problem is that it doesn't actually display anything and visiting sub views like /oneview and /anotherview throw 404 page not found errors.
Since Vue doesn't seem to throw any errors I suspect its the nginx configuration problem!?
The solution was to build the production into /dist/ folder and publish only the /dist/ folder content. Once I copied the content to /www/html/ it worked fine.
seeing that this was an error with not getting the right files to the output folder, i suggest you update your config/index.js file to include the correct production location there by setting index and assetsRoot for the build object
build: {
// Template for index.html
index: path.resolve(__dirname, '../../srv/www/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../../srv/www'),
assetsSubDirectory: 'static',
assetsPublicPath: '/',
...
My gruntfile.js has been created by Yeoman angular-generator. When I run this in development site using grunt serve, it works fine, but using grunt serve:dist it does not work. The site is opened but views link do not work only Home link works, I think it is because other view templates are not reachable.
Gives following error after running grunt serve:dist
Running "ngtemplates:dist" (ngtemplates) task
File .tmp/templateCache.js created.
Usemin has not created uglify.generated yet!
My Gruntfile.js is below:
https://github.com/charutiwari04/dashboard/blob/master/Gruntfile.js
Can anybody help me on this?
im trying to install PhantomJS in a MeteorApp.
I have done those step:
Add the npm package
meteor add meteorhacks:npm
Run meteor to let the npm package to pre-initialise
meteor
A file packages.json has been created at the root. Edit it to:
{
"phantomjs": "1.9.13"
}
A this point everything seem to work. But i try to test with this exemple that ive found here :
https://github.com/gadicc/meteor-phantomjs
But i dont understand where to put my phantomDriver.js
Why is phantomDriver.js is in assets/app/phantomDriver.js... but after, they say to create the file in ./private/phantomDriver.js...
Thank for clear explication :)
In development mode you create the file in /private/phantomDriver.js. When you build a meteor app it refactors everything into an application bundle which can be run.
After meteor builds your app it stores stuff from private into assets. For phantomjs to execute this file it needs to look in this directory. You don't have to create it. This is how meteor works internally.
If you look in your .meteor/local/build/programs/server directory the assets directory is there with anything you placed in private.
From the context of where your meteor code runs (the server directory above) the assets directory runs from this directory when your project is running.
Keep in mind when you deploy your app it loses its entire project structure and becomes something else. Gadi's phantomjs project is designed to work in production environments too.
TLDR; Don't worry about the assets directory, keep your file in /private/phantomDriver.js. Meteor should take care of the rest.