How to make a deployment package with nextjs without using zeit - next.js

I have a project developed with react + next, now I want to deploy it to my host.
I ran next build and it creates .next folder with this content, I don't understand the content of server, static and there is no index.html
(I would expect to see something like Angular dist output folder)
In their documentation here, after running next build command they used zeit to deploy

Related

NextJS to ElectronJS

I have a web app in NextJS and TypeScript working fine. Now, I want to move it to ElectonJS so I can move from the web and create desktop app versions. I have tried different approaches but nothing worked for me. I also failed to find a good documentation or article about migrating NextJS to ElectronJS.
I am using nextron but I can also use some other if recommended.
Approach 1: I created a new nextron app using "yarn create nextron-app my-app basic-typescript" command as mentioned on nextron guide. Then I moved the whole code inside the renderer directory but it is showing an error when I compile. Error in Approach 1
Approach 2: I created a dummy nextron app and install all necessary dependencies there, then I copied the files, dependencies etc to my NextJS app and moved the pages folder to renderer along with the necessary files but it is also showing error.Error in Approach 2
My NextJS App
Can anyone help please?

NextJS deployed to Vercel: 404 page not found

I have a NextJS app without an integrated api that I want to deploy to Vercel. It works fine when I run it locally yarn run dev and I can also build it yarn run build without any errors. When I deploy it Vercel, however, I receive a 404 Error.
Here is my folder structure:
app/
- components
- pages
- editor
- [id].tsx
...tsx
- public
- utils
- db
api.ts
I am using NextJs 10.0.3.
Here is a link to the deployed app.
I don't have a nextjs config file. My assumption is that the error is caused by the dynamic route but I can't find my mistake. Also, no page is working when the app is deployed as opposed to only the dynamic page.
Do you have pointers on where to look next?
EDIT 1:
Here is a link to the GitHub repo.
EDIT 2:
I found an issue but don't know how to fix it.
This is how my build output looks like on Vercel:
This is how it's supposed to look like on Vercel:
Not sure why the whole _next folder is missing.
I just had this exact same issue.
I have my Next app in a sub directory. I think that might be the cause of some problems.
What worked for me was.
Make sure to pick the right sub directory. Mine had a little Next Js icon on it.
The framework preset needs to be set to Next.js.
Go to Project Settings
Change Framework preset from Other to Next.js
Redeploy the project.
Edited
Try to deploy using
now --prod --force
The --force flag will clear your build cache (in production) and force production push.
If still no working then make sure to add now.json
Also make sure to choose Next.js as Framework preset (and not other). You can find that in Project settings and under Build & Development Settings.
More here: https://vercel.com/docs/concepts/deployments/build-step
My issue was that I first attempted to deploy Vercel through a team. When I created a new Vercel project under my individual Vercel account and deployed the same code, it worked! I hope this saves someone else time because I just lost 3 hours trying to find this. I'm using Next.js as well.
If you are trying to deploy through a team, you might need to configure the team ID in your vercel.json first e.g.
{
"currentTeam": "team_ofwUZockJlL53hINUGCc1ONW"
}
ref: https://vercel.com/docs/configuration#global/config-json/current-team

Firebase Hosting only deploying 2 files

I'm trying to deploy my site to Firebase Hosting with the following commands (see below). It used to work fine, but after changing project folders today it would only deploy 1 file (see pic) and the site is not working. After running firebase init and choosing no to configure as a single-page-app (reqrite all urls to /index.html), it is now deploying 2 files to Firebase hosting (and my public folder now has 2 files in it: index.html and 404.html). How can I return to deploying all 17 of my files to Firebase hosting again?
Commands I'm using:
ng build --prod
firebase init
firebase deploy
I finally got it to deploy after:
1) Running firebase init and setting public directory to dist
2) Running ng build --prod. This created a folder within the dist folder called 'hmn2' (my project name).
3) Copying all the contents within the hmn2 folder and pasting them one directory out, so they are directly under the dist folder. I also deleted the 'hmn' folder.
I'm not sure why it's putting them in another folder now (after upgrading to Angular 6). It didn't used to do this before.
I Had same issue with Ionic Just that below questions need to be answered correctly as below.
? What do you want to use as your public directory? www
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
? File www/index.html already exists. Overwrite? No
i Skipping write of www/index.html

I want to write a Firebase Function for a different project. How do I do that?

I have 2 different projects that I'm working on concurrently. I worked on the 1st project and have a native index.js file for that project. Then, I wanted to write Cloud Functions' code for the 2nd project. So, when I typed 'firebase init functions', it is saying that there's a default project that's selected (even after typing "firebase use project-id"). How do I rectify this?
PS: I completed the whole sequence once and the index.js file got overwritten. Luckily for me, I had a back up for the 1st project.
Edit 2: I changed directories and created a project but it overwrote the index.js file once again in the 'functions' folder. How to fix this? Should I navigate out of the home directory itself?
Configure Multiple Projects
The Web and Admin SDKs are configured by directly passing values to
their initialization functions. For these SDK, you can use a runtime
check to select development or production configuration variables.
On your development machine / project build out each app under a unique folder.
I am not 100% sure to understand the problem but here are two possible scenarios:
1/ You are working in a specific project, writing Cloud Functions (i.e. modifying the index.js file) and you want to work on another totally different project. Just create a new directory (outside of the current project) and initialize a new project there, as explained in the doc here: "https://firebase.google.com/docs/cli/#initializing_a_project_directory"
2/ You are working in a specific project, writing Cloud Functions (i.e. modifying the index.js file) and you want to deploy the same code to another Firebase project. Just do firebase use <alias_or_project_id> as you have mentioned and then firebase deploy (or firebase deploy --only functions). Of course, in this scenario, you may need to adapt some other parts of your code when swapping from one project to the other, like for example the JavaScript config object.
If this answer does not answer your problem, please give some more details.

Build a static site with polymer-cli

Ok I'm new to Polymer, after seeing the main page and Google IO 2016 video, I wanted to try it out, and right now I created a basic web application with it.
I managed to get it build and running it through the "polymer serve" command, but now that I want to release it to a production environment (I have an nginx cluster), how do I build the application to just a bunch of static website files?
I executed "polymer build" and I see the build folder and it contains 2 folders: bundled and unbundled, and inside them there are the bower_components, src and test folders as well as other stuff for running it through "polymer serve" but there's not a build/dist of build/static folder that I can copy into nginx so the application is served through it.
BTW, what I mean about a dist folder is without a readme, bower.json, test, bower_components, etc. just the pure needed HTML, CSS, JS, etc files that need to be served through nginx (or any other web server) as static file web content.
I went through the documentation but there's no details on how to do such task.
Any suggestions on how to build a static content folder for serving my polymer web app through nginx?
Thanks!
As of Polymer-CLI v0.11.0, there's no built-in way to filter out files from the bundle, but it's a requested feature. Also, the build output currently includes extraneous files (a bug), such as the test directory.
As an alternative, you could use Polymer Starter Kit 1.3.0, whose dist folder doesn't include the extra files (although it does include required bower_components as-is).

Resources