I want to build with NODE_ENV=development environment in Next.js.
I have .env.development, .env.production in my project.
When I write the command line npm run build:dev in my terminal,
Loaded env from {projectName}/.env.production is output.
How can I build with not production but development environment?
Here is my package.json and next.config.js
please help me....Thank you.
package.json
"scripts": {
"dev": "next -p 3000",
"build:dev": "cross-env ANALYZE=true NODE_ENV=development next build",
"build:prod": "cross-env ANALYZE=true NODE_ENV=production next build",
"start:dev": "cross-env ANALYZE=true NODE_ENV=development next start -p 3000",
"start:prod": "cross-env ANALYZE=true NODE_ENV=production next start -p 3000"
},
next.config.js
const withPlugins = require('next-compose-plugins');
const withBundleAnalyzer = require('#next/bundle-analyzer')({
enabled: process.env.ANALYZE === 'true',
});
const withImages = require('next-images');
module.exports = withPlugins(
[
[
withBundleAnalyzer,
{
compress: true,
webpack(config) {
const prod = process.env.NODE_ENV === 'production';
return {
...config,
mode: prod ? 'production' : 'development',
devtool: prod ? 'hidden-source-map' : 'eval',
plugins: [...config.plugins],
};
},
},
],
[
withImages,
{
inlineImageLimit: false,
},
],
],
{
webpack(config) {
return {
...config,
};
},
},
);
Related
I have React project created without cra. I need to add code coverage for cypress e2e tests.
In app created with cra I do the following instructions for add code coverage. And add this line of code in package.json
"start": "react-scripts -r #cypress/instrument-cra start",
This work's well with cra.
But in app without cra I can't add react-scripts or #cypress/instrument-cra for get code coverage information.
How to realize this?
My current configuration ->
babel.config.json
{
"presets": [
"#babel/preset-env",
[
"#babel/preset-react",
{
"runtime": "automatic"
}
],
"#babel/preset-typescript"
],
"plugins": [
"istanbul",
"transform-class-properties",
[
"#babel/plugin-transform-runtime",
{
"useESModules": true,
"regenerator": false
}
]
],
"env": {
"development": {
"plugins": ["istanbul", "transform-class-properties"]
},
"test": {
"presets": [
["#babel/preset-env", {
"targets": "current node"
}]
]
}
}
}
e2e.ts
// Import commands.js using ES2015 syntax:
import "#cypress/code-coverage/support";
import './commands'
// Alternatively you can use CommonJS syntax:
// require('./commands')
Cypress.on('uncaught:exception', () => {
/**
* Returning false here prevents Cypress from
* failing the test when one of requests fails
*/
return false
});
package.json
"scripts": {
"start": "webpack-cli serve --port 9007 --env currentEnv=local",
"build": "webpack --mode production",
"serve": "serve dist -p xxxx",
"clean": "rm -rf dist",
"test": "cross-env BABEL_ENV=test jest",
"cy:open": "cypress open",
"cy:run": "cypress run",
"pretest:e2e:run": "npm run build",
"test:e2e:run": "start-server-and-test start http://localhost:9000 cy:run",
"test:e2e:dev": "start-server-and-test start http://localhost:9000 cy:open",
"watch-tests": "cross-env BABEL_ENV=test jest --watch",
"check:coverage": "nyc report --reporter=text-summary --check-coverage",
"prepare": "husky install"
},
// ...
"nyc": {
"all": true,
"excludeAfterRemap": true,
"check-coverage": true,
"extension": [
".tsx"
],
"include": [
"src/views/**/*.tsx"
]
}
cypress.config.ts
export default defineConfig({
e2e: {
setupNodeEvents(on, config) {
// implement node event listeners here,
require("#cypress/code-coverage/task")(on, config);
// include any other plugin code...
// It's IMPORTANT to return the config object
// with any changed environment variables
return config;
},
video: false,
baseUrl: "http://localhost:3000/",
},
});
Currently, in browser after each test does finished I get the following error
Could not find any coverage information in your application by looking at the window coverage object. Did you forget to instrument your application? See code-coverage#instrument-your-application [#cypress/code-coverage]
Previously, i deployed my project on compute engine where there was no any issue on page loading. The page used to load very fast. However, when i move to serverless, the page is loading very very slow and also sometime i get 'Error: could not handle the request'. I am not confident enough on serverless deployment.
Here is how I am deploying
structure
.firebase
.next
public
src
components
pages
utils
next.config.js
server.js
.firebaserc
firebase.json
package.json
configuration part
.firebaserc
{
"projects": {
"default": "project-test"
}
}
firebase.json
{
"hosting": {
"public": "public",
"ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
"rewrites": [
{
"source": "**",
"function": "next"
}
]
},
"functions": {
"source": ".",
"ignore": [
".firebase/**",
".firebaserc",
"firebase.json",
"**/node_modules/**",
"**/.vscode/**",
"**/.hooks/**",
"**/public/**"
]
}
}
next.config.js
const withPlugins = require("next-compose-plugins");
const optimizedImages = require("next-optimized-images");
const withPWA = require("next-pwa");
module.exports = withPlugins(
[optimizedImages],
[
withPWA({
pwa: {
dest: "public",
},
}),
]
);
server.js (i dont know where this is being used)
const functions = require('firebase-functions');
const next = require('next');
var dev = false;
console.log('dev', process.env.NODE_ENV);
var app = next({ dev, conf: { distDir: '.next' } });
var handle = app.getRequestHandler();
exports.next = functions.https.onRequest((req, res) => {
console.log('File: ' + req.originalUrl); // log the page.js file that is being requested
return app.prepare().then(() => handle(req, res));
});
scripts
"scripts": {
"dev:client": "next",
"local": "dotenv -e .env.local next",
"dev:server": "node src/server --source-maps --watch",
"dev": "dotenv -e .env.development yarn dev:client & yarn dev:server",
"build": "dotenv -e .env.production next build",
"build:dev": "dotenv -e .env.development next build",
"build:staging": "dotenv -e .env.staging next build",
"build:production": "NODE_ENV=production dotenv -e .env.production next build",
"deploy:dev": "dotenv -e .env.development firebase deploy --only functions,hosting",
"deploy:staging": "dotenv -e .env.staging firebase deploy -P staging --only functions,hosting",
"start": "next start",
},
the way I am deploying is
first i build the project using following command
yarn build:dev
then deploy using yarn deploy:dev
here is the build file
Did i miss any important thing while deploying?
Note: I am using nextjs 9.4
It's my first time running a build to deploy a react website. When I run npm run build, nothing happens. I tried running npm run build:all and I do get a build directory created but with no index.html file.
My current package.json is:
"eslint": "eslint \"src/**/*.js\"",
"start": "concurrently \"npm run dev:server\" \"npm run dev:bundle\"",
"test": "jest",
"dev:server": "cross-env NODE_PATH=./src nodemon --exec \"babel-node src/server/server.js\" --ignore .reactful.json --ignore public/",
"dev:bundle": "webpack -wd",
"verify-tests": "jest --coverage",
"build:react": "cross-env NODE_ENV=production webpack --progress -p",
"build:node": "babel src -d build --config-file ./babel-node.config.js --copy-files",
"build:all": "npm install && npm run build:react && npm run build:node",
"prod:start": "cross-env NODE_ENV=production NODE_PATH=./build pm2 start -i max build/server/server.js --update-env --name react-testProd",
"prod:stop": "pm2 stop react-testProd",
"prod:reload": "pm2 reload --update-env react-testProd",
"prod:logs": "pm2 logs --update-env react-testProd",
"build": "webpack --config webpack.config.js"
My current webpack config is:
resolve: {
modules: [path.resolve('./src'), path.resolve('./node_modules')],
},
entry: {
main: ['./src/renderers/dom.js'],
},
output: {
path: path.resolve('public', 'bundles'),
filename: isDev ? '[name].js' : '[name].[chunkhash].js',
},
Any idea what is wrong with this?
I cant see anything particularly wrong but you can try using CopyWebpackPlugin
module.exports = {
plugins: [
new CopyWebpackPlugin([
{ from: './index/html', to: 'relative/path/to/dest/' }
])
]
}
I have this boilerplate code from a React course which used Heroku hosting and yarn for development.
I'm switching to Firebase, and I can get my web app up and running but it uses an old build when I deploy (firebase deploy) and run it locally (firebase serve). I guess it has something to do with not picking up the latest bundle.js (and webpack config).
But tried using build and it won't work. Any ideas on what I should try?
Here's my package.json:
"scripts": {
"build:dev": "webpack",
"build:prod": "webpack -p --env production",
"dev-server": "webpack-dev-server --watch",
"test": "cross-env NODE_ENV=test jest --config=jest.config.json",
"start": "node server/server.js",
"heroku-postbuild": "yarn run build:prod"
},
And here's my webpack config:
process.env.NODE_ENV = process.env.NODE_ENV || 'development';
if (process.env.NODE_ENV === 'test') {
require('dotenv').config({ path: '.env.test' });
} else if (process.env.NODE_ENV === 'development') {
require('dotenv').config({ path: '.env.development' });
}
module.exports = (env) => {
const isProduction = env === 'production';
const CSSExtract = new ExtractTextPlugin('styles.css');
return {
entry: ['babel-polyfill', './src/app.js'],
output: {
path: __dirname+ '/public',
publicPath: '/public/',
filename: 'bundle.js'
},
...
...and continues with modules and plugins. Let me know if there's something else I can add to make it more clear.
Thanks in advance!
edit: Adding firebase.json default config
{
"hosting": {
"public": "public",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "public/dist/bundle.js"
}
]
}
}
Found the answer: Firebase keys should be hardcoded into the firebase.js file.
Firebase hosting only supports static sites so you need to make sure everything is already bundled before uploading it.
Hope it helps someone in the future!
After compiling SPA (React) to production with NODE_ENV=production there is error:
n.e(...).then(...).config is not a function
n - Promise in UglifyJS
This is package.json
"scripts": {
"dev": "webpack-dev-server --mode development --colors",
"start": "cross-env NODE_ENV=production webpack-dev-server --mode production --env.NODE_ENV=production --colors",
"build": "cross-env NODE_ENV=production webpack --mode production --env.NODE_ENV=production --colors --optimize-minimize",
"test": "test",
"analyze:build": "cross-env ANALYZE=true npm run build",
"analyze:start": "cross-env ANALYZE=true npm run start",
"analyze:dev": "cross-env ANALYZE=true npm run dev"
},
.babelrc
{
"presets": [
["#babel/preset-env", {
"targets": {
"browsers": "last 2 versions"
}
}],
"#babel/preset-react"
],
"plugins": [
"#babel/plugin-transform-runtime",
"#babel/plugin-syntax-dynamic-import",
"#babel/plugin-proposal-class-properties",
"react-hot-loader/babel"
]
}
webapack.config.js
entry: {
app: [
'./index.js'
],
core: [
'react',
'react-dom',
'core-js',
'react-router',
'redux',
'react-redux'
]
},
optimization: {
splitChunks: {
cacheGroups: {
commons: {
test: 'core',
name: 'core',
chunks: 'initial'
},
async: {
test: /[\\/]node_modules[\\/]/,
chunks: 'async',
priority: -10
},
vendors: {
test: /[\\/]node_modules[\\/]/,
name: "vendors",
chunks: 'initial',
priority: -20
}
}
}
},
dont know what im doing wrong =(
i was trying and with #babel/polyfill - same
screenshot of error
Some libraries are not supported latest webpack.
Problem with with support .mjs files. So when you downgrade to version 3.x problem should be solved