Incorrect images path in public folder - javascript

This is structure of my (vanilla js) app:
├─ assets/
│ ├─images
│ │ ├─first/
│ │ │ ├image1.png
│ │ │ ├image2.png
│ │ │ ├... etc
│ │ ├─second/
│ │ ├─third/
├─ node_modules/
├─ public/
│ ├─ assets/
│ ├─ index.html
├─ index.html
├─ main.js
├─ style.scss
├─ package.json
Everything works fine untill I run build, then path of my images is gone and every single image is in same publics direction:
├─ dist/
│ ├─ assets/
│ │ ├first.jpg
│ │ ├second.jpg
│ ├─ index.html
so paths from my dev environment are incorrect in public. Is there a possibility to keep my dev path structure after build?
Ant another issue - for some reason, on build project includes slash to script and styles, so my public html files have no scripts and styles, I have to remove it by myself.
Here is vite config file:
export default {
build: {
outDir: 'public',
rollupOptions: {
input: {
main: './index.html',
about: './about.html',
contact: './contact.html',
design: './design.html',
innovation: './innovation.html',
media: './media.html',
spaceline: './spaceline.html',
ucsl88: './uc-sl-88.html',
ucsl120: './uc-sl-120.html',
ucsl150: './uc-sl-150.html',
}
}
}
}
Thanks

Related

Where are eslint-import-resolver-aliases resolved from?

On the npm page of eslint-import-resolver-alias is following piece of code:
module.exports = {
  settings: {
    'import/resolver': {
      alias: {
        map: [
          ['babel-polyfill', 'babel-polyfill/dist/polyfill.min.js'],
          ['helper', './utils/helper'],
          ['material-ui/DatePicker', '../custom/DatePicker'],
          ['material-ui', 'material-ui-ie10']
        ],
        extensions: ['.ts', '.js', '.jsx', '.json']
      }
    }
  }
};
But I have a problem finding out where are the paths in map getting resolved from.
My current project is of this structure:
project_root/
├─ modules/
│ ├─ client/
│ │ ├─ node_modules/
│ │ ├─ src/
│ │ │ ├─ components/
│ │ ├─ README.md
│ │ ├─ tsconfig.json
│ │ ├─ .eslintrc.js
│ │ ├─ package.json
I want to make an alias to components folder. So should it be:
['#components', path.resolve(__dirname, './src/components')]
// OR
['#components', path.resolve(__dirname, 'components')]
// OR
['#components', './src/components']
// ...
Nothing I tried seemed to work, but it's hard to further debug as I don't know, if the paths may not be correct in the first place.
So I need to know if the paths are resolved from project_root location of .eslintrc.js or src or something else.
Also please consider that it needs to work with VS Code's Eslint server when you open the project in project_root.

Javascript clean architecture question: is there a way to enforce dependency restrictions on a file or directory, and write a Jest-ful test for it?

For example, let's say we have the following "clean architecture" project structure:
.
│ README.md
│ package.json
│ ...
│
└─── src
│ │ app.js
│ │ app.test.js
│ │ ...
│ │
│ └─── entities
│ │ │ foo.js
│ │ │ foo.test.js
│ │ │ bar.js
│ │ │ ...
│ │
│ └─── useCases
│ │ │ useFooAndBarToBaz.js
│ │ │ ...
│ │
...
How could a test be written to enforce the architectural concept that Entities should not have outward dependencies? IE: no file in the /entities directory should import and use any classes, functions etc found in another directory (/useCases directory in this example).
If possible, I would like to use Jest to write the test(s) (ideally in app.test.js to test the whole /entities directory, but if that's not possible then in foo.test.js to test the content of foo.js, etc etc), but I don't see anything glaringly obvious in the Jest docs about testing file imports.
There may be alternative ways to go about this (can Jest be used in combination with a bash script to walk the directories or something?), so I'm open to ideas.

Run multiple instance of a same script in nodeJS

I'm working on a website offering scraping with Puppeteer on NodeJS, so I decided to make a website using NodeJS and Express.
The scraping script must therefore be executed once a form has been completed.
The script must therefore be executed again for each new request without canceling the previous one. Hence I don't know how much script will be loaded in advance.
I think PM2 can be a good idea but, I'm not sure if it meets my needs.
Or I could use Node.js Cluster, this would allow me to create a fork for each filled form.
Here is the tree structure of my project:
my-app/
├─ bin/
│ ├─ www
├─ node_modules/
├─ public/
│ ├─ images/
│ ├─ javascript/
│ │ ├─ scrapper.js
│ │ ├─ script.js
│ ├─ stylesheets/
├─ routes/
│ ├─ index.js
├─ views/
│ ├─ error.pug
│ ├─ index.pug
│ ├─ layout.pug
├─ app.json
├─ package-lock.json
├─ package.json

How does an import from node_modules really work in ReactJS?

I installed react-vis via npm install react-vis
and its possible to write
import { XYPlot, LineSeries } from 'react-vis';
I want to know how the systems knows where XYPlot and LineSeries are? I looked in the node_modules directory and there is no index.js.
The structure of the react-vis directory is the following
my-app/
├─ node_modules/
│ ├─ react-vis/
│ │ ├─ dist/
│ │ ├─ es/
│ │ ├─ CHANGELOG.md
│ │ ├─ LICENSE
│ │ ├─ package.json
│ │ ├─ README.md
How does this work?
I researched and for example this does not helped me: Where { component } from 'react' is located when we are importing ReactJS?
Edit
I think it looks in the package.json that is inside the react-vis directory. There are two entries that look interesting. "name": "dist" and "module": "es". I think that i have to look inside the dist directory. Inside the dist directory, there is an index.js file. I open this file and on line 318 it says exports.XYPlot = _xyPlot2.default;
In the es folder inside the index.js there is on line 98 this: export { _XYPlot as XYPlot }; I don't know if this is important.

Require.js Build Optimization Configuration

I'm having a hard time getting the require.js build just right. I have a main module and then the other pages/modules are lazy loaded. When it's done compiling, I have to fix the compiled dist/main.js or the app will load the compiled main module from the dist folder, but other modules are still loaded from the app folder. I have to change the require.config baseurl from /app to /dist. What do I need to reconfigure to get it to build correctly?
Directory Structure
├── app
│ ├── modules
│ │ ├── example_module
│ │ ╰── another_module
│ │ ├── AnotherController.js
│ │ ╰── AnotherView.stache
│ ├── main.js
│ ╰── build.js
├── dist
│ ├── modules
│ │ ├── example_module
│ │ ╰── another_module
│ │ ╰── AnotherController.js
│ ╰── main.js
├── content
│ ├── css
│ │ ╰── main.css
│ ├── sass
│ │ ├── table.scss
│ │ ├── type.scss
│ │ ├── form.scss
│ │ ╰── main.scss
│ ╰── img
├── lib
│ ├── bootstrap
│ ╰── canjs
├── bower.json
├── gulpfile.js
├── package.json
├── README.md
╰── index.html
app/main.js
require.config({
baseUrl: '/app', // must change this after compilation!
paths: {
'jquery': '../lib/jquery/dist/jquery.min',
'jquery-easing': '../lib/jquery-easing-original/jquery.easing.1.3.min',
'jquery-throttle': '../lib/jquery-throttle-debounce/jquery.ba-throttle-debounce.min',
'jquery-inputmask': '../lib/jquery.inputmask/dist/jquery.inputmask.bundle.min',
'can': '../lib/canjs/amd/can',
'bootstrap': '../lib/bootstrap-sass-official/assets/javascripts/bootstrap',
...
},
shim: {
'jquery-easing': ['jquery'],
'jquery-throttle': ['jquery'],
'bootstrap': ['jquery']
...
}
});
require([...], function (...) {
// Init App
});
app/build.js
({
appDir: '.',
baseUrl: '.',
dir: '../dist',
mainConfigFile: 'main.js',
preserveLicenseComments: false,
modules: [
{
name: 'main',
include: [
'modules/dashboard/DashboardController',
...
]
},{
name: 'modules/example_module/ExampleController',
exclude: ['main']
},{
name: 'modules/another_module/AnotherController',
exclude: ['main']
},{
...
}
]
})
Interesting, I've actually not used this scenario with RequireJS, however this structure would make sense for bundles/progressively loading files.
What I've done in the past is one of two things:
1) Use the existing /app directory for progressively loaded modules. /dist would only contain main.js/css or output the minified files to the root(if it's only 1-2 files)
2) Re-create the entire structure with only necessary files inside /dist. For example: /dist/index.html, /dist/app/modules/*, /dist/main.js would all exist. This way you can copy the entire /dist contents to any deployment package you use, vs cherry-picking which files you'll need on a production server.
Typically, I've found #2 is more common in my experience.

Categories