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.
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 have a react application using the MERN (mongo, express, react, node) stack on heroku.
I have some environment variables stored in Heroku that get read into the root of my project. However the actual react application is nested within a folder of the project. Here is the file structure
.
├── client (react app)
│ ├── node_modules
│ ├── package.json
│ ├── public
│ └── src
├── controllers
├── routes
├── models
├── server.js
├── node_modules
├── package.json
└── .env
My environment variables are named REACT_APP_AUTH0_CLIENT_ID, REACT_APP_AUTH0_DOMAIN, and REACT_APP_MONGODB_URI. These environment variables are available in the server.js file at the root of the project. However they are not available in the client folder (my react app). How can I set this up so the environment variables from Heroku flow through the entire project?
FYI if I add a .env file within the client folder I can access those variables. It seems like react is unable to access environment variables outside the actual react application.
Here is what I have in the package.json at the project root:
Any help would be greatly appreciated!
I am creating a personal project in TypeScript. It should be a library that exports React components and TypeScript functions. The idea is therefore to publish this library on npm in the future.
There is also a demo page within the project and this is where I would like to use Storybook to test React components.
This is the structure of the project:
.
├── demo/ # demo page
│ └── Home.tsx # where I would like to use Storybook
│ └── index.html
│ └── index.tss
│ └── style.css
├── dist/ # distributable version of app built using Parcel
├── node_modules/ # npm managed libraries
├── src/ # project source code
│ └── lib/ # folder for your library
│ └── myFuncion.ts # function to export
│ └── MyComponent.tsx # react component to export
│ └── index.ts # app entry point (it simply contains the exports of myFunction and myComponent)
├── .eslintrc.js
├── .gitignore
├── package.json
├── tsconfig.json
├── ...
I have read the Storybook documentation and it recommends to install Storybook by running npx sb init. I tried but the problem is that the stories are put in the project src directory, not in the demo page:
.
├── demo/ # demo page
│ └── Home.tsx # where I would like to use Storybook
│ └── index.html
│ └── index.tss
│ └── style.css
├── dist/ # distributable version of app built using Parcel
├── node_modules/ # npm managed libraries
├── src/ # project source code
│ └── lib/ # folder for your library
│ └── myFuncion.ts # function to export
│ └── MyComponent.tsx # react component to export
│ └── stories/ # Storybook <<---
│ └── index.ts # app entry point (it simply contains the exports of myFunction and myComponent)
├── .eslintrc.js
├── .gitignore
├── package.json
├── tsconfig.json
├── ...
And the storybook script that is created is this:
"scripts": {
"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook"
},
but I would like something like:
"scripts": {
"storybook:demo": "start-storybook -p 6006",
"build-storybook:demo": "build-storybook"
},
So how can I install and use Storybook only on the demo page?
Looks like you're ultimately trying to have multiple source directories. This is supported by both TypeScript and Storybook, it just needs a bit of configuration.
tsconfig.json should have the include option set to:
"include": [ "src", "demo" ]
This tells TypeScript (or its Babel loader) to compile files in src and demo.
.storybook/main.js should have the stories option set to:
stories: [
'../demo/**/*.stories.mdx',
'../demo/**/*.stories.#(js|jsx|ts|tsx)',
],
This specifies which files should be interpreted as stories and in our case it would load *.stories.mdx/js/jsx/ts/tsx recursively from the demo folder.
Also note that the stories folder is just an example folder created by Storybook and you can safely delete it. Stories can be in any of the directories processed by TypeScript as long as it matches the patterns specified in .storybook/main.js.
You can even have multiple Storybooks with multiple configs in a single project, but that may not be what you're after. Just in case, though, the command would be start-storybook -p 6006 -c path/to/config/.storybook
If I understood correctly, you want to build a components library and have demo app for your components.
I don't think there is a way to use Storybook in an existing app. This would mean you would have to build your demo app and use some components from Storybook to show case components in your app. To my knowledge this is not possible. It might be, but it seems complicated and I don't know of any docs on this.
I think the Storybook app is (or should be) your demo app.
Storybook can render mdx files so you can add any content to it and get a demo app.
What you could try:
Move your demo app content and component stories to the demo folder
Migrate Home.tsx to a mdx file
Change Storybook's config to load stories from '/demo`
To a degree, you can change Storybook's styling and "make it your own" and this can become your demo app.
Until I discovered Storybook I used a home-made components show case app with react-live. Might want to take a look at it but I think Storybook is is better and easier to maintain.
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..
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'.