I am deploying my personal website on netlify and I'm using the following link tag for the icons
<link rel="stylesheet" href="node_modules/#fortawesome/fontawesome-free/css/all.css">
I tried setting up environment variables for node.js on Netlify and forcing npm install --save #fortawesome/fontawesome-free but it didn't solve my problem.
I read in this post that Netlify runs npm install and then deletes the node_modules folder so the above link tag doesn't work and my page doesn't show the icons.
One of the answers in that post said that it's wrong to have the node_modules folder on the deployed folder, and that I have to take my resources during build time. The problem is, I don't know how to do that.
So, I wanted to know if there's a simple workaround besides the one on the post mentioned above to keep the node_modules folder in the netlify deployed folder or a little guidance to get my icons in build time so I don't need the whole node_modules folder.
Every help is appreciated!
Extra information:
This is the site (with an old deploy that shows the icons)
This is how my package.json file look:
{
"name": "david-choi",
"version": "1.0.0",
"description": "David's Choi personal website",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "npm install --save #fortawesome/fontawesome-free"
},
"repository": {
"type": "git",
"url": "git+https://github.com/choidavid4/david-choi.git"
},
"author": "David Choi",
"license": "ISC",
"bugs": {
"url": "https://github.com/choidavid4/david-choi/issues"
},
"homepage": "https://github.com/choidavid4/david-choi.git",
"dependencies": {
"#fortawesome/fontawesome-free": "^5.15.4"
}
}
Related
I created a personal website and pushed to the code to GitHub then published it on GitHub pages and everything was working well.
I then switched the repo from public to private and as expected, the published GitHub pages site was not accessible.
Now I again switched the repo from private to public but now (>30 minutes since going public), I get a 404 whenever when attempting to access the site.
repository: https://github.com/wandesky/portfolio
site: https://wandesky.github.io/portfolio/
I have tried giving the GitHub pages some time (>30 minutes) to see if the site will be back.
I have also tried to launch GitHub pages from the command prompt (as I did when initially launching the site) but still, the site does not go live.
"name": "wandesky_portfolio",
"version": "1.0.0",
"description": "Responsive portfolio website",
"main": "index.js",
"homepage": "https//wandesky.github.io/portfolio",
"scripts": {
"sass": "node-sass -w scss/ -o dist/css --recursive",
"deploy": "gh-pages -d dist"
},
"author": "wandesky",
"license": "MIT",
"dependencies": {
"gh-pages": "^2.0.1",
"node-sass": "^4.12.0"
}
}
I expect that switching the repo back to public will make the site accessible.
When toggling a repo from public to private then back to public, it takes longer for the github pages to go live (again).
I went to bed and on waking up the next day, the site was up again.
I'm trying to get debugging in Visual Studio Code with an application running via Webpack. There is lots of contradictory information around, and the documentation relating to usage with Webpack is very poor.
I understand that I need a launch.json file in the .vscode dir in the root of my project, and it appears that there are two approaches:
Launch Webpack (using yarn start which maps to webpack-dev-server --env development --open, then have VSCode attach to that.
Have VSCode launch webpack in Chrome and then attach to that.
After a couple of hours trying different things I have had no success.
If I run webpack and try and attach to it using the following launch.json:
{
"version": "0.0.0",
"configurations": [
{
"name": "Attach",
"type": "chrome",
"request": "attach",
"port": 9222,
"url": "http://localhost:8080/",
"webRoot": "${workspaceRoot}"
}
]
}
I get an error in VSCode saying:
Got a response from the target app, but no target pages found
What is the best way to approach this?
Should I be trying option 2 and running Webpack from VSCode?
Note that running yarn start runs the application successfully in Chrome.
When using the "request": "attach" config you need to specify 'urlFilter' instead of 'url'. Note that 'urlFilter' uses wildcard, so your config should look like this;
{
"name": "Attach",
"type": "chrome",
"request": "attach",
"port": 9222,
"urlFilter": "http://localhost:8080/*",
"webRoot": "${workspaceRoot}"
}
Ref; https://github.com/Microsoft/vscode-chrome-debug#other-optional-launch-config-fields
I am trying to deploy an application to Google Cloud. However i get the following error:
Error: Cannot find module '/src/server/mainServer.js'
The package.json contains the following:
"scripts": {
"start": "node /src/server/mainServer.js"
},
The package.json file is contained in the base directory alongside the src folder.
EDIT: Structure:
app /
package.json
src /
server /
mainServer.js
client /
app.js
After changing the path to ./ I get the error:
Error: Cannot find module '/app/src/server/mainServer.js'
Try to place a period before the directory folder.
That is: './src' instead of '/src'
"scripts": {
"start": "node ./src/server/mainServer.js"
},
Make it an absolute path by adding .. This means walk up the directory tree from the current working directory of package.json
"scripts": {
"start": "node ./src/server/mainServer.js"
}
I am building a chrome extension, but I want to use react to build it. I am not sure how I need to configure my manifest.json in order to get it to work.
This is my manifest.json file...
{
"name": "Get pages source",
"version": "1.0",
"manifest_version": 2,
"description": "Get pages source from a popup",
"browser_action": {
"default_popup": "./src/index.html"
},
"permissions": ["tabs", "<all_urls>"]
}
Now the way that I run my app locally, is with the following script in package.json...
"scripts": {
"dev": "webpack-dev-server --content-base src --inline --hot"
}
My app displays on localhost:8080. However, I want the app to open up when I click on my extension. How can I do this? Do I need to reference the path to the localhost?
At the moment, when I run my extension, the index.html file gets loaded but nothing is rendered. Can someone explain how to do this?
EDIT
I also tried the following but it did not work...
"browser_action": {
"default_popup": "http://localhost:8080/src/index.html"
},
Change default_popup in manifest.json to "src/index.html".
Always build your code before packing extension and use webpack instead of webpack-dev-server
Also babel-core and webpack-dev-server were missing from package.json
Here is the screenshot of working extension:
Screenshot of development:
Make a new folder when you publish your extension which excludes node_modules folders ( only after you npm run build )
Here is the link with the updated code: https://drive.google.com/open?id=0ByrxEyIevnFmNXlDZERaRTBMSlE
Please don't forget to run npm install and npm run build before loading unpacked extension.
Comment if any further help needed.
Is there a reason why "./bin/post_install.sh" and "bin/post_install.sh" would fail in scripts.postinstall of package.json? Works fine in the root directory, but that will quickly become a nightmare as more executable etc are added.
"scripts": {
"postinstall": "./bin/post_install.sh"
},
and
"scripts": {
"postinstall": "bin/post_install.sh"
},
both throw errors over "." or "bin" not being recognized as an internal or external command? But the examples on npmjs show "scripts/file.js" as an example???
Thanks
Solved it, I'm using windows so have to use \. Hopefully this helps someone.
Example:
"scripts": {
"postinstall": "bin\\post_install.sh"
},