raven raft
Hi I'm integrating my portfolio site which is in React to Astro which will be my blog site.
Someone suggested to wrap the react app in astro as react component will be accessible in astro.
I added react integration to config, copied all the source files from react to astro fixed some errors but now I'm getting this weird issue, it's as if the css is missing.
I'm using bootstrap and react bootstrap btw, I added all the dependency from react to astro
in package.json of astro project
I even did yarn install to make sure all the packages are installed.
tacit hound
okay so where does the css live? if it's outside of a <body> tag, then you're probably going to have issues. i just ran into this a few mins ago setting up my astro project
and if you're using bootstrap classes, you have to make sure that bootstrap is downloaded to the client
i'm not sure if there's a builder for bootstrap to allow you to not download the bundle (like how tailwind works), but yeah make sure that there's a <script> tag
because by default, astro isn't going to send down bootstrap without that (boostrap is a js library, not just css)
raven raft
I don't know what should I do If I can't run something as simple as bootstrap. Will bootstrap CDN help? There should be better way to do this then simply downloading the bootstrap css to the client.
tacit hound
you absolutely can send bootstrap to the client with the <script> tag. hold on one second i'll grab it
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
</head>
<body>
<h1>Hello, world!</h1>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
</body>
</html>
notice the <link> and <script> tags. this tells the browser to download the bootstrap bundle so you can use it
raven raft
Yeah this is the CDN
So there is no way to run bootstrap or react-bootstrap using the npm library?
Oh I think I need to add it regardless I just checked in my react app
hold on let me try this
tacit hound
honest to goodness, i'm not sure if the bootstrap npm library has any value in production. you would think that you could build it into plain-jane css and js. and the site here https://getbootstrap.com/docs/5.3/getting-started/download/ implies that you can, but i don't know enough to say definitively. i will say, however, that tailwind does do this and is a lot easier to work with. i did a full rewrite of my site from react-bootstrap to tailwind and it has been so much easier to work with
raven raft
Oh I think I need to add it regardless I just checked in my react app
didn't work
tacit hound
is it in the page when you look at dev tools?
frigid stag