I have been trying this for a while now, without success.
I have an expo app and I am using cypress to test some use cases using the web version of the app (generated by expo).
However, I would like to generate some code coverage as well. I have read the official documentation for it, that recommends to babel-plugin-istanbul do to so, but it does not seem to work with expo.
I am not sure why this would not work.
Edit
I removed the files previously pointed here as they were not important.
Thanks for a wonderful documentation provided by a hero without a cape, I figured that my settings were wrong.
All I needed to do was:
install babel-plugin-istanbul
Update babel.config.js
module.exports = {
presets: ['babel-preset-expo'],
plugins: [
'istanbul',
[
'module-resolver',
{
root: ['.'],
extensions: [
'.js',
],
alias: {
'#': './',
},
},
],
],
};
update cypress/support/index.js
import '#cypress/code-coverage/support';
update cypress/plugins/index.js
module.exports = (on, config) => {
require('#cypress/code-coverage/task')(on, config);
// add other tasks to be registered here
// IMPORTANT to return the config object
// with the any changed environment variables
return config;
};
and voilà!
Related
Basically I want to find a way to share example some css file or image using module federation in my case I want to use react.
I did some research by I don't find a solid information abou that.
Some recomendations ?
One solution that I found was using css-module, you can use webpack or browserify in any case your css will be transform in js and you can expose it and consume it like other object/component,...
Eg:
[ Home Content Component]
import styles from './exampleCss.module.scss'; // using css module
export const globalHomeStyle = styles; //exporting the new transformed js.
webpack.config.js
...
plugins: [
new ModuleFederationPlugin({
name: 'home',
filename: 'remoteEntry.js',
remotes: {
...
},
exposes: {
'./HomeContent': './src/HomeContent.jsx',
}
Consuming the style from Home microfrontend in PDP Microfrontend:
webpack.config.js //calling the microfrontend
...
plugins: [
new ModuleFederationPlugin({
name: 'home',
filename: 'remoteEntry.js',
remotes: {
home: 'home#http://localhost:3000/remoteEntry.js',
},
exposes: {
...
}
Using the Style in PDP Microfrontend:
import { globalHomeStyle } from 'home/HomeContent';
...rest implementation
<div className='flex'>
<div className={`font-bold text-3x1 flex-grow ${globalHomeStyle.exampleCss}`}>
I hope this can be useful, if you find other solutions don't be shy add them here 👍
After two days I failed to setup (any form of) webpack working with django3 in the back and angular10 in the front, so I decided to just use gulp to start ng serve for frontend and python manage.py runserver for backend. I am new to this, so this is probably very stupid but really two days is a lot of time to give on setup and get nothing back ..
Currently I am trying to call an API on the django server that is on http://127.0.0.1:8000 while ng serve is running on http://127.0.0.0:4200
#Injectable()
export class EchoService {
constructor(private httpClient: HttpClient) {}
public makeCall(): Observable<any> {
return this.httpClient.get<any>(
'http://127.0.0.1:8000/my-api/'
);
}
}
'''
Is there a better way how to do this in Angular without using "http://127.0.0.1:8000" in every component call I do? How can I make it as close as possible to relative paths, that will be used in the prod version of this (for prod I will just put the bundles manually in the html, but I can not do that manually for dev)
Angular allows defining an environment. Here is what I did:
in your src folder, find the environments folder.
create the following files and adjust the content as needed (there should already be a file named environment.ts there, I'll get back to that later. For now:
environment.dev.ts
export const environment = {
production: true,
apiURL: "http://127.0.0.1:8000/my-api"
};
environment.prod.ts
export const environment = {
production: true,
apiURL: "https://api.yoururl.com/"
};
modify your angular.json:
...
"configurations": {
...
"production": {
"outputPath": "dist-prod/",
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
}
"dev": {
"outputPath": "dist-dev/",
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.dev.ts"
}
],
}
...
For ng serve, the standard environment.ts file is used, so the contents should probably match those of environment.dev.ts.
You can create builds with this setup by just calling:
ng build --configuration dev
ng build --configuration prod
Use in your service/component:
import { environment } from 'your/path/environments/environment';
#Injectable()
export class EchoService {
constructor(private httpClient: HttpClient) {}
public makeCall(): Observable<any> {
return this.httpClient.get<any>(
environment.apiURL + 'your/endpoint/
);
}
}
Now, depending on the configuration, environment.apiURL might be 127.0.0.1:8000 or https://.....
I have one for development, one for staging, and one for production.
In case I`ve missed something, you can read about it here.
When I build (netflify build) my Gridsome personal website, tailwind CSS classes doesn't work and the website look's like without CSS.
I have already tried to build without git, reinstall tailwind...
I show my gridsome config if that's the problem:
const tailwind = require('tailwindcss');
const purgecss = require('#fullhuman/postcss-purgecss');
const postcssPlugins = [
tailwind(),
]
if (process.env.NODE_ENV === 'production') postcssPlugins.push(purgecss());
module.exports = {
siteName: 'Zolder | Works',
plugins: [],
css: {
loaderOptions: {
postcss: {
plugins: postcssPlugins,
},
},
},
}
I had this issue as well. I used the Tailwind Plugin for Gridsome and it worked locally but when deploying to Netlify, the Tailwind css wasn't getting added.
Referencing this starter file: https://github.com/drehimself/gridsome-portfolio-starter/blob/master/src/layouts/Default.vue
I added the main.css with all the Tailwind imports file to the end of the Default Layout template instead, and this worked for me.
You can add Tailwind to your Gridsome project with these steps:
edit gridsome.config.js
module.exports = {
siteName: "Zolder",
plugins: [],
chainWebpack: config => {
config.module
.rule("postcss-loader")
.test(/.css$/)
.use(["tailwindcss", "autoprefixer"])
.loader("postcss-loader");
}
};
create a global.css file in ./src/styles
#tailwind base;
#tailwind components;
#tailwind utilities;
import global.css in main.js
import './styles/global.css'
I'am trying to handle development and production eviroment variables in my webpack configuration (see https://webpack.js.org/guides/production/), but it fails with
WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
- configuration should be an object.
package.json
{
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "./node_modules/.bin/webpack",
"start": "npm run build && node server.js"
},
"devDependencies": {
//...
"webpack": "^4.20.2",
"webpack-cli": "^3.1.2",
"webpack-dev-middleware": "^3.4.0",
"webpack-hot-middleware": "^2.24.2"
}
}
webpack.config.js
const path = require('path'),
webpack = require('webpack'),
HtmlWebpackPlugin = require('html-webpack-plugin');
let config = {
entry: {
app: [
'./src/app/App.tsx', 'webpack-hot-middleware/client'
],
vendor: ['react', 'react-dom']
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/[name].bundle.js'
},
// ...
}
This export is working as expected without errors or warnings
module.exports = config; // everything is fine
But this fails
module.exports = function(env, argv) { // this errors
return config;
};
There is a similiar, but unanswered question here: webpack base config as a function doesn't work
It's a very mysterious behaviour, appreciate if anyone could help!
Well,it is working. I didn't notice that the error takes place on a total different spot of my code.
I was doing a tutorial about HMR with webpack and express. An it's this lines of code in the express setup which causes the trouble:
server.js
const webpackConfig = require('./webpack.config');
const compiler = webpack(webpackConfig);
//...
app.use(
require('webpack-dev-middleware')(compiler, {
noInfo: true,
publicPath: webpackConfig.output.publicPath
})
);
The webpackConfig is only getting a function without being called and so it's not returning an object. So adding parenthesis is all it took to make it work.
const webpackConfig = require('./webpack.config')();
//..
The documentation is a bit quirky. You properly forgot the set the env variable from package.json
For instance "start": "webpack --env.prod --", in package.json will pass {prod: true} as the env variable.
Hope this helps.
More info here: https://webpack.js.org/api/cli/#environment-options
The latest 1.7 Ember beta breaks my gulp-browserify task (config below) with the following exception:
Error: browserify-shim needs to be passed a proper browserify instance as the first argument.
Gulp had been browserifying Ember happily up until 1.7 (and continues to do so for latest 1.6 using the config below). I noticed in the release notes for 1.7 that the module system has undergone some upheaval.
My question is: Is this a legitimate bug in Ember (or perhaps Browserify)? Or is Ember no longer intended to be used with tools like browserify going forward, in favor of some other specific approach?
Exact config:
packages.json :
(Note, this particular site already has jQuery embedded via a standard script tag, hence the need for browserify-shim, and the global: notation on the jquery dep.)
{
"browser": {
"handlebars": "./scripts/lib/handlebars-v1.3.0.js",
"ember": "./scripts/lib/ember-1.7.min.js"
},
"browserify-shim": {
"jquery": "global:jQuery",
"handlebars": "Handlebars",
"ember": {
"exports": "Ember",
"depends": [
"handlebars:Handlebars"
]
}
},
"browserify": {
"transform": [
"browserify-shim"
]
},
"devDependencies": {
"browserify": "^4.1.11",
"browserify-shim": "^3.5.0",
"gulp": "^3.8.1",
"gulp-browserify": "^0.5.0"
}
}
gulpfile.js :
var gulp = require('gulp'),
browserify = require('gulp-browserify');
gulp.task('scripts', function () {
gulp.src([
'./app.js',
])
.pipe(browserify({
insertGlobals: false,
debug: false
})).pipe(gulp.dest('./Scripts/build'));
});
gulp.task('default', ['scripts']);
app.js :
var Ember = require('ember');
Basic Repro:
in a test dir:
npm install gulp browserify gulp-browserify browserify-shim
ensure paths exist to deps:
"handlebars": "./scripts/lib/handlebars-v1.3.0.js"
"ember": "./scripts/lib/ember-1.7.min.js"
add my example app.js above
add my packages.json above
add my gulpfile.js above
run gulp
Swap out Ember 1.7 for 1.6 to see success.
Thanks!