I have a project with expressjs and ava, and I'm using webpack in order bundle the app
webpack is also load environment variables from .env files based
on the NODE_ENV.
How can I load .env file variables while running ava, or alternatively bundle the app before running ava tests?
Thanks!
You can use dotenv to load .env file into your test environment. A simple example:
import test from 'ava';
require('dotenv').config()
test('foo', t => {
console.log(process.env.DB_HOST);
console.log(process.env.DB_USER);
console.log(process.env.DB_PASS);
t.pass();
});
This commit was merged 1st June of 2019, quite a while after the original post.
The long and short of it now, though, is that you can define environment vars for the Ava test runner inside of your project's package.json file:
{
...
"ava": {
"environmentVariables": {
"FOO": "bar",
...
}
},
...
}
There is also the combination of the two previous answers, you can specify ava to use dotenv for all tests by specifying the following in your project's package.json file:
{
...
"ava": {
"require": [
"dotenv/config"
]
},
...
}
Related
I'm generating a library with Vue CLI 4.4:
vue-cli-service build --target lib --formats=umd,umd-min --name example main.js
As a result, I get a number of files in the dist folder:
example.umd.js
example.umd.min.js
...
I'd like to remove the .umd from the file name. How to accomplish that?
I've tried the following two things in my vue.config.js, but it did not help:
configureWebpack: {
output: {
filename: 'example.js',
chunkFilename: 'example.[name].js'
}
}
chainWebpack: config => {
config.output.filename('example.js')
config.output.chunkFilename('example.[name].js')
}
It seems vue-cli sets this "postfix" here: https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli-service/lib/commands/build/resolveLibConfig.js#L140
Unfortunately, I can't figure out how to override it without forking the whole project.
I have a directory called mock at root which contains mocking data that I use to run the app in development mode. I would like to exclude them when i build for production. I notice that it is being added into bundle whenever i run vue-cli-service build and it is bloating my app bundle size.
I am using vue-cli and so I have to work with vue.config.js.
It is not clear from the docs or any answers on the wider web how I can specify which folders/files to exclude from the build.
Here is a snippet of my vue.config.js.
module.exports = {
chainWebpack: (config) => {
config.resolve.symlinks(false)
},
configureWebpack: {
plugins: [
new CompressionPlugin()
]
},
css: {
loaderOptions: {
scss: {
prependData: `#import "#/styles/main.scss";`
}
}
}
}
This is not the perfect solution, but...
If you want to exclude that directory at build time, you can try to use require instead of import. Something like this (source):
if (process.env.VUE_APP_MY_CONDITION) {
require('./conditional-file.js');
}
But be aware of this!
I want to deploy my create-react-app to Vercel.
I define my redirects in my now.json as follows:
{
"redirects": [
{ "source": "/api/(.*)", "destination": "BACKEND_URL/$1", "statusCode": 200 }
]
}
The destination URL depends on the environment variable BACKEND_URL, which is defined in the Vercel dashboard.
I am trying to replace the environment variable in the redirects in the following build command:
sed -i "s|BACKEND_URL|${BACKEND_URL}|g" now.json && yarn build
But unfortunately now.json doesn't seem to be available at build time:
09:54:44.243 sed: can't read now.json: No such file or directory
How to enable dynamic redirects in Vercel?
This is not possible since now.json is read to determine how to build so you can't dynamically generate it during a build.
Instead, consider using a framework like Next.js which provides a next.config.js that can read environment variables as defined in RFC 9081.
npm install next#canary react react-dom
// next.config.js
module.exports = {
experimental: {
async redirects() {
return [{
source: "/api/:path*",
destination: `${process.env.BACKEND_URL}/:path*`,
permanent: false,
}]
}
}
};
https://github.com/zeit/now/discussions/4351
I think this actually is possible.
If you are using create-react-app then you just need to preface your env var name with REACT_APP_. See here: https://create-react-app.dev/docs/adding-custom-environment-variables/
I am currently doing this with a websocket URL env var. I have named it REACT_APP_WS_URL and here is how I use it.
I have 2 different vercel files in the project:
vercel.staging.json which has this section:
"build": {
"env": {
"REACT_APP_WS_URL": "wss:staging.my-backend.com/socket"
}
}
vercel.live.json which has this section:
"build": {
"env": {
"REACT_APP_WS_URL": "wss:my-backend.com/socket"
}
}
I deploy to them with either of these commands:
vercel deploy --prod -A vercel.staging.json
vercel deploy --prod -A vercel.live.json
and in my code I can access process.env.REACT_APP_WS_URL anywhere.
I have not tried doing this with the Vercel dashboard env vars but it might be worth trying your original approach except rename your env var to REACT_APP_BACKEND_URL.
Note: my deployment commands only work when I don't assign domains to the project. If I assign domains to a project, they are automatically used for ALL --prod deploys, no matter what is in my alias field in the json config file.
I have a simple project generated with vue-cli. When I run the vue-cli-service build command it produces CSS file correctly. When I run the vue-cli-service build --watch command it only builds JavaScript files. There are no CSS files.
How can I generate CSS files in watch mode?
You can achieve this by adding this line of code in your vue.config.js
//vue.config.js
module.exports = {
//adding extract css true solves this issue
css: {
extract: true
}
}
https://cli.vuejs.org/config/#css-extract
There is a good chance that you have to use an extract plugin for webpack.
I know that in my vue.config.js file I'm using :
chainWebpack: config => {
if (config.plugins.has('extract-css')) {
const extractCSSPlugin = config.plugin('extract-css');
extractCSSPlugin &&
extractCSSPlugin.tap(() => [
{
filename: 'build.css',
chunkFilename: 'build.css'
}
]);
}
}
Hopefully this help you. However vue inject your css in watch mode right at the top of your file for automatic re-rendering purpose I think.
I use jasmine, karma and webpack to test my module. The webpack preprocesses my tests files before initiating tests.
In my tests I have the class Name{...} to be tested. I create new Name instance and then, in my tests I expect(myInstance.constructor.name).toBe("Name")
class Name{}
const myInstance = new Name();
describe("The object",function(){
it("should be the instance of Name class",function(){
expect(myInstance.constructor.name).toBe("Name"); // Expected 't' to be 'Name'.
})
});
But it returns failed tests. I figured out that my Name class is parsed by webpack to the t class in the bundled file and myInstance.constructor.name equals "t".
Can I prevent webpack to change the names of classes/constructors?
Have a build setup for development and production separately, whenever in development mode(which you can mention in the webpack config object), don't apply minification plugin(might be there in your webpack config).
Help links:
Bundling Modes
Minification pluin
You can use 'keep_classnames' option provided by the minification plugin to keep the class names intact.
Install Terser Plugin to customize Webpack optimization > minimizer options running:
npm i -D terser-webpack-plugin
...or in the case you use yarn:
yarn add -D terser-webpack-plugin
Then add this optimization option inside webpack.config.js:
module.exports = {
mode: ...,
resolve: ...,
target: ...,
optimization: {
minimizer: [
new TerserPlugin({
terserOptions: {
keep_classnames: true,
},
}),
],
},
};