I'm unable to find any examples of what needs to be done to deploy nextjs with fallback: true enabled.
using export it throws an error that it can't be exported this way if fallback: true is enabled.
And if I use npm run build it doesn't seem to generate the out folder.
How can I run a build and generate the out folder with fallback: true enabled in my app
netlify.toml
[build]
command = "npm run build && npm run export"
publish = "out"
package.json
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"export": "next export"
},
You can't use use npm run build to generate static 'out' folder (i.e. static html-files). Thats becouse with fallback enabled, your site became 'non-static'. So it can be deployed only on servers thats run NodeJS. You may start server with node start or implement your own NodeJS server. This is a most misunderstanding point about SSG\SSR. More info at https://nextjs.org/docs/advanced-features/static-html-export
The other posts didn't explain why it doesn't work.
If you have fallback as true that means you have pages with dynamic routes (path/[pid].js) and you DON'T want to pre-render all the pages. You want some pages to load without data, maybe because you want to load data manually.
When you use NextJS's export, it creates a static app with no supporting backend so that the app can be served on a static host.
For each pre-rendered path, NextJS will generate a directory structure to match the prerendered path.
If you have:
product/1, product/2, product/3 then NextJS will create those directories.
But if you have routes that are not prerendered like product/4 then NextJS will not create that directory, then when the user opens their browser to exmample.com/product/4 it will 404!
As stated here you can't use next export if you use fallBack: true, if you have a lot of dynamic pages, better host your application on any node.js server and use next start instead. Static HTML Export (out folder) is only useful when the new pages are not added often
Related
I startet an Electron project based on the official sample project from Vercel (https://github.com/vercel/next.js/tree/canary/examples/with-electron-typescript). Now I want to add eslint to the project. I have done it like the docu says (https://nextjs.org/docs/basic-features/eslint). But eveytime I run npm run lint I get an error "Couldn't find a pages directory. Please create one under the project root".
I tried to set the "rootDir" like described in next.js docu but that also ends in that error message.
If I change the lint script in package.json from "next lint" to "eslint /renderer" it seems to work but with an error "Pages directory cannot be found at . If using a custom path, please configure with the no-html-link-for-pages rule in your eslint config file." and VSCode seems to ignore the rules.
How can I setup eslint to use the renderer folder of electron as next.js root dir?
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.
In the Next.js 9 tutorial the suggested way to import shared components is by relative paths, like
import Header from '../components/Header';
I want to use absolute imports, like
import Header from 'components/Header';
How do I make this work both locally and when I deploy using the Now CLI?
Using the suggested setup from the tutorial, my project structure is:
my-project
├── components
├── pages
└── package.json
Next.js 9.4 and later
If you're using Next.js 9.4 or later, see Black's answer.
Next.js 9.3 and earlier
There are different ways of achieving this, but one way – that requires no additional dependencies and not too much config – is to set the environment variable NODE_PATH to the current directory, i.e. NODE_PATH=..
1. Make it work locally
I think the easiest way to set NODE_PATH=. when running the dev/build scripts in your package.json locally (e.g. $ npm run dev or $ yarn dev), is to add it to each script in package.json:
"scripts": {
"dev": "NODE_PATH=. next",
"build": "NODE_PATH=. next build",
"start": "next start"
},
2. Make it work when you deploy
When you deploy to ZEIT Now, NODE_PATH must be set in a different way.
You can add a Deployment Configuration by adding a now.json file (it should be in the same directory as your package.json). If you don't have a now.json file already, create it and add the following contents:
{
"version": 2,
"build": {
"env": {
"NODE_PATH": "."
}
}
}
This tells Now to use NODE_PATH=. when buildnig your app (see build.env).
(It also tells Now that we use Now platform version 2 which is currently the newest version (see version). Omitting the version will give you a warning when you deploy using $ now.)
In Next.js 9.4 it is possible to do it by adding the baseUrl config to jsconfig.json (JS projects) or tsconfig.json (TS projects).
// jsconfig.json or tsconfig.json
{
"compilerOptions": {
"baseUrl": "."
}
}
This will allow imports from the root directory. It also integrates well with IDE such as VS Code. See documentation for more information.
Change web pack configuration:
//next.config.js file
module.exports = {
webpack(config) {
config.resolve.modules.push(__dirname)
return config;
},
}
Then use it like this:
import TopBar from 'components/TopBar' // for components
import "public/baseLine.css" // for any public resources
I am building an application with Symfony 4 and I'd like to follow the best practices for web assets. I use Encore/Webpack for SCSS and JS and it works well; the resulting JS+CSS are nicely stored in /public/build folder. I'm stuck at how to store and use static assets like images, movies, sounds.
Should images be stored in 'public/images' folder or in 'assets/images'?
And some followup questions:
If the images are stored in public/images, will I get any benefit if I pollute the templates with asset('...') calls?
If the images are stored in assets/images, then:
How are they moved into public/images to be served via http? ./bin/console assets:install did nothing, saying: '[OK] No assets were provided by any bundle.'.
How do I use them in SCSS? Via relative paths?
Regards,
Should images be stored in 'public/images' folder or in 'assets/images'?
Everything in public/ is available through the browser. In here, only production ready and build things should be put.
As your images don't need any processing (I assume), you can (should) indeed put the images there.
Now, assume you're needing to do some processing (e.g. ugly JPEG compression), you would put the images in assets/, do some processing and then put only the processed images in public/.
If the images are stored in public/images, will I get any benefit if I pollute the templates with asset('...') calls?
Yes, asset() doesn't have anything to do with Encore or asset build management. The only thing it does is fixing your URLs. This means that if you move your app to sub directories on your server (example.com/app/), the URLs will automatically adapt. Read more about it in the Asset component documentation.
Another good way to reference images with asset() method in Symfony 4 is copying images in public/build when building assets with Encore.
Use copyFiles() in Webpack Encore
Webpack Encore provides a function to copy your images on the public directory to allow asset() to access those files : copyFiles().
In your webpack.config.js
Encore.
...
.copyFiles({
from: './assets/images',
to: 'images/[path][name].[ext]',
pattern: /\.(png|jpg|jpeg)$/
})
Error: Encore.copyFiles is not a recognized property or method.
Please by sure that you are actualy using symfony/webpack-encore-bundle and not
symfony/webpack-encore-pack as described here.
composer require symfony/webpack-encore-bundle
composer remove symfony/webpack-encore-pack
yarn install
yarn upgrade
yarn run watch
My package.json
{
"devDependencies": {
"#symfony/webpack-encore": "^0.22.0",
"bootstrap": "^4.1.3",
"node-sass": "^4.10.0",
"sass-loader": "^7.0.1",
"url-loader": "^1.0.1",
"webpack-notifier": "^1.6.0"
},
"license": "UNLICENSED",
"private": true,
"scripts": {
"dev-server": "encore dev-server",
"dev": "encore dev",
"watch": "encore dev --watch",
"build": "encore production --progress"
}
}
Edit webpack.config.js after
Encore
.setOutputPath('../build/')
Add the following lines. You can also do more configuration by uncommenting the lines
.enableVersioning()
.copyFiles({
from: './assets/images',
// optional target path, relative to the output dir
to: 'images/[path][name].[ext]',
// if versioning is enabled, add the file hash too
//to: 'images/[path][name].[hash:8].[ext]',
// only copy files matching this pattern
//pattern: /\.(png|jpg|jpeg)$/
})
Now you can use image by
Source: https://symfony.com/doc/current/frontend/encore/copy-files.html
Details: http://toihid.com/?p=332
This seems like something which should be pretty easy to do, but for whatever reason, I'm being defeated.
I'm trying to use the firebase-tools CLI to interact with my database. I'm able to login without any trouble, and when I type firebase list, I get a list of all my current apps. It also tells me which app I'm currently connected to.
My problem is, I want to connect to one of the other apps. I'm running queries on my staging app, and I need to run them on my production app. I can see the production app in the list, but I'm not finding any way to switch to that app.
Thoughts?
Found some useful information here Firebase CLI Reference.
The following code works for me.
firebase use <project_id>
I rather use scripts. Consider a project structure like this:
your-project
├── .firebaserc
└── functions
├── package.json
└── index.js
Go to .firebaserc and follow the next example
{
"projects": {
"default": "project-name",
"prod": "other-name"
}
}
Then go to package.json and add the following scripts (changeToProd, and changeToDev).
{
...
"scripts": {
...
"changeToProd": "firebase use prod",
"changeToDev": "firebase use default"
},
"dependencies": {
...
},
...
}
If your IDE support npm scripts you can run them using the IDE UI, otherwise it can be run using the command console. Make sure you are inside the functions folder.
npm run-script changeToProd
You can verify your current project by running the following command from the terminal or added to the scripts as we just did
firebase use
If you are using Node.js on windows, your answer should be
firebase use <project_id>
but without the <> for example
firebase use chat-app-2a150
You can use the following code to view all your projects so as to pick the correct project ID to use
firebase projects:list
2020:
The officially recommended way is to use "alias":
In your .firebaserc, set different project IDs like this:
{
"projects": {
"production": "my-project-id",
"testing": "my-testing-project-id"
}
}
// you can also add them interactively with `firebase use --add`
Then switch projects in CLI with firebase use testing , firebase use production.
Note: switching projects won't create any git diff, it's simply remembered in your local machine. Use firebase use to see which project is currently being used.
Uncommon cases:
If you want to use your own ID without committing changes to the project owner's .firebaserc, do firebase use my-own-id locally as mentioned in the accepted answer.
If you want people to fork your code then use their own IDs, add .firebaserc into .gitignore.
In the directory where you run firebase list, there will be a file called firebase.json. If you open that in a text editor, you will see the app name in there. You can change it there or delete firebase.json to change the app.
Or save yourself the hassle of editing a text file and do as Jason says: use firebase init.
you can just use a command line switch
--project=my-firebase-project
I may be wrong but it seems that the original question was about changing apps within a given project, rather than simply changing projects.
This answer is about changing apps and site_IDs within a project.
In my case I have a project (CoolProject) with 2 web apps:
an assessment form: form
a main website: website
Both apps are in separate repos both locally and in GitHub.
Each app has its own specific site_ID:
form: coolproject-form[.web.app]
website: coolproject-website[.web.app]
I first setup the form app and deployed without any issue to coolproject-form. But when I created the web app (and associated coolproject-website site_ID) and tried to deploy it using firebase deploy --only hosting or firebase deploy --only hosting:website it incorrectly deployed it to coolproject-form overwriting the form app.
This is how I eventually solved the issue (based on this Firebase documentation):
Check that both apps and corresponding site_IDs are correctly setup:
firebase apps:list
firebase hosting:sites:list
Setup up the website deploy target for hosting (via .firebaserc)
firebase target:apply hosting website coolproject-website
Update firebase.json (for the website app):
...
"hosting": [{
"target": "website",
"public": "build",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}],
...
Deploy
firebase deploy --only hosting
With this the website app is now correctly deployed to coolproject-website.web.app.
Addition #cutiko's answer
In package.json
"scripts": {
...
"prod": "echo \"Switch to Production environment\" && firebase use prod && npm run runtimeconfig",
"dev": "echo \"Switch to Development environment\" && firebase use default && npm run runtimeconfig"
...
npm run runtimeconfig to get custom config environment
In .firebaserc
{
"projects": {
"default":"{project-dev-id}",
"prod": "{project-prod-id}"
}
}
to change firebase app destination project you can type "firebase use myProjectName" . i also used the above answeres "firebase list" to check what project i have
( work for me in firebase cli 7.4 with angular 7 app)