Im wondering if there is a way to completely flatten the folder structure within the build directory of a create-react-app. Im attempting to do a quick port over of my app onto a sharepoint site but the sharepoint site does not play well with the static/ folder and its children folders such as css/, js/, and media/ is there a way to do a npm run build such that the paths created are all within the same folder?
for example the asset-manifest.json currently shows files like this
{
"files": {
"main.css": "./static/css/main.ad49c970.chunk.css",
"main.js": "./static/js/main.bfd3a96b.chunk.js",
"main.js.map": "./static/js/main.bfd3a96b.chunk.js.map",
"runtime-main.js": "./static/js/runtime-main.c0915b68.js",
"runtime-main.js.map": "./static/js/runtime-main.c0915b68.js.map",
"static/css/2.d9ad5f5c.chunk.css": "./static/css/2.d9ad5f5c.chunk.css",
"static/js/2.3c65d00b.chunk.js": "./static/js/2.3c65d00b.chunk.js",
"static/js/2.3c65d00b.chunk.js.map": "./static/js/2.3c65d00b.chunk.js.map",
"index.html": "./index.html",
"precache-manifest.8fc2b5edb6f6029051530a49398ae5c2.js": "./precache-manifest.8fc2b5edb6f6029051530a49398ae5c2.js",
"service-worker.js": "./service-worker.js",
"static/css/2.d9ad5f5c.chunk.css.map": "./static/css/2.d9ad5f5c.chunk.css.map",
"static/css/main.ad49c970.chunk.css.map": "./static/css/main.ad49c970.chunk.css.map",
"static/js/2.3c65d00b.chunk.js.LICENSE.txt": "./static/js/2.3c65d00b.chunk.js.LICENSE.txt",
"static/media/logo.svg": "./static/media/logo.5d5d9eef.svg"
},
"entrypoints": [
"static/js/runtime-main.c0915b68.js",
"static/css/2.d9ad5f5c.chunk.css",
"static/js/2.3c65d00b.chunk.js",
"static/css/main.ad49c970.chunk.css",
"static/js/main.bfd3a96b.chunk.js"
]
}
Ideally I just want everything under the root/ folder without static/js/ etc.
Related
I am struggling with reading files on the NextJS API.
My folder structure is as follows:
- data
- file.txt
- pages
- api
- generateFile.ts
I want to be able to read file.txt inside the generateFile.ts but I am getting:
Error: ENOENT: no such file or directory
I read the files with the use of fs.readFile wrapped in promisify.
I cannot import that single file as the data folder contains multiple files and its not necessary to import them all every time the function gets called.
How can I make sure the data folder is included in the server build and can be read from?
I have been exploring and found that:
. directory contains
[
'.env.example',
'.next',
'___next_launcher.cjs',
'___vc',
'node_modules',
'package.json'
]
and "/" contains:
[
'THIRD-PARTY-LICENSES.txt',
'bin',
'boot',
'dev',
'etc',
'home',
'lambda-entrypoint.sh',
'lib',
'lib64',
'media',
'mnt',
'opt',
'proc',
'root',
'run',
'sbin',
'srv',
'sys',
'tmp',
'usr',
'var'
]
EDIT
Well I have tried reading the contracts just by getting a path to that dir, added one line of code path.join(process.cwd(), data); and somehow data folder now got included in the build. Why?
I'm working on a #nrwl/nx monorepo. I want to import the folders inside the project src by the absolute paths. I tried specifying the baseUrl but didn't work. The only solution worked is, adding the path to the monorepo root tsConfig.json file as follows.
"paths": {
"*": ["apps/my-app/src/*"]
}
But, the problem is, if I have another project, I will have to add that project as well to this path. I tried something as follows.
"paths": {
"*": ["apps/*/src/*"]
}
But, this doesn't work anymore. It doesn't match the project folder name.
How can I solve this? Or, is there any better way to import by absolute paths?
I'm facing the same problem, due to organizing common DTOs and Event.ts files in the nx monorepo. I found useful to update the tsconfig.base.json with a simpler path shortcut, that allow cross app imports and at the same time mantains the options of setting an absolute path in the single apps tsconfig.json file.
Here's my base.json:
"baseUrl": ".",
"paths": {
"libs": [
"libs/"
],
"app1: [
"apps/app1/"
],
"app2": [
"apps/app2/"
],
}
Now I have a sort of absolute imports that point to app names as base:
import {CreateUserEvent} from 'libs/events/create-user.event';
This is a random file in the app1/src/app/ folder that import a file in libs folder
Folder structure is:
root ('.')
|__ app1/src/app/file_with_import.ts
|__ ...
|__ ...
|__ libs/events/create_user.event.ts
Hope it helps
I have a react project contains two modules with 2 entry points. I have configured the web pack in a way to create two bundles (js) in the output folder like below.
dist
- Project Output 1
- index.js
- index.html
_ manifest.json
- Project Output 1
- index.js
- index.html
- manifest.json
I had created separate index.html for each bundles using chunks. Similarly, I need to create seperate manifest file for each bundle. Need help on doing that. So far I have tried filter and map in the manifest plugin but both generated manifest file contains information of both bundles.
Both manifest.json of project bundle 1 and 2 contain the same information like below.
{
//What is not intended
"path1/index.js": "path1/index.1234567890.js",
"path2/index.js": "path2/index.1234567890.js",
}
But what i wanted is each manifest file contain information about that bundle alone like below.
manifest.json - Project bundle 1
{
"path1/index.js": "path1/index.1234567890.js",
}
manifest.json - Project bundle 2
{
"path2/index.js": "path2/index.1234567890.js",
}
My web pack config looks like below.
const config = {
entry: {
ProjectOutput1: PATH1/index.jsx,
ProjectOutput2: PATH2/index.jsx,
},
output: {
filename: '[name]/index.js'
},
plugins: [
new ManifestPlugin(
fileName: 'path1/manifest.json'
),
new ManifestPlugin(
fileName: 'path2/manifest.json'
)]
};
Question: How do I load a configuration file from a Plugin/config Directory?
Demo Project: https://github.com/CakePHPKitchen/CakeDC-Users-Permissions-Example
I am using CakeDC/users plugin and it has a permissions.php file that it loads the RBAC permissions from. From what I can tell, it either loads the default permissions file that is in the user plugin's config folder OR it loads the permissions.php file from the app/config folder.
Now for my app skeleton I have a bunch of permissions in the app/config/permissions.php, however, I do not want to modify that file as I will be doing git pulls from the upstream repo and I would like to avoid conflicts.
So what I would like to do is, in the app skeleton bootstrap
I would like to
foreach(Plugin::loaded() as $plugin) {
$path = Plugin::path($plugin) . 'config/permissions.php';
if(file_exists($path)) {
Configure::load($path, 'default', true);
}
}
But I am getting the following error....
Error: The application is trying to load a file from the /Users/jlroberts/Projects/JeffreyLRobertsCom/CakePHPKitchen/PluginDemos/plugins/SharpAgent/config/permissions plugin.
Make sure your plugin /Users/jlroberts/Projects/JeffreyLRobertsCom/CakePHPKitchen/PluginDemos/plugins/SharpAgent/config/permissions is in the /Users/jlroberts/Projects/JeffreyLRobertsCom/CakePHPKitchen/PluginDemos/plugins/ directory and was loaded.
Any ideas on how I can load the permissions.php file from the Plugin/config directory?
EDITED: You can load permissions.php file from the Plugin as it is doing now, but change the contents of permissions.php to preserve existing permissions defined in configuration, for example:
config/permissions.php
$permissions = [
// add your app permissions here
[
// ...
],
];
// there are more permissions in this config key, defined across your plugins
$morePermissions = \Cake\Core\Configure::read('MyPermissions');
$allPerms = array_merge($permissions, $morePermissions);
return ['CakeDC/Auth.permissions' => $allPerms];
Then inside each plugin you could have:
YOUR_PLUGIN/config/bootstrap.php
$permissions = \Cake\Core\Configure::read('MyPermissions');
$someMorePermissions = [
[
// permissions injected into the app from this plugin
]
];
$permissions = array_merge((array)$permissions, $someMorePermissions);
\Cake\Core\Configure::write('MyPermissions', $permissions);
Allowing each plugin to dynamically inject/manage permissions into the app.
I've created a c9.io environment with this code here https://ide.c9.io/steinkel/users-35-custom-permissions
Using CMD from within Sencha Architect I've been able to build a production build of my application. However I can not seem to figure out how to exclude a js file from the build process. I don't want it compiled in with app.js I want it as a separate script include in index.html - so cmd shouldn't touch it basically.
Sencha Arhitech generates and calls build.xml which calls build-impl.xml which calls init-impl.xml
Everywhere I've read, they say to include the following;
<target name="-before-init">
<echo>Setting build.operations...</echo>
<echo>app.dir=${app.dir}</echo>
<property name="build.operations">
exclude
-file=\resources\js\version.js
</property>
</target>
However it refuses to exclude the file...I can see the echos so I know it's hitting the target..
Any ideas? Is this how I am supposed to exclude files?
app.framework.version=4.2.1.883
app.cmd.version=4.0.4.84
Turns out this won't be possible to do until Sencha Architect 3.1
Steps by which i was able to exclude AppConfig file in production build.
Here file exclude means it will not be compressed/bundled and variable/properties of this file could be used any where in the app.
1. Config file(AppConfig.js in our case) MUST be inside resources fodler. Below are the contents of our AppConfig file
/////////////IxDetect is my Application Namespace///////////////////
var IxDetect = IxDetect || {};
IxDetect.AppConfig = {
logoPath: '',
logoTitle: 'Internal',
pentahoUrl: 'http://107.20.104.150/pentaho',
pentahoRptCube: 'TrafficWithFraudIndex'
};
////////////////////////////////
2. Link this file in index.html page like below
<script src="resources/AppConfig.js"></script>
3. Add one more item in "js" array in "app.json" file
"js": [
{
"path": "resources/AppConfig.js", // This is my file. Also make a sure you do not miss bundle and includeInBundle property
"bundle": false,
"includeInBundle": true
},
{
"path": "app.js",
"bundle": true
}
],
4. Try development and production build all should work file
Note: All above changes are done and tested on 6.2(Framework/CMD)