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```
Related
I am trying to deploy my next.js file to firebase.
The command firebase deploy --only hosting works, but the deployed file is not built in the file of next.js.
I tried this:
I edited package.json, script.build setting next build into next build && next export
thus the /out folder was automatically created.
I set the /out folder as the public directory and then executed firebase deploy.
Here is the guide I used:
https://medium.com/nerd-for-tech/lets-deploy-a-next-js-app-with-firebase-hosting-e070b3aecd04
Obviously this failed. That is why I am asking for help.
When I edit index.html in the /out file and then deploy, it is successfully deployed.
Here is the picture:
I am expecting that the problem is on building the next.js file.
Is there anyone that knows what to do in order to build it successfully?
next.config.js is a regular Node.js module, not a JSON file. It gets
used by the Next.js server and build phases, and it's not included in
the browser build.
The official website says above, does this mean next.config.js is not included in the .next folder?
I was building a small web app using Vue cli and webpack/babel. I've been working for a month using "npm run build" and placing the files created in th "dist" folder on my server. Now I would like to add Firebase to the project but "Firebase deploy" command doesn't build the same files. It actually creates a new placeholder index.html file and even if I replace that file file for my previous html I'll get loads of errors because all the other components are not there (no JS no CSS)...
This is my firebase setup.
These are the files I used to create using "Npm run build" in the "dist" folder
The new "Firebase deploy" files – now in the public folder – no JS no CSS!
The errors I get now...
It seems like now all the dependencies that were build nicely put together by the Vue Cli webpack/babel workflow are all gone. Any suggestions on how to fix this without having to start from scratch?
Now even if I type NPM run build i get errors:
With npm run build you build your Vue.js application, independently of Firebase.
It is not clear to me if you still build your app to the dist directory or to the public one. But, based on your Firebase setup ("What do you want to use as you public directory"), at the end you need to have ALL the files (incl. css and js) produced by npm run build in the public directory.
One simple solution is to change the public directory of Firebase to dist: you can do that in the firebase.json file and change "hosting": {"public": "public",... to "hosting": {"public": "dist", ....
A last point: you have answered No to the question "Configure as a single-page app". Normally, with a Vue.js app you should answer Yes.
I want to deploy my nuxt.js project on a windows server, plesk shared web host.
I have done the following steps:
I have build project using 'node_modules/nuxt/bin/nuxt-start'
copy .next folder to httpdocs folder in server
copy 'nuxt.config.js' to httpdocs folder
copy 'package.json' to httpdocs folder
deleted web.config file
In the field Application Startup File you have to put node_modules/nuxt/bin/nuxt-start
installed npm packeges on server
but it does not run on the server and I get the following error:
This site can’t be reached
what is wrong?
What are the correct steps to deploy nuxt project on plesk?
Thank you
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: '/',
...