I have a react project inside of a folder and I want react-scripts to target and compile from a folder. It looks like this
project
│ README.md
│ package.json
│
└───react
│ │ jsconfig.json
│ │
│ └───src
│ │
│ └───public
│
└───api
│ tsconfig.json
│
└───src
from the project/package.json I want to run react-scripts start and have it compile the /react folder. How can I do this?
I solved the issue with the use off react-app-rewired
See this stackoverflow post on details of how it was done.
const path = require('path');
module.exports = {
paths: function (paths, env) {
paths.appIndexJs = path.resolve(__dirname, 'react/src/index.js');
paths.appSrc = path.resolve(__dirname, 'react/src');
paths.appPublic = path.resolve(__dirname, 'react/public');
paths.appHtml = path.resolve(__dirname, 'react/public/index.html');
return paths;
}
}
Related
ATM I have a folder in my NodeJS application where I store my JS files with a couple of functions. I require these files in my main.js at the top an use them as usual.
my-app/
├── node_modules/
├── my_jsfiles/
│ ├── functions_1.js
│ └── functions_2.js
├── package.json
└── main.js
main.js:
const myFuncs1 = require('./my_jsfiles/functions_1.js')
const myFuncs2 = require('./my_jsfiles/functions_2.js')
myFuncs1.someFuncsInside()
myFuncs2.someFuncsInside()
APPROACH: Now that I am going to use my_jsfiles in more applications I would like to make my own NodeJS module, which works so far, but I stuck at the point how I can include multiple js files instead of just calling functions from the index.js
my-app/
├── node_modules/
│ ├── my-jsfunctions/
│ │ ├── index.js
│ │ ├── functions_1.js
│ │ └── functions_2.js
├── package.json
└── main.js
main.js:
const myFuncs = require('my-jsfunctions')
//How do I call functions from functions_1.js and functions_2.js?
I know that I can export functions from the index.js
exports.someFunction = function () {
console.log("This is a message from the index.js");
}
But what is the propper way to call functions from the other files, because I do not want to have just one index.js file with million lines of code.
you just need to import all your functions into index.js file and export from there
my-app/
├── node_modules/
├── my_jsfiles/
│ ├── functions_1.js
│ └── functions_2.js
├── package.json
└── main.js
function_1.js
function functions_1_1(){
}
module.exports={functions_1_1}
function_2.js
function functions_2_1(){
}
module.exports={functions_2_1}
index.js
const {functions_1_1} = require("./function_1.js");
const {functions_2_1} = require("./function_2.js");
module.exports={functions_1_1,functions_2_1}
main.js
const {functions_1_1,functions_2_1} =require("./my_jsfiles/index.js");
functions_1_1()
functions_2_1()
you should just be able to do
const myFuncs1 = require('my_jsfiles/functions_1.js')
const myFuncs2 = require('my_jsfiles/functions_2.js')
isn't it working?
From your file index.js on my-jsfunctions, you can export function from other files like so
export * from './functions_1';
export * from './functions_2';
then you can import function
const func1 = require('my-jsfunctions').func1;
const func2 = require('my-jsfunctions').func2;
I am using PM2 with the following configuration:
module.exports = {
apps : [{
name: 'sandbox',
script: 'index.js',
args: ["PORT=8084", "--color"],
instances: 1,
autorestart: true,
watch: 'index.js',
out_file: "logs/out.log",
node_args: "--trace-warnings"
}]
};
All works well except that changes in index.js doesn't trigger restart.
I have tried many things:
adding the absolute path in script and in the watch
adding cwd with the absolute path
Using variations in the watch like ./index.js or ../ or ./ or true
Removing autorestart
Additional info:
My app use express
The status shows that watch is enabled:
│ status │ online
│ name │ sandbox
│ version │ 1.0.0
│ restarts │ 0
│ uptime │ 8m │
│ script path │ /var/www/api/index.js │
│ script args │ PORT=8084 --color │
│ error log path │ /home/ubuntu/.pm2/logs/sandbox-error-10.log │
│ out log path │ /var/www/api/logs/out-10.log │
│ pid path │ /home/ubuntu/.pm2/pids/sandbox-10.pid │
│ interpreter │ node │
│ interpreter args │ --trace-warnings │
│ script id │ 10 │
│ exec cwd │ /var/www/api │
│ exec mode │ cluster_mode │
│ node.js version │ 11.10.0 │
│ node env │ N/A │
│ watch & reload │ ✔ │
│ unstable restarts │ 0 │
│ created at │ 2019-11-30T10:45:14.704Z
I have this directory structure
├── components
│ ├── quarks
│ │ └── index.js
│ │ └── ...
│ ├── bosons
│ │ └── index.js
│ │ └── GridLayout.vue
│ │ └── ...
│ ├── atoms
│ │ └── ButtonStyle.vue
│ │ └── InputStyle.vue
│ │ └── index.js
│ │ └── ...
│ ├── .......
└─────
I'd like to ignore the index.js within each folder, but I'm not getting it, I've tried it in several ways
const path = require('path')
const chokidar = require('chokidar')
const ROOT_PATH = path.resolve('components')
const watcher = chokidar.watch(ROOT_PATH, {
ignored: ROOT_PATH + '/*/index.js', //does not work
ignoreInitial: true
})
already tried:
'./components/**/index.js',
'./components/*/index.js',
'components/*/index.js',
'components/**/index.js',
'ROOT_PATH + '/**/index.js'
Anyone have any idea how to make it work?
The chokidar documentation specifies that the ignored parameter is anymatch-compatiable so this could be completed in many ways.
Here is a regular expression solution...
Any index.js file, even in the root folder:
{
ignored: /(^|[\/\\])index\.js$/,
// ...
}
Only index.js file in a sub-folder:
{
ignored: /[\/\\]index\.js$/,
// ...
}
Also note in your example you use signoreInitial this is not an option, perhaps you meant ignoreInitial?
Alternatively with callback:
{
ignored: (path) => { return path.endsWith('\\index.js') || path.endsWith('/index.js'); },
// ...
}
Chokidar seems bugged, defective to ignore files on MacOS, that's the impression I have.
So before running my action, I'm checking to see if the file is the same one I want to ignore.
chokidar
.watch('components', { ignoreInitial: true })
.on('all', (event, filename) => {
filename !== 'index.js'
// action here
})
What worked for me on Mac was using **:
ignored: ['**/node_modules'],
So if the other options don't work because of bugs, go for this one:
ignored: ['**/index.js'],
I have multiple themes with sass and a common folder with common options but the files should be compiled each theme css folder. It's a little complicated to explain. I want to share with you the scaffolding. I want to compile this with grunt but I don't know how to do
common_files
sass
common_file.scss
theme_foo
sass
file_one.scss
file_two.scss
css
style.scss
theme_bar
sass
file_one.scss
file_two.scss
css
style.scss
Gruntfile.js
I want to compile each theme with their own sass files and common files in their css folder.
Here is my Gruntfile.js
module.exports = function(grunt) {
require('load-grunt-tasks')(grunt);
require('time-grunt')(grunt);
grunt.initConfig({
watch: {
sass: {
files: ['sass/{,*/}*.{scss,sass}'],
tasks: ['sass'],
},
},
sass: {
dist: {
options: {
style: 'expanded', // For compressed use 'compressed'
},
files: [{
expand: true,
cwd: 'sass',
src: ['*.{scss,sass}'],
dest: 'css',
ext: '.css',
},],
},
},
})
/* Load plugins */
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-csslint');
/* Tasks */
// Default task
grunt.registerTask('default', [, 'watch']);
};
Here is a complete solution to your problem :
Update your structure
├── project-dir
│ ├── common
│ │ ├── scss
│ │ │ ├── _button.scss
│ │ │ ├── _form.scss
│ │ │ ├── common.scss
│ ├── theme-foo
│ │ ├── scss
│ │ │ ├── _tag.scss
│ │ │ ├── _figure.scss
│ │ │ ├── theme-foo.scss
│ ├── theme-bar
│ │ ├── scss
│ │ │ ├── _tag.scss
│ │ │ ├── _figure.scss
│ │ │ ├── theme-bar.scss
Use main scss file of each folder (common, theme-foo, theme-bar) to import all its files. And for theme files, import alsocommon.scss` file.
E.g : common.scss file :
#import 'button.scss',
'form.scss';
E.g : theme-foo.scss file :
// import common style
#import 'common.scss';
// import theme style
#import 'tag.scss',
'form.scss';
Now you just have to compile theme-foo.scss and theme-bar.scss with grunt-contrib-sass.
E.g :
module.exports = function(grunt) {
require('load-grunt-tasks')(grunt);
grunt.initConfig({
sass: {
dist: {
files: {
'project-dir/theme-foo/css/theme-foo.css': 'project-dir/**/theme-foo.scss',
'project-dir/theme-bar/css/theme-bar.css': 'project-dir/**/theme-bar.scss'
}
}
}
});
grunt.loadNpmTasks('grunt-sass');
};
Take a look sass-guidelines and specially 7-1 pattern to learn a lot of good practices.
I have seen all the posts pointing to various guides purporting to get ABS working with IntelliJ (Android Studio), including here, and here.
For the most recent version of ABS and AS, they don't work.
Generally, the tutorial doesn't match the IDE. Getting past that, and assuming that doing an 'import module' using gradle instead of maven is allowed, I eventually get:
Plugin with id 'android-library' not found
Does anyone have a tutorial for getting the latest version of ABS working with the latest version of AS?
Fwiw, I tried going the Eclipse route with the intention of exporting and then trying to bring it into AS (this is definitely not my preferred path), but I ended-up getting a bunch of "Unable to execute dex: Multiple dex files define..." errors surrounding Jackson.
If it's useful, here is my build.gradle, but my preferred solution would use more "standard" mechanisms than mucking with that and would also, then, more likely be useful to others. Here's the file:
buildscript {
repositories {
mavenCentral()
}
dependencies {
classpath 'com.android.tools.build:gradle:0.5.+'
}
}
apply plugin: 'android'
dependencies {
compile fileTree(dir: 'libs', include: '*.jar')
}
android {
compileSdkVersion 17
buildToolsVersion "17.0.0"
sourceSets {
main {
manifest.srcFile 'AndroidManifest.xml'
java.srcDirs = ['src']
resources.srcDirs = ['src']
aidl.srcDirs = ['src']
renderscript.srcDirs = ['src']
res.srcDirs = ['res']
assets.srcDirs = ['assets']
}
instrumentTest.setRoot('tests')
}
}
And, my project directory structure:
D:.
└───T-n-T
├───.gradle
│ └───1.6
│ └───taskArtifacts
├───.idea
│ ├───copyright
│ ├───libraries
│ └───scopes
├───assets
├───bin
│ ├───classes
│ │ └───com
│ │ └───pha
│ │ └───t-n-t
│ │ ├───models
│ │ └───services
│ └───res
├───build
│ ├───apk
│ ├───assets
│ │ └───debug
│ ├───classes
│ │ └───debug
│ │ └───com
│ │ └───pha
│ │ └───t-n-t
│ │ ├───models
│ │ └───services
│ ├───dependency-cache
│ │ └───debug
│ ├───incremental
│ │ ├───aidl
│ │ │ └───debug
│ │ ├───dex
│ │ │ └───debug
│ │ ├───mergeAssets
│ │ │ └───debug
│ │ └───mergeResources
│ │ └───debug
│ ├───libs
│ ├───manifests
│ │ └───debug
│ ├───res
│ │ ├───all
│ │ │ └───debug
│ │ │ ├───drawable-hdpi
│ │ │ ├───drawable-mdpi
│ │ │ ├───drawable-xhdpi
│ │ │ ├───drawable-xxhdpi
│ │ │ ├───layout
│ │ │ ├───menu
│ │ │ ├───values
│ │ │ ├───values-sw720dp-land
│ │ │ ├───values-v11
│ │ │ ├───values-v14
│ │ │ └───xml
│ │ └───rs
│ │ └───debug
│ ├───source
│ │ ├───aidl
│ │ │ └───debug
│ │ ├───buildConfig
│ │ │ └───debug
│ │ │ └───com
│ │ │ └───pha
│ │ │ └───t-n-t
│ │ ├───r
│ │ │ └───debug
│ │ │ └───com
│ │ │ └───pha
│ │ │ └───t-n-t
│ │ └───rs
│ │ └───debug
│ └───symbols
│ └───debug
├───gen
│ └───com
│ └───pha
│ └───t-n-t
├───gradle
│ └───wrapper
├───libs
├───res
│ ├───drawable-hdpi
│ ├───drawable-ldpi
│ ├───drawable-mdpi
│ ├───drawable-xhdpi
│ ├───drawable-xxhdpi
│ ├───layout
│ ├───menu
│ ├───values
│ ├───values-sw600dp
│ ├───values-sw720dp-land
│ ├───values-v11
│ ├───values-v14
│ └───xml
└───src
└───com
└───pha
└───t-n-t
├───models
└───services
It should be noted that this represents the project after having rolled it back after a failed attempt to get this working.
UPDATE
I don't know if it's progress, but it's different. I have what I think is the library project from ABS sitting with my main project, and added as a module. I think this is the case because in the IDE, in the main project, SherlockActivity seems to be available. I can extend it (sort of) and can import it's namespace (com.actionbarsherlock.app). I say sort of because everything is fine until I try to build, at which point I get:
Gradle: package com.actionbarsherlock.app does not exist
Gradle: cannot find symbol class SherlockActivity
and the build fails. So something is clearly not quite right.
Any suggestions?
SOLVED
Wow. What a pain. What I ultimately ended-up doing:
As described by others
1) Download and extract ABS
2) Save it in its own folder under your primary project (say ActionBarSherlock)
3) Import it as a Module (new: use Maven / pom.xml - make sure Export is checked)
Pulled from other sources
4) Exclude the ActionBarSherlock/target directory (Open Module Settings)
5) If your primary project uses the support library, change that dependency to Provided (Open Module Settings)
Again, I'm not sure why this was so difficult, or if I've done it correctly, or that there aren't any issues yet to be found (I have an empty Activity which extends SherlockActivity, it does build, and I can deploy it to, and run it on, an emulator), but there you go.
For me the following works fine :
Copy the actionbarsherlock directory to your project root to have
MyAppProject
|-actionbarsherlock
|--build.gradle
|-MyApp
|--build.gradle
|-build.gradle
|-settings.gradle
build.gradle of actionbarsherlock
buildscript {
repositories {
mavenCentral()
}
dependencies {
classpath 'com.android.tools.build:gradle:0.5.+'
}
}
apply plugin: 'android-library'
dependencies {
compile 'com.android.support:support-v4:18.0.+'
}
android {
compileSdkVersion 17
buildToolsVersion '17.0.0'
sourceSets {
main {
manifest.srcFile 'AndroidManifest.xml'
java.srcDirs = ['src']
resources.srcDirs = ['src']
res.srcDirs = ['res']
}
}
}
build.gradle of MyApp
buildscript {
repositories {
mavenCentral()
}
dependencies {
classpath 'com.android.tools.build:gradle:0.5.+'
}
}
apply plugin: 'android'
repositories {
mavenCentral()
}
dependencies {
compile 'com.android.support:support-v4:18.0.+'
compile project(':actionbarsherlock')
}
android {
compileSdkVersion 17
buildToolsVersion "17.0.0"
defaultConfig {
minSdkVersion 10
targetSdkVersion 17
}
}
settings.gradle
include ':MyApp', ':actionbarsherlock'
and nothing in the MyAppProject build.gradle
Next Right clik on your MyAppProject > Open Module settings
And on the module section import module and select actionbarsherlock directory. Apply
and to verify re open modul settings, go Modules, click on YourApp and verify if on the dependencies you have actionbarsherlocj on scope compile. if yes, you are ready .
From my update to the question, above:
What I ultimately ended-up doing:
As described by others
1) Download and extract ABS
2) Save it in its own folder under your primary project (say, ActionBarSherlock)
3) Import it as a Module (new: use Maven / pom.xml - make sure Export
is checked)
Pulled from other sources
4) Exclude the ActionBarSherlock/target directory (Open Module
Settings)
5) If your primary project uses the support library, change that
dependency to Provided (Open Module Settings)
Again, I'm not sure why this was so difficult, or if I've done it correctly, or that there aren't any issues yet to be found (I have an empty Activity which extends SherlockActivity, it does build, and I can deploy it to, and run it on, an emulator), but there you go.
UPDATE
This configuration ended up not working. How or why it fell apart, I don't know. But after restarting AS, it fell apart. Following the steps here - again - did, this time, get it working.