This is my first time using reactjs. I installed react and react-dom using npm.
This is my main.js file:
import React from 'react'
import ReactDOM from 'react-dom'
ReactDOM.render(<h1> hello world</h1>,document.getElementById("node"));
This is my index.html file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css">
</head>
<body>
<div id="node"></div>
<script src="main.js"></script>
</body>
</html>
Both files are in the same directory, but react isn't changing the VIEW.
Does anyone have any advice for me on how to proceed?
Try running
create-react-app APP_NAME
Hope this works
Related
I have a nx workspace where I have several react apps. One of them is payment and I want to serve it under mybaseurl.com/payment . The static assets (css, js) are failing to load because they are still pointed at root in the index.html. I cannot seem to change the PUBLIC_URL to "/payment" so that all the static files are served from mybaseurl.com/payment instead of mybaseurl.com.
I have tried putting PUBLIC_URL="mybaseurl.com/payment" in the .env file as well as, PUBLIC_URL="mybaseurl.com/payment" nx build payment --prod but nothing seems to have any result.
How can I change PUBLIC_URL here during build time?
For ref, use of PUBLIC_URL: https://create-react-app.dev/docs/adding-custom-environment-variables/
Example code:
Currently the build is generating the following
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Payment</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<link rel="stylesheet" href="styles.eb84118aca9dde73dfd8.css">.
<link rel="stylesheet" href="main.0e4338761429b4eb16ac.css">
</head>
<body>
<div id="root"></div>
<script src="runtime.28c323bf8ee123f67bad.esm.js" type="module"> </script>
<script src="polyfills.dd856a07eb47f9259494.esm.js" type="module"></script>
<script src="main.705bf19aea16ed7111ba.esm.js" type="module"></script>
</body>
</html>
But I want the build to generate the follwing in the index.html,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Payment</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<link rel="stylesheet" href="/payment/styles.eb84118aca9dde73dfd8.css">.
<link rel="stylesheet" href="/payment/main.0e4338761429b4eb16ac.css">
</head>
<body>
<div id="root"></div>
<script src="/payment/runtime.28c323bf8ee123f67bad.esm.js" type="module"> </script>
<script src="/payment/polyfills.dd856a07eb47f9259494.esm.js" type="module"></script>
<script src="/payment/main.705bf19aea16ed7111ba.esm.js" type="module"></script>
</body>
</html>
The easiest way to achieve this is to change the base tag by editing apps/payment/src/index.html:
<base href="/payment/">
The browser will then prepend the path to those assets.
i set the "baseHref" property in the production config in the project.json and then it appeared in the generated index.html
I had build an app using create-react-app. And our server is set up as such that all files except index.html are in a folder named static.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="./static/favicon.f99d69b1.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>App</title>
<script type="module" crossorigin src="./static/index.81e5d079.js"></script>
<link rel="modulepreload" href="./static/vendor.ba9c442b.js">
<link rel="stylesheet" href="./static/index.f28d7853.css">
</head>
<body>
<div id="root"></div>
</body>
</html>
So JS file's path is ./static/js/main.836d2eb0.js.
And then I decided to go for Vite.
As you may know, Vite's default assets' directory is callled assets. I managed to change it to static by changing build.assetsDir to static in vite.config.js
build: {
assetsDir: "static",
outDir: "./../backend/src/main/resources/static/app/",
},
I changed the output's directory too.
After runing npm run build, all of the files are generated in the correct directory. However, CSS, JS, and other assets have wrong path, for ex, my JS file's path is /static/vendor.ba9c442b.js It lacks dot(.) before the first slush
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/static/favicon.f99d69b1.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Fiken Kundestøtte</title>
<script type="module" crossorigin src="/static/index.81e5d079.js"></script>
<link rel="modulepreload" href="/static/vendor.ba9c442b.js">
<link rel="stylesheet" href="/static/index.f28d7853.css">
</head>
<body>
<div id="root"></div>
</body>
</html>
info: It is a spring boot app.
So how to fix the files' path?
Configure the base URL to be ./:
// vite.config.js
import { defineConfig } from 'vite'
export default defineConfig({
base: './', 👈
})
demo
I have built my components and imported them into the Laravel framework. I have set react as preset and the App loads. The Sass files are in each folder that has a component eg.
\ComponentX
--ComponentX.js
--ComponentX.module.scss
The files load fine but there is no css being added.
I have done npm install sass-node - that is all so far.
I tried to place sass file in the 'sass' folder that is given to us when Laravel is installed but nothing happens, Is there further configuration required?
WEBPACKMIX
const mix = require('laravel-mix');
mix.react('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
mix.browserSync('localhost:8000');
I am importing the sass into my components
import styles from './App.module.scss';
I have one view 'home.blade.php', which I point the script to the js resource and have an id for App.js to pin to.
<!doctype html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<link href="{{asset('js/sass/app.scss')}}" rel="stylesheet" type="text/css">
</head>
<body>
<div id="root"></div>
<script src="{{asset('js/app.js')}}" ></script>
</body>
</html>
Thank you in advance
I have made a react app and tried deploying it to git-hub pages. I guess I have messed up with some path specifications.
Here is the file structure :
- public
- css
- image
- js
- index.html
- manifest.json
My html file looks like
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="%PUBLIC_URL%./manifest.json">
<link rel="stylesheet" href="%PUBLIC_URL%./css/default.css">
<link rel="stylesheet" href="%PUBLIC_URL%./css/layout.css">
<link rel="stylesheet" href="%PUBLIC_URL%./css/media-queries.css">
<link rel="stylesheet" href="%PUBLIC_URL%./css/magnific-popup.css">
<title>Piyush</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.10.2.min.js"><\/script>')</script>
<script type="text/javascript" src="js/jquery-migrate-1.2.1.min.js"></script>
<script src="js/jquery.flexslider.js"></script>
<script src="js/waypoints.js"></script>
<script src="js/jquery.fittext.js"></script>
<script src="js/magnific-popup.js"></script>
<script src="js/init.js"></script>
</body>
</html>
Error:
GET https://piyushbhangale.github.io/static/css/main.8a155958.chunk.css net::ERR_ABORTED 404
You need to configure package.json with:
"homepage": "http://yourhomepage.com"
I'm having issues launching a React.js app built with Gulp.
I ran npm install even npm update, but when I go to the browser, I do not see the app, but instead I see a blank screen.
Also, I noticed that gulp build produced a blank index.html file.
<!-- <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Default</title>
<meta name="description" content="">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link href="./app.css" rel="stylesheet">
<link href="//fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,700" rel="stylesheet">
</head>
<body>
<div class="container">
<div id="registration-form"></div>
</div>
<script src="./app.js"></script>
</body>
</html> -->
Please advise.