I am adding my project to monorepo , my project is nextJS 12.1.4 and when i import the UI from Package folder after all steps from the docs of Monorepo i have this problem.
I already have .babelrc file and tsconfig and it is working fine , but when adding the webpack.config.js with ts-loader it fire this error
I've started building next.js app and I tried to deploy it on firebase. My dev server on local machine displays correct page, built with next.js, but when I deploy it, it displays index.html
dev server:
On my firebase server there is a blank page from public folder.
How to show default next.js page on firebase, and why is it going like that?
I've followed the steps included in this tutorial: https://www.youtube.com/watch?v=bReCIxeWayw
and then executed command: npx firebase deploy
My directory structure:
.firebase
.next
node_modules
out
pages
public
styles
.firebaserc
.gitignore
firebase.json
next.config.js
package-lock.json
package.json
README.md```
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
The project I am working on uses vue and vuetify with dotnet core MVC. A directory is created to contain vue code but after compilation, the asset reference is not consistent. The bundle goes to the wwwroot folder and the bundled assets try to reference that folder but it cannot because of dotnet. I used vue.config.js for the bundle configuration. When the project is run the asset references https://localhost:5000/wwwroot/build/img/image1.png but the correct location is https://localhost:5000/build/img/image1.png
How do I make it reference the correct location?
set publicPath to 'wwwroot' in your vue config file
see detail
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: '/',
...