Fresh + Bootstrap
How to use Bootstrap with a fresh framework?
Bootstrap is open source library for building a frontend UI.
--
Fresh is a new framework created and maintained by deno. Deno is an alternative for node.js.
Bootstrap is a famous utility library for building frontend UI in websites. The Fresh framework does not provide a custom layout app( _app.tsx).
All the code is available on GitHub, and check out the online demo.
Let's start
- Create a new fresh project
- Create a layout wrapper component
- How to use a layout wrapper component?
Create a new fresh project
The first step is to create a new project with fresh cli.
deno run -A -r https://fresh.deno.dev my-projectThen run deno task start command to start the development server locally. If you have already begun a project, then skip this part.
Create a layout wrapper component
fresh framework is used preact. Preact is a tiny library, and it works similarly to react.js.
The second step is to create a layout wrapper component for the app. With The layout wrapper, you can easily add the Bootstrap with the CDN and local file.
- With CDN
- With Local
With CDN
// components/Layout.tsx
import { Head } from "$fresh/runtime.ts";
import Header from './Header.tsx';
import Footer from './Footer.tsx';
export default function SharedHead(props) {
return (
<>
<Head>
{/* With CDN */}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous" />
</Head>
<Header />
{ props.children }
<Footer />
{/* With CDN */}
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</>
);
}
With local file
The download bootstrap both javascript and CSS files in the static folder. then the help of asset function, we use both javascript and css in your web app.
// components/Layout.tsx
import { Head, asset } from "$fresh/runtime.ts";
import Header from './Header.tsx';
import Footer from './Footer.tsx';
export default function SharedHead(props) {
return (
<>
<Head>
{/* With Local */}
<link href={asset("bootstrap.min.css")} rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous" />
</Head>
<Header />
{props.children}
<Footer />
{/* With Local */}
<script src={asset("bootstrap.bundle.min.js")} integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</>
);
}
How to use a layout wrapper component?
After successfully creating the layout wrapper component, you now wrap pages ( routes) with the layout component. The layout wrapper helps to build a layout for a fresh project.
// index.tsx
import { Head } from "$fresh/runtime.ts";
import Card from '../components/Card.tsx';
import Layout from '../components/Layout.tsx';
export default function Home() {
return (
<Layout>
<Head>
<title>Fresh App</title>
</Head>
<Card />
<Card />
<Card />
</Layout>
);
}Conclusion
You can use Bootstrap with a fresh framework very easily. if you face any problem or query, ask me in the comment section.
You can share and follow us on Twitter and Linkedin. If you like my work, please read more content on the officialrajdeepsingh. dev, Nextjs, frontend web, and Sign up for a free newsletter.
