I have simple problem but I can't seem to get the correct path right. everything seems to be OK, followed tutorial from here
I have file structure like here.
.
├── Makefile
├── README.md
├── app
│ ├── electron.html
├── app.js
├── bower.json
├── bower_components
│ ├── Chart.js
I tried loading some local resources in electron.html my local resources
<script src="../bower_components/angular-route/angular-route.min.js"></script>
but..
Failed to load resource: net::ERR_FILE_NOT_FOUND
file:///bower_components/angular-route/angular-route.min.js
how do I load the local resources?
thanks to electron 1.0 btw. I wanted to try it out fast though..
Related
I am trying to deploy a react personal portfolio using Vercel, but keep getting these errors. How do i fix? I also don't understand the error about img because it is in src enter image description here
code to my portfolio: https://github.com/Kdot117/Personal-portfolio
These lines in your code in Work.js are the issue.
You are importing images with absolute paths.
import BusinessCard from "/Users/kendrickizaguirre_1/kendricks-portfolio/src/BusinessCard.jpg"
import pizza from "/Users/kendrickizaguirre_1/kendricks-portfolio/src/components/pizza.jpg"
import madstat2 from "/Users/kendrickizaguirre_1/kendricks-portfolio/src/components/madstat2.jpg”
A cleaner approach (without using a library) will be to.
Make an images folder inside src.
Copy all images you are importing in js components inside this folder. or with meaningful subfolders inside the image folder.
Finally import the images in the components with the relative path.
So if I change your package structure as below.
└── Personal-portfolio
├── README.md
├── package-lock.json
├── package.json
├── public
│ ├── index.html
│ └── manifest.json
└── src
├── App.css
├── App.js
├── components
│ ├── About.js
│ ├── Contact.js
│ ├── Header.js
│ ├── Navigation.js
│ └── Work.js
├── images
│ ├── BusinessCard.jpg
│ ├── abstract.jpg
│ ├── kenny.jpg
│ ├── madstat.jpg
│ ├── madstat2.jpg
│ └── pizza.jpg
├── index.css
└── index.js
Then import in Work.js will look like this
import BusinessCard from “../images/BusinessCard.jpg"
import pizza from "../images/pizza.jpg"
import madstat2 from "../images/madstat2.jpg”
You are importing some files from an absolute path pointing to your laptop a as you can see here:
https://github.com/Kdot117/Personal-portfolio/search?q=%2Fusers%2F
Replace those with relative imports, such that
/Users/kendrickizaguirre_1/kendricks-portfolio/src/components/BusinessCard.jpg becomes src/components/BusinessCard.jpg, which will then be available also in Vercel.
BUT. Here's a better alternative. Move those images to a folder called public. And then Next.js will serve those as static files as explained here:
https://nextjs.org/docs/basic-features/static-file-serving
In this case you don't need to import anything, you would simply say <img src="/BusinessCard.jpg">
Additionally, you might want to take a look at Next Image component for optimized images out-of-the-box: https://nextjs.org/docs/basic-features/image-optimization
I am just starting out with Reactjs. The default code in the App.js file has the react logo. On inspecting the img tag for this logo in the browser, I see the following src url.
<img src="/static/media/logo.5d5d9eef.svg" class="App-logo" alt="logo">
But I dont find the "/static/media/" path anywhere in my local project directory, and I don't find the file 'logo.5d5d9eef.svg' anywhere either. Where is this image being served from?
This logo you are seeing is being served from /src/logo.svg.
The static/media/ is being generated from how react builds and shows to the user.
Here is the intial create-react-app structure:
my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│ ├── favicon.ico
│ ├── index.html
│ └── manifest.json
└── src
├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
├── logo.svg
└── serviceWorker.js
└── setupTests.js
Here is where you can find some more documentation:
https://github.com/facebook/create-react-app
It mostly about Webpack (which is used by create-react-app). As you can see the original file is named logo.svg. Webpack detects imports like import logo from './logo.svg' and transforms imported files into assets with suffix logo.5d5d9eef.svg. This is needed to make asset names unique. Please read about Webpack first.
I have a Javascript (typescript) project that I am using as a git submodule in a react project (also typescript).
This all works fine... until I make use of any node module in the git submodule. I tried using, for example, the node modules "moment" and "faker", but I am almost certain that it does not have anything to do with these specific node modules.
Importing for example "moment" in the submodule:
import moment from 'moment';
using it:
moment().format('DD/MM/YYYY');
and running the main react project leads to this error:
Failed to compile.
./src/project_core/node_modules/moment/moment.js
Line 5:37: 'define' is not defined no-undef
Line 5:50: 'define' is not defined no-undef
Removing moment().format('DD/MM/YYYY'); solves it.
If I just run some tests directly in the submodule and make use of for example "moment", it always works. I can use the node modules. It looks like something goes wrong once the main project uses the node modules in the git submodule.
This is how my react project looks like. As you can see the submodule project_core is added in the src folder of the main project.
├── build
│ ├── assets
│ └── static
│ ├── css
│ └── js
├── node_modules
├── public
│ └── assets
└── src
├── project_core
│ ├── node_modules
│ ├── src
│ └── tests
├── ui
├── api
└── utils
I know... I read everywhere that using git submodules is not recommended. I, however, just want to experiment with git submodules to learn from it.
It looks like you have a node module inside a node module. This probably confuses your bundler and produces the import errors. Try removing the package.json and node_modules from your project core subdirectory and see if the imports work correctly. If you want to make your core directory a library think about actually having it as a npm dependency instead of a submodule. You could still reference a git commit hash in the dependency.
I am still trying to deploy to google app engine both the local test environment and on app engine itself, and I keep getting this error:
2017/10/03 17:50:40 go-app-builder: Failed parsing input: app file DbConfig.go conflicts with same file imported from GOPATH
I have used grep to see if I explicitly import DbConfig but I, this is the result of grep:
$ grep -r 'DbConfig' .
./config.go:func GetDatabaseConfiguration() model.DbConfig {
./config.go: return model.DbConfig{connectionName, user, password, dbType, dbName}
Binary file ./share-services matches
./queries/db-config.go: dbConfig model.DbConfig
./queries/db-config.go:func Config(newDbConfig model.DbConfig) {
./queries/db-config.go: dbConfig = newDbConfig
./model/DbConfig.go:type DbConfig struct {
./model/DbConfig.go:func (d DbConfig) ConnectionString() string {
So from what I can tell I should not get an error and since other structs from my model package works just fine this is very strange to me. Firstly because Google App Engine accepts the deploy and first fails later, secondly because the dev server fails immediately, and lastly because if I run outside the app engine, I don't get this error.
Can someone give me a pointer to how to fix this please. I have search for a fix, but most state to use absolute include paths for packages which I already am.
EDIT:
I forgot to include the build command used, maybe that will help
go-app-builder -app_base /home/tools/go/src/bitbucket.com/chocolate-cloud-dev/share-services -arch 6 -dynamic -goroot /home/tools/sdks/google-cloud-sdk/platform/google_appengine/goroot-1.6 -gopath /home/tools/go -nobuild_files ^^$ -incremental_rebuild -unsafe -print_extras_hash links/generator.go model/user.go model/service.go model/SharedWith.go handlers.go config.go model/connection.go jsonHelpers/decoders.go queries/share-with-queries.go authentication/autenticate.go queries/share-queries.go model/share.go download/download.go model/Download.go model/File.go queries/file-queries.go jsonHelpers/encoders.go queries/db-config.go model/DbConfig.go model/NewestFile.go share-services.go jsonHelpers/CreateShare.go queries/download-queries.go
And this is my project structure:
.
├── app.yaml
├── authentication
│ └── autenticate.go
├── build-and-run
├── config.go
├── deply_v1.sh
├── download
│ └── download.go
├── go-notes.md
├── handlers.go
├── jsonHelpers
│ ├── CreateShare.go
│ ├── decoders.go
│ └── encoders.go
├── LICENSE
├── links
│ └── generator.go
├── model
│ ├── connection.go
│ ├── DbConfig.go
│ ├── Download.go
│ ├── File.go
│ ├── NewestFile.go
│ ├── service.go
│ ├── SharedWith.go
│ ├── share.go
│ └── user.go
├── models
├── queries
│ ├── db-config.go
│ ├── download-queries.go
│ ├── file-queries.go
│ ├── queries.sql
│ ├── share-queries.go
│ └── share-with-queries.go
├── README.md
├── run-locally-mac.sh
├── run-localy.sh
├── scripts
│ └── Script.sql
└── share-services.go
the answer is to either use relative paths instead of absolute, which still does not totaly work Or make a 100% flat folder structure.
I have an app that uses a custom application-specific library (sap.ui.foo) which contains custom controls, views and controllers.
My deployment strategy is serving my custom library from the same server/port that is serving the index.html file.
I would also like to use SAP's CDN to load the OpenUI5 libraries (sap.m, etc).
I am using the Grunt/node tools that come with OpenUI5's GitHub repository.
When I load my application all locally (no CDN) it works perfectly, but is very slow (such a huge download payload I suppose) so I'm trying to use the CDN in hopes of improving startup performance.
My index.html looks like this: (edited after #codeworrior's answer):
<script id="sap-ui-bootstrap"
src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-libs="sap.ui.layout, sap.m, sap.ui.foo"
data-sap-ui-xx-bindingSyntax="complex"
data-sap-ui-resourceroots='{
"ns":"./",
"sap.ui.foo": "./sap/ui/foo/"
}'
>
Here is my directory structure (which to my knowledge is "standard"):
src
├── foo
│ └── src
│ └── main
│ └── webapp
│ ├── index.html # start point
│ ├── resources
│ ├── test-resources
│ └── WEB-INF
├── sap.m
├── sap.ui.commons
...other sap libs...
└── sap.ui.foo
└── src
└── sap
└── ui
└── foo
└── # my controls...
and after a grunt build:production my "target" directory looks like this:
target
├── openui5-sap.m
├── openui5-sap.ui.commons
├── openui5-sap.ui.core
├── openui5-sap.ui.demokit
├── ...other sap libs...
├── openui5-sap.ui.foo
└── resources
└── sap
└── ui
└── foo
├── Bootstrap.js
├── controllers
├── controls
├── data
├── font
├── img
├── js
├── library.js
├── library-preload.json
├── models
├── tasks
├── themes
├── util.js
├── views
└── wrappers
But, after I do a grunt serve:target and hit the url http://localhost:8989/foo/, in Chrome's dev-tools I get:
failed to preload 'sap.ui.foo.library-preload': Not Found - sap.ui.ModuleSystem
Uncaught Error: failed to load 'sap/ui/foo/library.js' from ./sap/ui/foo/library.js: 404 - Not Found
The network tab shows me that the CDN files are being served just fine, but the files that I'm trying to serve locally (such as my custom lib's library.js and library-preload.json) are 404's.
Any advice on how to get my library to load?
If your library is stored in the usual way (reflecting the full qualified names in the folder structure), then it should be sufficient to define a corresponding entry in your data-sap-ui-resourceroots attribute:
<script id="sap-ui-bootstrap"
src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-libs="sap.ui.layout, sap.m, my.uilib"
data-sap-ui-xx-bindingSyntax="complex"
data-sap-ui-resourceroots="{
ns:'./',
'my.uilib': './my/uilib/'
}">
</script>
If the structure is different, just adapt the path in the configuration. resourceRoots are configured early, so you could even specify your lib in the data-sap-ui-libs attribute.
But maybe you tried that already and it didn't work. Then the problem might have been with the spelling of the option. It's 'resourceroots', not 'resource-roots'.