I'm using webpack 2, with the webpack-dev-middleware
{
test: /\.styl$/,
use: [
'style-loader',
'css-loader',
{
loader: 'stylus-loader',
options: {
use: [nib()],
},
},
]
},
{
test: /\.jpe?g$|\.gif$|\.png$|\.svg$|\.woff$|\.ttf$|\.wav$|\.mp3$/,
use: [ {
loader: 'file-loader',
options: {
publicPath: '/dist/'
}
} ]
}
Relevant server code:
let compiler = webpack(webpackConfig);
app.use(webpackDevMiddleware(compiler, {
publicPath: ('/dist/')
}));
On the initial build (either using webpack from the console, or on first running my server) the whole process takes ~2000ms. Changing .js files doesn't take long at all (<200ms), but changing stylus files takes a very long time (>90s). If I make a change to the stylus then manually trigger a rebuild with webpack it's really quick, but ideally I'd like the watch to do its magic and for my css to be reloaded in place quickly...
Any ideas why the rebuild is taking such a long with stylus, or how I can debug the issue?
Related
I have .env file in the project root, and in my nuxt config I am using variables to configure ReCaptcha like this:
import dotenv from 'dotenv'
dotenv.config()
export default {
modules: [
['#nuxtjs/recaptcha', {
siteKey: process.env.RECAPTCHA_SITE_KEY,
version: 3,
size: 'compact'
}],
]
}
and in .env like this:
RECAPTCHA_SITE_KEY=6L....
but the application always failed with console log error:
ReCaptcha error: No key provided
When I hard-code ReCaptcha key directly like that: siteKey: 6L.... app start working, so I guess the problem is with reading .env props in nuxt.config
do you have any idea how to fix it?
EDIT:
I tried update my nuxt.config by #kissu recommendation and by example which I found here: https://www.npmjs.com/package/#nuxtjs/recaptcha
so there is new nuxt.config which also not working:
export default {
modules: [
'#nuxtjs/recaptcha',
],
publicRuntimeConfig: {
recaptcha: {
siteKey: process.env.RECAPTCHA_SITE_KEY,
version: 3,
size: 'compact'
}
}
}
If your Nuxt version is 2.13 or above, you don't need to use #nuxtjs/dotenv or anything alike because it is already backed into the framework.
To use some variables, you need to have an .env file at the root of your project. This one should be ignored by git. You can then input some keys there like
PUBLIC_VARIABLE="https://my-cool-website.com"
PRIVATE_TOKEN="1234qwer"
In your nuxt.config.js, you have to input those into 2 objects, depending of your use case, either publicRuntimeConfig or privateRuntimeConfig:
export default {
publicRuntimeConfig: {
myPublicVariable: process.env.PUBLIC_VARIABLE,
},
privateRuntimeConfig: {
myPrivateToken: process.env.PRIVATE_TOKEN
}
}
Differences: publicRuntimeConfig can basically be used anywhere, while privateRuntimeConfig can only be used during SSR (a key can only stay private if not shipped to the browser).
A popular use case for the privateRuntimeConfig is to use it for nuxtServerInit or during the build process (either yarn build or yarn generate) to populate the app with headless CMS' API calls.
More info can be found on this blog post: https://nuxtjs.org/blog/moving-from-nuxtjs-dotenv-to-runtime-config/
Then, you will be able to access it into any .vue file directly with
this.$config.myPublicVariable
You access it into Nuxt's /plugins too, with this syntax
export default ({ $axios, $config: { myPublicVariable } }) => {
$axios.defaults.baseURL = myPublicVariable
}
If you need this variable for a Nuxt module or in any key in your nuxt.config.js file, write it directly with
process.env.PRIVATE_TOKEN
Sometimes, the syntax may differ a bit, in this case refer to your Nuxt module documentation.
// for #nuxtjs/gtm
publicRuntimeConfig: {
gtm: {
id: process.env.GOOGLE_TAG_MANAGER_ID
}
},
PS: if you do use target: server (default value), you can yarn build and yarn start to deploy your app to production. Then, change any environment variables that you'd like and yarn start again. There will be no need for a rebuild. Hence the name RuntimeConfig!
Nuxt3 update
As mentioned here and in the docs, you can use the following for Nuxt3
nuxt.config.js
import { defineNuxtConfig } from 'nuxt3'
export default defineNuxtConfig({
runtimeConfig: {
public: {
secret: process.env.SECRET,
}
}
}
In any component
<script setup lang="ts">
const config = useRuntimeConfig()
config.secret
</script>
In a composable like /composables/test.js as shown in this comment
export default () => {
const config = useRuntimeConfig()
console.log(config.secret)
}
Here is the official doc for that part.
You can also use the env property with Nuxt
nuxt.config.js:
export default {
// Environment variables
env: {
myVariable: process.env.NUXT_ENV_MY_VAR
},
...
}
Then in your plugin:
const myVar = process.env.myVariable
It's very easy. Providing you an example with axios/nuxt
Define your variable in the .env file:
baseUrl=http://localhost:1337
Add the variable in the nuxt.config.js in an env-object (and use it in the axios config):
export default {env: {baseUrl: process.env.baseUrl},axios: {baseURL: process.env.baseUrl},}
Use the env variable in any file like so:
console.log(process.env.baseUrl)
Note that console.log(process.env) will output {} but console.log(process.env.baseUrl) will still output your value!
For nuxt3 rc11, in nuxt.conf.ts file:
export default defineNuxtConfig({
runtimeConfig: {
public: {
locale: {
defaultLocale: process.env.NUXT_I18N_LOCALE,
fallbackLocale: process.env.NUXT_I18N_FALLBACK_LOCALE,
}
}
},
...
and in .env file:
NUXT_I18N_LOCALE=tr
NUXT_I18N_FALLBACK_LOCALE=en
public: is very important otherwise it cannot read it and gives undefined error.
For v3 there is a precise description in the official docs
You define a runtimeConfig entry in your nuxt.config.[ts,js] which works as initial / default value:
export default defineNuxtConfig({
runtimeConfig: {
recaptchaSiteKey: 'default value' // This key is "private" and will only be available within server-side
}
}
You can also use env vars to init the runtimeConfig but its written static after build.
But you can override the value at runtime by using the following env var:
NUXT_RECAPTCHA_SITE_KEY=SOMETHING DYNAMIC
If you need to use the config on client-side, you need to use the public property.
export default defineNuxtConfig({
runtimeConfig: {
public: {
recaptchaSiteKey: 'default value' // will be also exposed to the client-side
}
}
}
Notice the PUBLIC part in the env var:
NUXT_PUBLIC_RECAPTCHA_SITE_KEY=SOMETHING DYNAMIC
This is very strange because we can't access process.env in Nuxt 3
In the Nuxt 3, we are invited to use the runtime config, but this is not always convenient, because the Nuxt application context is required.
But in a situation where we have some plain library, and we don’t want to wrap it in plugins nor composables functions, declaring global variables through vite / webpack is best:
// nuxt.config.ts
export default defineNuxtConfig({
vite: {
define: {
MY_API_URL: JSON.stringify(process.env.MY_API_URL)
}
}
})
And then you can use in any file without dancing with a tambourine:
// some-file.ts
console.log('global var:', MY_API_URL) // replaced by vite/webpack in real value
I'm trying to use rollup to build my React component library. The bundle step completes with a few warnings, however, when I actually try to use it in a Next.js application, I get many "X is not a function" errors when visiting the website. It seems to happen because some dependencies inside the _virtual directory are empty:
For example, this is dist/_virtual/d3-time-format.js (my library uses #visx/scale, which depends on d3-scale, which in turn depends on d3-time-format)
var d3TimeFormat = {exports: {}};
export { d3TimeFormat as d };
//# sourceMappingURL=d3-time-format.js.map
As you can see above, the exports is an empty object, so I get the error "format is not a function". This happens also with other modules, like prop-types (my dependencies depend on it).
This is my rollup.config.js:
import { babel } from '#rollup/plugin-babel';
import commonjs from '#rollup/plugin-commonjs';
import resolve from '#rollup/plugin-node-resolve';
import typescript from '#rollup/plugin-typescript';
import svgr from '#svgr/rollup';
import peerDepsExternal from 'rollup-plugin-peer-deps-external';
function bundle(inputPath) {
return {
input: inputPath,
output: [
{
dir: `./dist`,
format: 'esm',
sourcemap: true,
preserveModules: true,
preserveModulesRoot: 'src',
},
],
plugins: [
peerDepsExternal(),
commonjs(),
resolve(),
svgr({
icon: true,
replaceAttrValues: { '#000': '{props.color}' },
svgProps: { fill: 'currentColor' },
}),
typescript(),
babel({
babelHelpers: 'runtime',
exclude: /node_modules/,
extensions: ['.js', '.ts', '.tsx'],
}),
],
};
}
export default [bundle('./src/index.ts')];
When bundling I get these warnings, not sure if they are relevant:
Would appreciate some guidance on what the files inside _virtual are and why they are generated with an empty object. Thanks#
Hi Im using cypress coverage report but I have a class which houses all touch device specific functionality and as I'm running the tests on my Mac, they never run. Is there any way to exclude this class?
you might want to check cypress coverage readme:
...
"nyc": {
"include": [...],
"exclude": [...]
}
...
If this doesn't work:
"nyc": {
"exclude": [...]
}
Then add one more property like this:
"nyc": {
"exclude": [...],
"excludeAfterRemap": true
}
On cypress version 10, what worked for me is to create a .nycrc.json file which contains
{
"exclude": [...],
}
I am using sw-precache and I understand that in order to edit the service-worker.js file I need to do this (as detailed in the service-worker.js file)
// This file should be overwritten as part of your build process.
// If you need to extend the behavior of the generated service worker, the best approach is to write
// additional code and include it using the importScripts option:
// https://github.com/GoogleChrome/sw-precache#importscripts-arraystring
but I do not know where to add the importscripts() code. Does it go in the service-worker.js file? Surely that gets over-ridden on each project build.
Just include it like so:
importScripts: ['custom-offline-import.js']
Here is an example with an config including the importScripts config option at the end:
var packageJson = require('../package.json');
var swPrecache = require('../lib/sw-precache.js');
var path = require('path');
function writeServiceWorkerFile(rootDir, handleFetch, callback) {
var config = {
cacheId: packageJson.name,
runtimeCaching: [{
// See https://github.com/GoogleChrome/sw-toolbox#methods
urlPattern: /runtime-caching/,
handler: 'cacheFirst'
}],
staticFileGlobs: [rootDir + '/**/*.{js,html,css,png,jpg,gif}'],
stripPrefix: rootDir,
importScripts: ['custom-offline-import.js']
};
swPrecache.write(path.join(rootDir, 'service-worker.js'), config, callback);
}
Hope I could help you!
Add it to the sw-precache-config.js file.
Good example here:
Rewrite URL offline when using a service worker
Anybody figure out syntax or a pattern yet for detecting hosting environment using Meteor.js? I've got Heroku buildpacks working, and have a dev/production environment, but I'm kind of drawing a blank on how to have my app detect which environment it's running in.
Is there a way to have node.js detect which port it's running on? I was hoping there might be something low-level like app.address().port, but that doesn't seem to work...
Edit: This is the solution that worked for me. Note that the following needs to be run on the server, so it needs to be included in server\server.js, or a similar file.
if (Meteor.is_server) {
Meteor.startup(function () {
// we want to be able to inspect the root_url, so we know which environment we're in
console.log(JSON.stringify(process.env.ROOT_URL));
// in case we want to inspect other process environment variables
//console.log(JSON.stringify(process.env));
});
}
Also created the following:
Meteor.methods({
getEnvironment: function(){
if(process.env.ROOT_URL == "http://localhost:3000"){
return "development";
}else{
return "staging";
}
}
});
Which allows for the following on client side:
Meteor.call("getEnvironment", function (result) {
console.log("Your application is running in the " + result + "environment.");
});
Thanks Rahul!
You can inspect the process.env variable on the server to find information about the current environment, including the port:
{ TERM_PROGRAM: 'Apple_Terminal',
TERM: 'xterm-256color',
SHELL: '/bin/bash',
TMPDIR: '/var/folders/y_/212wz0cx5vs20yd7y2psnh7m0000gp/T/',
Apple_PubSub_Socket_Render: '/tmp/launch-hch25f/Render',
TERM_PROGRAM_VERSION: '309',
OLDPWD: '/usr/local/meteor/bin',
TERM_SESSION_ID: '3FE307A0-B8FC-41AD-B1EB-FCFA0B8B25D1',
USER: 'Rahul',
COMMAND_MODE: 'unix2003',
SSH_AUTH_SOCK: '/tmp/launch-gFCBXS/Listeners',
__CF_USER_TEXT_ENCODING: '0x1F6:0:0',
Apple_Ubiquity_Message: '/tmp/launch-QAWKHL/Apple_Ubiquity_Message',
PATH: '/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/bin',
PWD: '/Users/Rahul/Documents/Sites/test',
NODE_PATH: '/usr/local/meteor/lib/node_modules',
SHLVL: '1',
HOME: '/Users/Rahul',
LOGNAME: 'Rahul',
LC_CTYPE: 'UTF-8',
SECURITYSESSIONID: '186a4',
PORT: '3001',
MONGO_URL: 'mongodb://127.0.0.1:3002/meteor',
ROOT_URL: 'http://localhost:3000' }
there is a direct Meteor function:
Meteor.isDevelopment
see: https://docs.meteor.com/api/core.html#Meteor-isDevelopment
and for production:
Meteor.isProduction
both return a boolean
I used a variation of the above with the NODE_ENV variable. See here for more info:
http://meteorpedia.com/read/Environment_Variables#Checking%20the%20value%20of%20an%20Environment%20Variable
if Meteor.isServer
Meteor.methods
'getEnvironment': -> process.env.NODE_ENV
Meteor.call 'getEnvironment', (err, result) ->
if result == 'development'
console.log('In dev env')