Originally, I had my distDir set to a folder within my Firebase Functions directory for deployment, however, the duplication of React when running the app in dev mode led to some errors, so I've had to comment it out.
Is there a way to specify the next build commands output directory within the command? Like next build dir='../functions/next'.
Or is there a way to separate dev builds directory (from the next command) from the production builds (next build) within the config?
I found following solution for this problem:
You can set custom environment variable that decides where your build will be generated:
BUILD_DIR=myBuilds/buildXYZ yarn build
OR
BUILD_DIR=myBuilds/buildXYZ npm build
In the next.config.js you can use your environment variable like this:
module.exports = {
distDir: process.ENV.BUILD_DIR || '.next',
}
Now your build will be dynamically generated in the myBuilds/buildXYZ directory defined in the BUILD_DIR variable.
One thing to notice: If you want to use the next export command (or any other command using the build directory), you should also add the environment variable before it, e.g.:
BUILD_DIR=myBuilds/buildXYZ yarn export
According to https://github.com/zeit/next.js/issues/1513, this may need you to update to the next version. But it looks like they added a feature to next.config.js file. All you have to do is add the destination for your dist:
module.exports = {
options: {
dist: '.next'
}
}
Haven't tested it, but it was successfully merged to master and marked as resolved.
Related
With the new outputStandalone experimental feature (https://nextjs.org/docs/advanced-features/output-file-tracing#automatically-copying-traced-files-experimental) we can, after the build, have a standalone folder that contains the necessary dependencies, we simply copy it into our docker and don't need to rebuild inside the docker. It automatically detects the necessary dependencies in the source code UNLESS that dependency is only used in our package.json.
We use cross-env to start our Next app and of course this library is never imported in our source code, yet it needs to be present in the node_modules of the standalone folder.
So how can I force #vercel/nft to include a specific dependency ?
My case was that our dockerized Next.js project used Knex.js, where migrations were invoked with a npm script. Following this, some dependencies only required for knex.migrations() were never included in the standalone output.
Credits to sbstn, you can use unstable_includeFiles to create a list of dependencies, which should be included in the standalone output. This solution scans for .js and .json in a node_modules/ directory.
It should be highlighted that this setting is not available inside next.config.js, but as a page config prop, meaning it has to be exported inside a export const config = {} from a page different from _app.jsx and /api routes.
// pages/index.jsx
export default function Home(){
...
}
const requiredStandaloneDependencies = [
// some required deps that have not been included in standalone
"commander",
"debug",
"escalade",
"get-package-type",
"getopts",
"interpret",
"lodash",
"pg-connection-string",
"rechoir",
"resolve-from",
"tarn",
"tildify",
];
export const config = {
unstable_includeFiles: requiredStandaloneDependencies.map(
(dep) => `node_modules/${dep}/**/*.+(js|json)`
),
};
As a final thought for my case, where migrations are invoked with a custom npm script, npm run migrate:latest, I should also be able to circumvent the issue using programmatically invoked migrations. I'm just unsure as to how I add the method to the Next.js project tree to be run during runtime initialization.
I am working Azure DevOps Pipeline to build and deploy React JS application. It contains config.js file which some variables that needs to modified for different environments. Anyone help me how to handle the config.js in Release pipeline while deploying to different stages?
I marked this question as duplicate because I think there is already a suitable answer. Nevertheless, I remembered two other approaches for achieving what you are looking for:
1. Storing your variables in .env files
You can easily store your variables in .env files like described here. You then need to give each .env file a different name for each environment. You could end up having a .env.developemt, a .env.production, ... and so on in your repository. Then you can use the following YAML for building according to your desired environments:
# Node.js with React
# Build a Node.js project that uses React.
# Add steps that analyze code, save build artifacts, deploy, and more:
# https://learn.microsoft.com/azure/devops/pipelines/languages/javascript
pool:
vmImage: 'ubuntu-latest'
steps:
- task: NodeTool#0
inputs:
versionSpec: '10.x'
displayName: 'Install Node.js'
- script: |
npm install
npm run build:staging
displayName: 'npm install and build'
- task: PublishBuildArtifacts#1
inputs:
PathtoPublish: 'build'
ArtifactName: 'drop'
publishLocation: 'Container'
For each build pipeline, you then use a adjusted YAML. In the shown YAML, you can add custom triggers and stuff. And of course, you need to change the staging to the environment name that you want to build. In that concrete example, if you have a .env.development and a .env.production, you will end up with two YAMLs, one where the staging is replaced by production and one where the staging is replaced by development.
2. Store your variables in JSON files
You could store you variables in JSON files and then use the JavaScript files (which previously stored your variables) to load the data out of those JSON files. Here is how this can be done in detail:
Create a file JSON file which contains all the variables you need to change depending on the environment, e.g. config.json with the following content:
{
"key1":"",
"key2":"",
"key3":""
}
Now you can use the File Transform Task of Microsoft in you Release Pipeline to modify this JSON file. The task will take the variables defined in the pipeline (as described here) and will overwrite any value in the JSON file which has a matching key. For example, you define key2 = "foo" in your pipeline. The File Transform Task will produce this JSON:
{
"key1":"",
"key2":"foo",
"key3":""
}
Last but not least, you need to get the variables defined in your JSON file into your react app. Therefore, you can simply load the config.json into your JavaScript file (which contained those variables before) with the following command:
export const config = "./config.json";
I hope this helps. If anything is unclear, just leave a comment and I can try to explain it :)
I have a file that i need compulsory to make my application work,i am able to use the file in development by specifying fixed path var path = process.cwd() + '/src/app/components/task/Scripts'; and the file name after that,but after packaging the app i want to move the file i need in extraResources folder in system from where i will be able to use it let path = pathPackage.join(process.resourcesPath, 'extraResources');,i am using electron-forge maker to produce a production build exe,how ever there is no extraResources folder created after installing the exe,i am specifying it in package.json file
"build": {
"extraResources": [
"./extraResources/**"
]
},
Can someone provide a solution for it,i have tested all examples but none of them worked
As it mentions in the documention (actual options documented here), you can add files using the extraResource option of the packagerConfig configuration.
extraResource
extraResource: string | string[]
One or more files to be copied directly into the app's
Contents/Resources directory for macOS target platforms, and the
resources directory for other target platforms. The resources
directory can be referenced in the packaged app via the
process.resourcesPath value.
For example, in your package.json file:
{
"config": {
"forge": {
"packagerConfig": {
"extraResource": [
"./src/extraResources/file.txt",
"./src/extraResources/folder"
]
}
}
}
}
The files will be placed in the process.resourcesPath directory when running npm run package.
The build files generated through create react app have different names(hash code) every time.
I would like to give a custom names for the generated files.
Is there any possibility to do the same?
You can change the output filename by customizing the filename property in webpack config -- refer to https://webpack.js.org/guides/caching/
The default implementation is kept like this because, because every time you build an asset, it generates a new name and browsers won't be able to serve a cached response.
If you change the name to a constant you might need to clear the browser cache manually/ disable cache to see your changes immediately. (I think...Applicable only in prod mode as dev mode makes use of Hot module replacement)
Steps to change file name in CRA.
npm run eject This will unwind the hidden configs from CRA and show some additional config folders
Move to the config folder.
Edit file webpack.config.js (Somewhere around line 172 - 180 you can see filename: section where this is defined)
Following up to my comment, if you absolutely must change Webpack configuration you can also consider libraries such as:
Craco
Rescripts
I'm using Yeoman 1.0 and the latest version of the Backbone generator and everything I've written is working in development, however when I $ grunt build the resulting /dist is throwing the error:
Uncaught ReferenceError: Backbone is not defined
Unfortunately, since the js has been minified, trying to debug is almost pointless. Is there a way to "build" without the minification? I've tried playing around with settings in the gruntfile but can't seem to find the right options for the right task.
Can you share your GruntFile.js to check the configurations?
By the way, you can omit the minification, don't use uglify or whatever task you have been running so, give it a try to grunt-contrib-copy task which copies the files to designated folder (prod/dist).
https://github.com/gruntjs/grunt-contrib-copy
// Configuration goes here
grunt.initConfig({
// Configure the copy task to move files from the development to production folders
copy: {
target: {
files: {
'prod/': ['dev/**']
}
}
},
});