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
Related
There's a problem with Vite and React when having dynamic routes (list/:id). Only on dev.
Using vite dev server with --build option enabled:
vite:html-fallback Not rewriting GET /list/src/index.tsx because the path includes a dot (.) character. +47ms
However this should be fixed by adding plugin: https://github.com/vitejs/vite/issues/2245
vite.config.js:
plugins: [
react(),
{
...pluginRewriteAll(),
}
],
But it's not in my case.
Sorry I couldn't find it earlier somehow, but here's the solution.
Original answer -> Getting "404 not found" when refreshing a page that has a nested route, because Vite doesn't redirect all routes to index.html
Add <base href="/" /> tag inside HTML file <head> tag:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="/favicon.png" />
<meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
<meta name="description" content="My App" />
<title>My App</title>
<base href="/" />
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<script type="module" src="src/index.tsx"></script>
<div id="root"></div>
</body>
</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
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
I used webpack to bundle all my files.
I have a bundle.js file in a directory with an index.html
When i open it in browser it gives me an error :-
Warning: [react-router] Location "/home/vivek/Desktop/prismo-front/build/index.html" did not match any routes
My file directory looks like this : -
index.html
<!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">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<title>Prismo</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root">ds</div>
<script type="text/javascript" src="bundle.js" charset="utf-8">
</script>
</body>
</html>
Run the following to serve your files locally.
Install: npm install -g http-server.
cd into build
run http-server
go to http://localhost:8080/ in browser
OR upload your files to a server and you won't get this problem. You can't use run your index.html file locally as it doesn't play nicely with History which is used for React Router.
This is my directory structure:
build/ (contains gulp tasks for generating dist from src)
dist/ (this is the static app I'm serving)
(all other assets, css, images, etc)
index-5c1755df65.html
src/ (source files, can't be served through express)
express/ (express app + API)
app.js
Here's my express app.js:
//Enable Helmet security fixes - dnsPrefetchControl, clickjacking prevention, poweredBy hide, HSTS, ieNoOpen, MIME type sniffing and XSS prevention
app.use(helmet());
//Parse the body of the request as a JSON object, part of the middleware stack (https://www.npmjs.com/package/body-parser#bodyparserjsonoptions)
app.use(bodyParser.json());
//Serve static Angular JS assets from distribution, part of the middleware stack, but only through HTTPS
//--------The following line used to work!---------
app.use('/', ensureSecure, express.static('dist');
//Import routes (Removed getToken router. BH Token is processed through a helper)
app.use('/api', [router_invokeBhApi]);
//404 Redirect on unhandled url
app.use('*', function (req, res, next) {
res.status(404).sendFile(__dirname + '/views/404.html');
});
//Setup port for access
app.listen(process.env.PORT || 3000, function () {
console.log(`The server is running on port ${process.env.PORT || 3000}!`);
});
I used to serve the entire dist (which is an angular 1.4.3 app) with that line in the code above and it used to serve the index file, even though it had a random cipher in the name.
After some updates, it just stopped working. Now I have to do this, using an external library called serve-static from npm:
app.use('/', ensureSecure, serveStatic('dist', {'index': ['index-5c1755df65.html', 'index.html']}));
Not sure how to fix this, or what caused this sudden change. Is it the browser? or angular? (upgraded from 1.4.3 to 1.5.8 with my latest changes)
EDIT: My html file
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<!--REMOVED ALL THE META TAGS FOR STACK OF PURPOSES-->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>IMG Career Portal</title>
<!-- default font -->
<!--<link href='//fonts.googleapis.com/css?family=Roboto:400,700,500' rel='stylesheet' type='text/css'>-->
<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<!-- Font Awesome -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="styles/vendor-f398fee98b.css">
<link rel="stylesheet" href="styles/app-292a67e7f9.css">
</head>
<body>
<!-- Main Application Tag (Angular2 Ready :)) -->
<main></main>
<script src="scripts/vendor-ec12e9202e.js"></script>
<script src="scripts/app-8e0fb1a5c9.js"></script>
</body>
</html>
I run gulp express to clean, build and run the app:
gulp.task('express', ['clean','build'], function(){
nodemon({
script: 'express/app.js'
});
});
It's because app.js need work inside head tag.
If you want your index.html file inicializate with focused API:
app.get('/', function(req, res){
res.render("../yourpaste/index"); //the new index.ejs file
});
Add in your app.js
module.exports = app;
Try put your app.js inside head tag.
<!doctype html>
<html lang="en">
<head>
<script src="scripts/app-8e0fb1a5c9.js"></script> //your app.js
<meta charset="utf-8">
<meta name="description" content="Official career portal of the Ian Martin Group, an Engineering & IT recruiting B Corporation.">
<meta property="og:title" content="Ian Martin Group: Careers">
<meta property="og:description" content="Find the next great step in your Engineering or IT career here.">
<meta property="og:image" content="https://media.glassdoor.com/o/de/b1/5f/51/the-ian-martin-group-all-company-retreat-2015.jpg">
<meta property="og:url" content="https://careers.ianmartin.com">
<meta name="twitter:title" content="Ian Martin Group: Careers">
<meta name="twitter:description" content="Find the next great step in your Engineering or IT career here.">
<meta name="twitter:image" content="https://media.glassdoor.com/o/de/b1/5f/51/the-ian-martin-group-all-company-retreat-2015.jpg">
<meta name="twitter:card" content="summary_large_image">
<meta property="og:site_name" content="IMG Careers">
<meta name="twitter:image:alt" content="Great company culture.">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>IMG Career Portal</title>
<!-- default font -->
<!--<link href='//fonts.googleapis.com/css?family=Roboto:400,700,500' rel='stylesheet' type='text/css'>-->
<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<!-- Font Awesome -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="styles/vendor-f398fee98b.css">
<link rel="stylesheet" href="styles/app-292a67e7f9.css">
</head>
<body>
<!-- Main Application Tag (Angular2 Ready :)) -->
<main></main>
<script src="scripts/vendor-ec12e9202e.js"></script>
</body>
</html>