Any way to have a common netlify.toml file for a single repository and multiple sites? - hugo

I'm looking out a way to define two site builds on netlify, sourced from the same repo, using a single common netlify.toml. Is it possible to do so?
I have a GitHub repository named hugo-dream-plus for which I've configured two website builds on netlify, namely dream-plus-posts and dream-plus-cards. Both of these builds share the same environment variables and mostly all of the configurations, except for the build commands:
hugo --config cards.toml #For dream-plus-cards
hugo --config posts.toml #For dream-plus-posts
I was wondering if there was a way for me to create a common netlify.toml file, since the repo is the same for both builds, for both these sites.
I've already used the web UI for configuring each build separately, but it's quite bothersome to modify each of them, that's why I'm preferring the above scenario.
What I plan to do is to have all configurations shared between the two builds except for the build command, which would be defined separately as shown above.

As of the date of this answer, Netlify does not support a way to change values in the netlify.toml, because it is read in prior to your build. Except for the headers and redirects, which allow you to change at build.
Using Environment Variables directly as values ($VARIABLENAME) in your netlify.toml file is not supported.
However
You could run a script command and have it changed based on the domain or an environment variable. There are a few setups that would work.
Here is how I might accomplish what you want based on the domain name.
netlify.toml
[build]
command = "node ./scripts/custom.js"
publish = "public"
scripts/custom.js
const exec = require('child_process').exec;
const site = process.env.URL || "https://example.com";
const domain = site.split('/')[site.split('/').length - 1];
let buildCommand;
switch(domain) {
case "dream-plus-posts.netlify.com":
buildCommand = 'hugo --config posts.toml';
break;
case "dream-plus-cards.netlify.com":
buildCommand = 'hugo --config cards.toml';
break;
default:
throw `Domain ${domain} is invalid`;
}
async function execute(command){
return await exec(command, function(error, stdout, stderr){
if (error) {
throw error;
}
console.log(`site: ${site}`);
console.log(`domain: ${domain}`);
console.log(stdout);
});
};
execute(buildCommand);
Things to note:
I did not test the stdout to the log using this method with Hugo. The child process captures the output and returns it in stdout.
We don't want to capture errors, because we want our build to fail on errors so this will cause an exit code other than 0
You can inline other commands with this solution (i.e. "node ./scripts/custom.js && some other command before deploy")
You could also just check an environment variable you set rather than domain name

Related

Setup Xdebug for Shopware docker failed

I try to setup Xdebug for shopware-docker without success.
VHOST_[FOLDER_NAME_UPPER_CASE]_IMAGE=ghcr.io/shyim/shopware-docker/6/nginx:php74-xdebug
After replacing your Folder Name and running swdc up Xdebug should be activated.
Which folder name should I place?
Using myname, the same name as in /var/www/html/myname, return error on swdc up myname:
swdc up myname
[+] Running 2/0
⠿ Network shopware-docker_default Created 0.0s
⠿ Container shopware-docker-mysql-1 Created 0.0s
[+] Running 1/1
⠿ Container shopware-docker-mysql-1 Started 0.3s
.database ready!
[+] Running 0/1
⠿ app_myname Error 1.7s
Error response from daemon: manifest unknown
EDIT #1
With this setup VHOST_MYNAME_IMAGE=ghcr.io/shyim/shopware-docker/6/nginx:php81-xdebug (versioned Xdebug) the app started:
// $HOME/.config/swdc/env
...
VHOST_MYNAME_IMAGE=ghcr.io/shyim/shopware-docker/6/nginx:php81-xdebug
But set a debug breakpoint (e.g. in index.php), nothing happens
EDIT #2
As #Alex recommend, i place xdebug_break() inside my code and it works.
Stopping on the breakpoint the debugger log aswers with hints/warnings like described in the manual:
...
Cannot find a local copy of the file on server /var/www/html/%my_path%
Local path is //var/www/html/%my_path%
...
click on Click to set up path mapping to open the modal
click inside modal select input Use path mapping (...)
input field File path in project response with undefined
But i have already set up the mapping like described in the manual, go to File | Settings | PHP | Servers:
Why does not work my mapping? Where failed my set up?
The path mapping needs to be between your local project path on your workstation and the path inside the docker containers. Without xDebug has a hard time mapping the breakpoints from PHPStorm to the actual code inside the container.
If mapping the path correctly does not work and if its a possibility for you, i can highly recommend switching to http://devenv.sh for your development enviroment. Shopware itself promotes this new enviroment in their documentation: https://developer.shopware.com/docs/guides/installation/devenv and provides an example on how to enable xdebug:
# devenv.local.nix File
{ pkgs, config, lib, ... }:
{
languages.php.package = pkgs.php.buildEnv {
extensions = { all, enabled }: with all; enabled ++ [ amqp redis blackfire grpc xdebug ];
extraConfig = ''
# Copy the config from devenv.nix and append the XDebug config
# [...]
xdebug.mode=debug
xdebug.discover_client_host=1
xdebug.client_host=127.0.0.1
'';
};
}
A correct path mapping should not be needed here, as your local file location is the same for XDebug and your PHPStorm.

`pnpm add` within a workspace does not add projects from workspace

I am working with a very simple monorepo with the following structure:
.npmrc
package.json
pnpm-workspaces.yml
packages/
package-1/
package-2/
When I cd into package-1, I am trying to add a reference to package-2 by doing the following:
pnpm add #myorg/package-2
But I get the error #myorg/package-2 is not in the npm registry, or you have no permission to fetch it.. I expect that pnpm add would detect that I'm inside a workspace and automatically link workspace packages. Am I missing something here?
Here is the relevant information you should need:
My packages use the #myorg/[package-name] convention inside of package.json "name" field.
The pnpm-workspaces.yml file is as follows:
packages:
- 'packages/**'
My .npmrc file is as follows:
link-workspace-packages = true
prefer-workspace-packages = true
recursive-install = true
Ugh, I'm leaving this in case anybody else wants to feel embarrassed for themselves.
The pnpm-workspaces.yml should be named pnpm-workspace.yaml - I'm not sure where I got the other invalid name... but hopefully this helps you waste less time than I did.

TypeScript with Relay: Can't resolve generated module

In my MessageItem.tsx component I have the following code:
const data = useFragment(
graphql`
fragment MessageItem_message on Message {
date
body
}
`,
message as any
);
After running relay-compiler --src ./src --schema ../../schema.graphql --language typescript --artifactDirectory ./src/__generated__, a module named MessageItem_message.graphql.ts gets generated.
But when I run the app it gives me an error:
Failed to compile.
./src/components/MessageItem.tsx
Module not found: Can't resolve
'./__generated__/MessageItem_message.graphql'
The reason is only components at the src root can refer to the right path (./__generated__), whereas components in a folder actually need to refer to the path (../__generated__) but it's not doing so.
How can I configure the path?
Edit .babelrc to point to the artifactDirectory
// .babelrc
{
"plugins": [
[
"relay",
{
"artifactDirectory": "./src/ui/graphql/types"
}
]
]
}
Remove "--artifactDirectory ./src/__generated__" from the relay-compiler options.
By default it seems the Relay compiler puts a "__generated__" directory in the directory with any source code containing GraphQL.
As a result any "./__generated__" references anywhere and at any level in the source code hierarchy now work as they should.
Thanks to #ThibaultBoursier for the pointer.
PS I wonder if the --artifcactDirectory option is just meant to be used to change the name of the artifact directory, rather than its location?
Just moments ago I ran into the same issue. The reason is that the relay-compiler is using the artifactDirectory setting to decide where to put the generated files, but the babel-plugin-relay exposing the graphql tag needs to get the very same argument otherwise it just attempts to include a colocated relative file.
I fixed it in my case by configuring the plugin with a babel-plugin-macros.config.js file as follows (where the artifactDirectory is the same as the one supplied to the relay-compiler):
module.exports = {
relay: {
artifactDirectory: "./src/ui/graphql/types",
},
};
This solution assumes you are using the macro via babel-plugin-macros, otherwise you might need to supply that argument via the .babelrc file but I have no experience with that unfortunately.

Reactnative - 'React/RCTBridgeModule.h' file not found

I am trying to use react-native-linea in my react native app and during build I am getting React/RCTBridgeModule.h' file not found error.
Steps I tried -
1. react-native init ScannerApp
2. cd ScannerApp/
3. npm i react-native-linea --save
4. react-native link react-native-linea
5.Drag and drop the InfineaSDK Framework into the General > Embedded Binaries section of your Project. The framework will also display the Linked Frameworks and Libraries.
a. Verify that Copy Items if needed is checked.
6.Add the following to General > Linked Frameworks and Libraries:
• CoreLocation.framework
• ExternalAccessory.framework
• Foundation.framework
7.Add a new Run Script phase.
At the end of your project’s Build phase(s), add new running scripts to set up InfineaSDK.
FRAMEWORKS="${BUILT_PRODUCTS_DIR}/${FRAMEWORKS_FOLDER_PATH}" "${FRAMEWORKS}/InfineaSDK.framework/SDKSetup"
8.react-native run-ios
****Error*****
simulator/react-native-linea.build/Objects-normal/x86_64/RCTLinea.o
In file included from /Users/****/reactnative/ScannerApp/node_modules/react-native-linea/react-native-linea/RCTLinea.m:9:
/Users/****/reactnative/ScannerApp/node_modules/react-native-linea/react-native-linea/RCTLinea.h:9:9: fatal error: 'React/RCTBridgeModule.h' file not found
#import <React/RCTBridgeModule.h>
^~~~~~~~~~~~~~~~~~~~~~~~~
1 error generated.
** BUILD FAILED **
Solution 1: Adding podspec
Prerequisite: You will need to setup React as cocoapod dependency for this to work. Also, before you try this make sure you have package react-native-linea available in node_modules.
In this solution you need to create a podspec file for the linea. You can choose to keep it in your ScannerApp project or fork the original repo and add the podspec file to it. If you fork, please modify the git urls in the podspec to your repo url and add the react-native-linea package from your repo. Here's the podspec that worked for me,
require 'json'
package = JSON.parse(File.read(File.join(__dir__, '../node_modules/react-native-linea/package.json')))
Pod::Spec.new do |s|
s.name = 'LineaPro'
s.version = package['version']
s.summary = package['description']
s.license = package['license']
s.homepage = 'https://github.com/pablo-coco/react-native-linea'
s.authors = 'pablo-coco'
s.source = { :git => 'https://github.com/pablo-coco/react-native-linea.git', :tag => s.version }
s.source_files = '*.{h,m}','react-native-linea/*.{h,m}'
s.requires_arc = true
s.platforms = { :ios => "9.0" }
s.vendored_libraries = 'libdtdev.a'
s.frameworks = 'ExternalAccessory', 'CoreLocation'
s.dependency 'React'
end
Now you need to add this as cocoapod dependency in your ScannerApp podfile. If you add podspec file locally, make sure to specify its path as below,
pod 'LineaPro', :path => '../node_modules/react-native-linea', :podspec => '../ios/LineaPro.podspec'
If you created fork and added podspec to repo then skip the :podspec part.
Solution 2: Add source files directly
This is fairly simple solution and i'd recommend this. You can clone the react-native-linea repo locally on your machine.
Copy DTDevices.h, RCTLinea.h, RCTLinea.m source files to ios project
Copy LineaPro.js, NativeBridges.js to js project
Copy libdtdev.a static lib to project
Link ExternalAccessory, CoreLocation frameworks and libdtdev.a to your target
Compile and write js code to initialize LineaPro module.

How to add sourcemap in React Native for Production?

I received error log like the following while the app crashed:
Fatal Exception: com.facebook.react.modules.core.JavascriptException:
onSelect index.android.bundle:20:7148 onPress
index.android.bundle:20:2435
But it's not really helpful for me to trouble shoot. How could I enable source map so that I could track down where the issue is ?
UPDATE 2018
https://docs.expo.io/versions/latest/guides/using-sentry.html Looks promising !
For source mapping here is the way I go about it:
In my bundle command for my production build I tell it to generate a source map:
iOS:
react-native bundle --platform ios --entry-file index.ios.js --dev false --bundle-output ./ios/main.jsbundle --assets-dest ./ios --sourcemap-output ./sourcemap.js
Android - I had to actually modify the android/app/react.gradle file to get source maps generating on release compile. There might be an easier way but basically you find where it builds up the bundle command in the bundleReleaseJsAndAssets method and add the source map bit to it:
if (Os.isFamily(Os.FAMILY_WINDOWS)) {
commandLine "cmd","/c", "react-native", "bundle", "--platform", "android", "--dev", "false", "--entry-file",
entryFile, "--bundle-output", jsBundleFileRelease, "--assets-dest", resourcesDirRelease, "--sourcemap-output", file("$buildDir/../../../sourcemap.js")
} else {
commandLine "react-native", "bundle", "--platform", "android", "--dev", "false", "--entry-file",
entryFile, "--bundle-output", jsBundleFileRelease, "--assets-dest", resourcesDirRelease, "--sourcemap-output", file("$buildDir/../../../sourcemap.js")
}
The output path looks a bit odd but that puts it at your root level (same spot as iOS. I wanted it that way. You can obviously put it anywhere).
Then once you have an error with the line number that means nothing you run it through the "source-map" NPM package. You could probably get very elaborate with your approach but I simply went with:
var sourceMap = require('source-map');
var fs = require('fs');
fs.readFile('./sourcemap.js', 'utf8', function (err, data) {
var smc = new sourceMap.SourceMapConsumer(data);
console.log(smc.originalPositionFor({
line: 16,
column: 29356
}));
});
Where line and column should be replaced withe line and column number from your example output above.
This obviously works best if you have the source maps stored somewhere as the line and column numbers change from build to build as your code changes. It should get pretty close though if you can use you source control setup of choice to go back to the commit that was used to build the app in question and re-generate the bundle with the additional bits to the command to generate the source map.
Android inspired by #chetstone's answer
Starting on v0.32 for android, you can modify your android/app/build.gradle to accomplish this.
Look for the line
apply from: "../../node_modules/react-native/react.gradle"
Just above this, you will see something like:
project.ext.react = [
entryFile: "index.js",
]
Modify it to match the following
project.ext.react = [
entryFile: "index.js",
extraPackagerArgs: ["--sourcemap-output", file("$buildDir/../../../sourcemap.android.js")]
]
On iOS
Go to your build phases in Xcode for the "Bundle React Native code and images" phase and add:
export EXTRA_PACKAGER_ARGS="--sourcemap-output sourcemap.ios.js"
As noted, there's no obvious way to generate the sourcemap file for React Native on iOS. The bundle command is called from react-native-xcode.sh, and there's no provision to add parameters to the bundle command line. But I found a clean way to do it.
react-native-xcode.sh uses the environment variable BUNDLE_CONFIG to specify a config file. If you create an empty config file it has no effect, and then you can add additional CLI parameters.
Create an empty config file.
touch null_config
Set BUNDLE_CONFIG with your config file, and piggyback the --sourcemap-output parameter.
export BUNDLE_CONFIG="null_config --sourcemap-output ./sourcemap.js.map"
When you build, the file sourcemap.js.map will be created.
This is only for iOS.
step 1: Generate sourcemap.js file by using following command.
add this line in package.json file
"bundle:ios": "mkdir -p ios/{Bundle,source-map}; react-native bundle --platform ios --entry-file index.js --dev false --bundle-output ios/Bundle/main.jsbundle --assets-dest ios/Bundle --sourcemap-output ios/source-map/sourcemap.js"
Run this command, it will create sourcemap.js file under $PROJECT_DIR/ios/source-map/ folder
$ yarn bundle:ios
Step 2: Create a file sourcemap-decoder.js under $PROJECT_DIR/ios/source-map/
$ cd ios/source-map/
$ touch sourcemap-decoder.js
Content of sourcemap-decoder.js is
const sourceMap = require('source-map'); //(install- npm i source-map)
const fs = require('fs');
const path = require('path');
fs.readFile(path.resolve(__dirname, 'sourcemap.js'), 'utf8', async (err, data) => {
if (err) {
console.log('err', err,);
}
const consumer = await new sourceMap.SourceMapConsumer(JSON.parse(data));
console.log(consumer.originalPositionFor({
line: 1408,
column: 7762
}));
});
Step 3: execute the script for decoding
$ node ios/source-map/sourcemap-decoder.js

Resources