My current vite.config.js looks sorta of like this:
export default defineConfig({
plugins: [react()],
build: {
assetsDir: './',
rollupOptions: {
input: {
main: fileURLToPath(new URL('./src/html/main.html', import.meta.url)),
mobile: fileURLToPath(new URL('./src/html/mobile.html', import.meta.url)),
config: fileURLToPath(new URL('./src/html/config.html', import.meta.url)),
},
output: {
dir: 'dist',
},
},
},
});
So my project's current folder structure for organization reasons is:
src/
|- components
|- hooks
|- pages
`- Config
`- index.tsx
`- Main
`- index.tsx
`- Mobile
`- index.tsx
|- html/
| `- config.html
| `- main.html
| `- mobile.html
My build(dist) folder structure is:
dist
|- [...bunch of js files]
| src/
|- html/
| `- config.html
| `- main.html
| `- mobile.html
My ideal final folder structure goal would be:
dist
|- [...bunch of js files]
|- config.html
|- main.html
|- mobile.html
I know I can just re-structure the project folder structure by putting the HTML files outside the src folder, in the root folder. But I'm aiming at being organized. I know this is possible using Webpack and I couldn't figure out how to do it on Vite.js with HTML files. Any direction or help would be awesome.
Related
This is simplified folder structure in my React application created with the create-react-app. For the back-end I'm using the Express framework.
└── ReactApp/
├── client/
| ├── node_modules/
| ├── public/
| └── src/
| └── components/
| └── component.js
└── server/
├── index.js
└── Uploads/
└── file.txt
Inside component.js file I want to define the path to the file.txt file located to the server/Uploads folder.
handleClick() {
const pathToFile = '../../server/Uploads/file.txt;
this.setState({ input: pathToFile})
}
The issue is that this defined path cannot locate the txt file inside the Uploads folder.
Try:
handleClick() {
const pathToFile = '../../../server/Uploads/file.txt';
this.setState({ input: pathToFile})
}
The solution is to configure ExpressJS to serve static files inside the Uploads folder.
index.js
app.use(express.static('Uploads'));
and then change the path inside the component.js file.
handleClick() {
const pathToFile = 'file.txt';
this.setState({ input: pathToFile})
}
I have a private made npm package that has a symbol # I'd like to use as an alias to use in my current project. Is this possible?
Example:
project structure
|-node_modules
|
|-#package_name
|
|-packagefile.js
|-src
|
|-srcfile.js
|
|-webpack.config.js
Now in:
packagefile.js
const v = require('#/srcfile.js')
Can webpack create an alias with the symbol # to lead to the src directory? I have functionality in this package I want to interact with my current project.
In my webpack.config I have:
module.exports = {
...
resolve: {
alias: {
'#': path.resolve(__dirname,'./src'),
}
}
...
}
Which doesn't seem to work.
I think your webpack config is effective for the root folder, not for node_module.
So I guess, The Package should have it own webpack config
like this
|-node_modules
|
|-#package_name
|
|-packagefile.js
|-webpack.config.js
|-src
|
|-srcfile.js
|
|-webpack.config.js
The directory structure of the puppet repo is as:
.
|-- data
| |-- common.yaml
|-- environment
| |-- environment.conf
| `-- hiera.yaml
|-- files
| `-- cdn
|-- hiera
| `-- hiera.yaml
|-- hiera.global.yaml
|-- manifests
| `-- site.pp
|-- modules
|
`-- site
|-- profile
| |-- files
| `-- manifests
| |-- appliance
| | |-- base.pp
`-- role
`-- manifests
|-- README.md
`-- role1
`-- appliance.pp
The site.pp file is as :
File { backup => false }
if $::custom_facts['appliance_type'] == 'Delivery' {
include role::role0::app
}
if $::custom_facts['appliance_type'] == 'Appliance' {
include role::role1::appliance **// line where error is occuring**
}
node default {
}
When I run the puppet apply command it fails with this error:
Error: Evaluation Error: Error while evaluating a Function Call, Could not find class ::role::role1::appliance for default-puppetmaster-centos-7.vagrantup.com (file: /tmp/kitchen/manifests/site.pp, line: 9, column: 3) on node default-puppetmaster-centos-7.vagrantup.com
The puppet command that is applied:
sudo -E /opt/puppetlabs/bin/puppet apply /tmp/kitchen/manifests/site.pp --modulepath=/tmp/kitchen/modules --fileserverconfig=/tmp/kitchen/fileserver.conf --environment=kitchen_vagrant_puppet --environmentpath=/etc/puppetlabs/code/environments --hiera_config=/tmp/kitchen/hiera.global.yaml
I cant figure out why puppet cannot find the class. The class is in the role folder. Is the directory structure wrong?
Edit:
Adding contents of envirnment.conf file:
modulepath = site:modules:$basemodulepath
Is this just because the modulepath needs to include site? Your manifests are in site rather than modules.
sudo -E /opt/puppetlabs/bin/puppet apply /tmp/kitchen/manifests/site.pp \
--modulepath=/tmp/kitchen/modules:/tmp/kitchen/site \
--fileserverconfig=/tmp/kitchen/fileserver.conf \
--environment=kitchen_vagrant_puppet \
--environmentpath=/etc/puppetlabs/code/environments \
--hiera_config=/tmp/kitchen/hiera.global.yaml
I'd check the modulepath in environment.conf, too, just in case.
I have a project that look like this:
|-- client
| |-- index.js
| |-- ...
| |-- package.json
| └-- webpack.config.json
|-- lib
| └-- myLocalLibrary
| |-- index.js
| └-- package.json
└-- server
└-- ...
Code from lib is used in both client and server by importing libraries with npm
So client/package.json and server/package.json contain:
{
dependencies: {
...
myLocalLibrary: 'file: ../lib/myLocalLibrary',
...
}
}
The problem is: when I run webpack in the client, it fails to resolve the imports used in myLocalLibrary, because:
a) NPM installs subdependencies for the local library in client/node_modules, not in lib/myLocalLibrary/node_modules
b) Webpack resolved code for myLocalLibrary using its source folder, which is out of the reach of client/node_modules
What should I do in a case like this?
If you are using webpack as a build tool, I think you have to use resolve.alias webpack config. We don't need node_modules in production env if we have use webpack to concat all files to one entry file.
In your webpack config:
module.exports = {
//...
resolve: {
alias: {
myLocalLibrary: path.resolve(__dirname, 'lib/myLocalLibrary'), // where is the webpack.config.json?
}
}
};
https://webpack.js.org/configuration/resolve/
I'm using npm link to reference a typescript library I'm developing in my test project
Which means that my node_modules looks like this :
node_modules/
| myLib/
| | dist/
| | | subModule/
| | | | index.js
| | | | index.d.ts
| | | index.js
| | | index.d.ts
| | node_modules/
| | src/
| | tsconfig.json
| | package.json
Which implies that when I'm trying to reference my library using import X from "myLib" I have to tell the compiler that the sources are in the /dist forlder, not that the root of myLib.
I solved this by adding a "main": "./dist/index.js" in the package.json of myLib
The problem is when I try to import a path relative to myLib
Like import Y from "myLib/subModule"
This time it doesn't work.
Because instead of looking at node_modules/myLib/dist/subModule tsc is looking at node_modules/myLib/subModules/dist/ which doesn't exist.
How can I make the compiler to look at the right path for subModules ?
You can resolve this by using the "paths" key in the "compilerOptions" in your tsconfig.json. Something like this:
{
"compilerOptions": {
"paths": {
"myLib/*": "node_modules/myLib/dist/*"
}
}
}
Sadly, this is something of a standing issue with how the TypeScript compiler resolves definition files when you have a "types" key in your package.json.