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: '/',
...
Related
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?
In a create-next-app Next.js application, I want to move the pages folder in the root directory to a src folder. I added a jsconfig.json with the code (below), however now I get the error message "404 | This page could not be found." Anyone have any insight? (Sorry beginner to web development)
{
"compilerOptions": {
"baseUrl": "src"
}
}
Nextjs by default supports moving /pages to src/ folder.
Create a /src folder in the root directory.
Delete the /.next folder
Move /pages to the /src folder
Remember package.json, .gitignore and other config files needs to be in the root directory and should not be moved to the /src folder.
Once that is done just run the command $ npm run dev or $ yarn dev , so you can view it on your localhost.
More: https://nextjs.org/docs/advanced-features/src-directory
In case you are using NextJS + TailwindCSS, you need to change the following in tailwind.config.js after moving files under the src directory:
module.exports = {
content: [
'./pages/**/*.{js,ts,jsx,tsx}',
'./components/**/*.{js,ts,jsx,tsx}',
],
...
...
You need to stop the server and then do npm run dev. That solved my problem when I moved things into the src directory and started getting 404 pages.
content: [
'./src/pages/**/*.{js,ts,jsx,tsx}',
'./src/components/**/*.{js,ts,jsx,tsx}',
],
replace above in case of src
As #Thierry mentioned in the comments, according to the docs "Pages can also be added under src/pages as an alternative to the root pages directory. The src directory is very common in many apps and Next.js supports it by default."
So, src/pages will be ignored if pages is present in the root directory.
More at the official docs: https://nextjs.org/docs/advanced-features/src-directory
src/pages will be ignored if pages is present in the root directory
Update tsconfig.json (if you use Typescript)
"paths": {
"#/*": ["./src/*"]
}
Reload npm run dev
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)
So I have a cap file linked to my github and setup to deploy my project to my server. When I run
bundle exec cap prod deploy it all works without a hitch.
I can see my code being cloned from my repo, a new release folder is created and symlinked to the current folder. However any changes I've made to my code aren't reflected.
The repo being cloned is a fork of the original repo which I created when I began working on the project. I haven't made any changes to code base except adding a single line to a twig file.
I have updated the deploy.rb so that it pulls from my forked repo instead of the original one and can see the code change in my latest commit. However the change is not reflected on the site.
Any ideas why this might be happening?
Cheers
Two possibilities come to mind other than using the incorrect URL to the forked git repository -
I occasionally try to deploy a new copy of my own site, but I have not yet pushed the latest code from my development server (and the local repo) to the live repo on Github, but it is from Github that the code is being fetched from during deployment.
As a final step, Capistrano changes the location that the 'current' symlink points to the newly deployed directory in the 'releases' directory. Your webserver (apache or Nginx must be set to use the 'current' symlink) as part of the base directory (it will probably be ..../current/web/, and then auto-load app.php from that directory, unless there a subdirectory/file exists, for .CSS/JS/images/etc). If the webserver config refers to the 'release' directory, and not the symlink, it will only be a specific, older, deployment.
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.