I am building a multi page site that uses SASS along with the commons like HTML, CSS JS and webpack. Which works just fine locally when I run npm start, which triggers my webpack.dev.js please refer to the screenshot npm start.png.
Similarly when I run the npm run build command, in my project I would like my ./sass/main.scss file to get compiled and bundled into the dist folder, which will then serve and style all the html pages that are generated in the ./dist folder. Instead when I run the npm run build command it does create the ./dist folder, the html files and css files but the style is not injected into the html.
So to summarise I don't get any specific error as such but instead I don't get a desired outcome after running my webpack.prod.js as mentioned above.
So the problem is in the plugins and the module section of the webpack.prod.js, that is the way I have setup to spit out the css, js and the html pages
The repo has all the files including the ./dist folder and screenshots of the commands npm start and npm run build and the file structure as well
My github repo is https://github.com/kekir/WP-experiment
hope that helps
thanks again
Related
directory structure
look JS and CSS folder are inside resources directory instead it should be public directory and the asset folder is also missing. I have already install NPM and node latest version and i have run npm run watch dev all these commands but it is not working
I am working on a VueJS web app. One of the modules it uses is a wrapper for a javascript library installed through npm and packaged to integrate into vuejs. It does not quite fit our needs, we need to add some functionality to it, so I want to fork it and edit it.
The repo has two folders: src and dist.
As far as I understand, src is the actual src code while dist is a minified version for distribution. Questions:
If I want to edit it, how do I deal with the contents of /dist ? Do I delete it?
Do components installed through npm use the /src/ version or the /dist/ one?
If I delete /dist, work on the /src code, how do I recreate /dist based on the modified /src files?
Thank you.
Based on your questions, I would suggest you get a bit more familiar into your stack and how to actually build your appication.
Generally speaking the /dist folder contains automatically generated files, which may be uploaded to a webserver of your choice. Since you are using VueJS, you should be able to generate these files by running npm run build.
If I want to edit it, how do I deal with the contents of /dist ? Do I delete it?
As I already mentioned, these files are automatically generated by running npm run build. Therefore everytime you run this command, everything in /dist, will be automatically updated.
Do components installed through npm use the /src/ version or the /dist/ one?
Your working directory is always /src. Dependencies can be used like in any other application (this example uses Axios, which is a http client):
import axios from 'axios';
const httpClient = axios.create({ baseURL: 'https://api.something.com' });
httpClient.get(/* ... */);
If you are a beginner and are not 100% sure about how to use depencencies, I highly encourage you to read this article: An Absolute Beginner's Guide to Using npm
If I delete /dist, work on the /src code, how do I recreate /dist based on the modified /src files?
You do not have to delete anything in /dist. Simply running npm run build automatically will add the latest changes.
Please keep in mind that running npm run build is only relevant for your production environment. For your development environment you always want to use a dev server, which can be started with npm run serve.
What i want is to have a library locally that when i change it those changes are reflected in the project that is using the library.
i have check out this library here in my local machine: https://github.com/manfredsteyer/angular-oauth2-oidc
So what i'm doing right now, is that i go to the library directory and then
npm link
And then get in my project directory and do
npm link angular-oauth2-oidc
The library folder appears inside my node_modules folder but i can't manage to use it, since when i start the app ng serve it says:
Cannot find module 'angular-oauth2-oidc'
I'm importing like this:
import { OAuthModule } from 'angular-oauth2-oidc';
I've tried to add the the path under the compilerOptions of the tsconfig.json file but haven't been sucessful.
Any ideas on what i'm missing here? I've tried several suggestions i've found on angular github issues but none solved my problem.
Thanks in advance
npm link in a package folder will create a symlink in the global folder {prefix}/lib/node_modules/ that links to the package where the npm link command was executed
Dont use npm link to add a library to your project, use npm install :
npm install angular-oauth2-oidc --save
You have to install it not just link it, so use this line to with flag --save to ensure that it will be saved in your package.json
npm install [package_name] --save
You can get the package name from the source website or from
https://www.npmjs.com/package/angular2
When you say:
So what i'm doing right now, is that i go to the library directory and
then npm link
Do you mean you are executing npm link in the folder you cloned the repository in? Because if so, that's likely your issue as that's the source directory and not what's actually published as a package. You must build the library, change directory into the distribution folder for the package, and then run npm link. Then when you run builds of that library, any Angular applications with that linked will automatically have the last version of your build in their node_modules.
Also, in your Angular applications where you are using the linked library you'll want to make sure you are setting preserveSymlinks to true in your angular.json.
While you can create multiple projects (e.g. an Angular app and an Angular library) under one Angular project to make this process a bit easier, I prefer to separating these two since I like one git repository to present one module.
First, you need to link your modules to your project's package.json file. Here's how to link files locally in general:
Local dependency in package.json
Linking a plain Typescript library is pretty straight forward as you just create an entry point (usually index.ts) file and export everything you want from there. This file needs to be in the same folder as the package.json file in your project.
An Angular library is a bit different as angular modules needs to be compiled before it can be properly exported. If you just import the module to your project without compiling you will get an error stating this: cannot read property 'ɵmod'. This happens at least at the time of writing this.
So we need to compile the library and then link it:
open two terminal windows
in the first terminal, go to your Angular library's root folder and run ng build --watch
check the output folder of the compiled module, usually something like dist/[library name]
change your Angular project's package.json to point to the output folder e.g. "my-angular-library": "file:../my-angular-library/dist/my-angular-library"
run npm install in the same folder
Add path to your Angular project's tsconfig.json e.g:
compilerOptions: {
"paths": {
"my-angular-library": ["./node_modules/my-angular-library"]
}
}
Otherwise you'll get errors like Error: Symbol MyComponent declared in /path/to/library/my.component.d.ts is not exported from my-angular-library
in the second terminal, go to your Angular project's root folder and run ng serve. Make sure you serve the project only after you have installed the local dependency.
You should now be able to use components, services etc. exported via your library module.
TL;DR
for the library ng build --watch
make the library dependency to point to the output folder e.g. "my-angular-library": "file:../my-angular-library/dist/my-angular-library"
npm i
Add path to your Angular project's tsconfig.json e.g:
compilerOptions: {
"paths": {
"my-angular-library": ["./node_modules/my-angular-library"]
}
}
ng serve
I'm using create-react-app. After running npm run build there is one build folder is generating. Under this folder there is one minified css file. I want to edit this file, when i'm running npm run build.
Instead of
url(/static/media/fontawesome-webfont.674f50d2.eot)
I want it should be like
url(../media/fontawesome-webfont.674f50d2.eot)
How to do this with npm scripts.
With create-react-app you can modify the final path of your compiled scripts by changing the value of homepage in package.json but unfortunally at this moment with the lastest version of create-react-app (1.0.11) you only can modify the path before the /static/ with the homepage property
So if you modify the homepage property to look like this "../" the final path will be url(../static/media/fontawesome-webfont.674f50d2.eot)
I have an electron app which runs with no problems when using electron www from the command line, however when i use electron-package to build a standalone binary, the built binary produces a console error as it cannot find certain front-end libs (angularMoment being one of them). Electron-package also fails to include other folders which contain the HTML templates for the app.
The project folder looks like this:
/electron
/www
/app
/css
/img
/js
/node_modules
- index.html
- main.js
- package.json
I am running electron-package from within the www folder and the process completes without errors however as mentioned earlier certain folders within the lib folder get missed off / ignored.
Any ideas why this is happening?
I recommend using the open source electron-forge to kickstart, build, and run your app. It has saved me heaps of time configuring, debugging, etc.!
When developing, did you install angular-moment by using the npm install angular-moment --save command?