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?
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```
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.
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: '/',
...
I cloned a quickstart angular application.
I run firebase init and firebase deploy,
and output shows deploy successful. I naviagate to the url, but it just shows the Welcome screen. Why don't I see my content?
After running: firebase init
Few questions will be asked and Reply(In Bold) as follows:
Are you ready to proceed? : Yes
Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your choices. : Hosting: Configure and deploy Firebase Hosting sites
=== Project Setup
Select a default Firebase project for this directory: Your firebase Project name
=== Hosting Setup
What do you want to use as your public directory? dist
Configure as a single-page app (rewrite all urls to /index.html)? No
File dist/404.html already exists. Overwrite? No
File dist/index.html already exists. Overwrite? No
-----Firebase initialization complete!-----
Now Re-run your app using: ng build (Imp step)
----Deploy----
firebase deploy
The repo I cloned didn't place an index.html file in the /dist directory.
The welcome screen is the default index.html that firebase creates.
I jsut had this issue, its because I ran a build and then firebase init which caused the /build/index.html file to be overriten.
After you init the firebase project just rerun the build and then deploy.
there is no problem if you ran build and then do firebase init.
After deployment, if you see the welcome screen. Before doing anything just wait for some time and Refresh the page. it worked for me
Angular projects aren't built directly inside /dist. They are usually built like /dist/your-project-name
So when you firebase init and you are asked What do you want to use as your public directory? provide it /dist/your-project-name instead of just /dist
And if /dist/your-project-name folder really has your project then it'll surely ask you File dist/your-project-name/index.html already exists. Overwrite?, you say no
In case it didn't ask you about overwriting then it means the public address you gave above is either incorrect or maybe you haven't yet built your project using ng build command.
Don't forget to rebuild you application again before firebase deploy. Your dist folder should be same folder name you setup as the public folder during your firebase init.
I had same problem with my deployed react app using Firebase to solve that as suggested above in first answers rebuild your app after running firebase init successfully & before running firebase deploy command. Then deploy your app.
If it's first time then you see welcome screen with hosting documentation. Then wait for few minutes around 15 to 20 minutes, then open app URL. It's running
Update the firebase.json file
"hosting": {
"public": "dist/your-app-name"
for ex: my app name is "DataView" and looks like this the firebase config file:
"hosting": {
"public": "dist/DataView",
Important:
If you are already tried to deploy the flutter web app project, then 1st remove (1).firebase,(2)build,(3)firebase.json from your project directory root page.
then just follow the below 7 steps-->
1 step: First run firebase init
######## #### ######## ######## ######## ### ###### ########
## ## ## ## ## ## ## ## ## ## ##
###### ## ######## ###### ######## ######### ###### ######
## ## ## ## ## ## ## ## ## ## ##
## #### ## ## ######## ######## ## ## ###### ########
You're about to initialize a Firebase project in this directory:
{project path}\{projectname}
Before we get started, keep in mind:
* You are currently outside your home directory
2nd step:
? Are you ready to proceed? Yes
3rd step:
? Which Firebase features do you want to set up for this directory? Press Space to select features, then Enter to confirm your choices. Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Actio
n deploys
=== Project Setup
First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
but for now we'll just set up a default project.
i Using project ****21ed1 (projectname)
=== Hosting Setup
Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.
4th step:
? What do you want to use as your public directory? build/web
5th step:
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
? Set up automatic builds and deploys with GitHub? **No**
+ Wrote build/web/index.html
i Writing configuration info to firebase.json...
i Writing project information to .firebaserc...
+ Firebase initialization complete!
6th step:
Then run: flutter build web
Building with sound null safety
Compiling lib\main.dart for the Web... 2,656ms
7th step:
Then run: firebase deploy
=== Deploying to '****21ed1'...
i deploying hosting
i hosting[****21ed1]: beginning deploy...
i hosting[****21ed1]: found 15 files in build/web
+ hosting[****21ed1]: file upload complete
i hosting[****21ed1]: finalizing version...
+ hosting[****21ed1]: version finalized
i hosting[****21ed1]: releasing new version...
+ hosting[****21ed1]: release complete
+ Deploy complete!
Just refresh the page . If you had deployed your project currectly. Its just a matter of refresh , that will show your content. 😊