DEV Community: Dilan Tsasi

How to Install Bootstrap 5 in Masonite 3

Dilan Tsasi — Fri, 28 Oct 2022 15:51:12 +0000

In This tutorial, We Will learn how to install Boostrap 5 in Masonite 3.

Masonite uses Laravel Mix, which provides an effortless way to handle asset compiling like SASS, LESS and more.

You can begin by cloning or downloading and unzipping this demo project I created on Github. It is a simple bootstrap project that I created with masonite which contains the bootstrap classes, but it doesn't contain any bootstrap files.

DilanTsasi / masonite-bootstrap-demo

A demo project with masonite 3 and Boostrap 4

masonite-bootstrap-demo

A demo project with masonite 3 and Boostrap 5

Follow Me

Twitter

View on GitHub

if you download and install the demo project above, run craft serve And you will see a page that looks like the one below

In your Terminal, ensure you are in your project directory and run the following command.

npm install

Installing Bootstrap css

The command above will install everything you need to start compiling assets with masonite.
Once installation is done, you will see a new folder in our application called node_modules. This is where all assets that you include in your application through the package manager will live.
You can just run the following command to install bootstrap in your application.

npm install bootstrap

Once the bootstrap is installed, you will find a new bootstrap folder in the node_modules folder. We can now go ahead to configure and use bootstrap in our application.

Open up the storage/static/sass/style.scss file in your application, and you will find some default code. You can choose to delete it or leave it the way it is. I will delete a huge code section and only leave the section that defines the default style on the application body. So my code will look like this.

$font-stack:    'Raleway', sans-serif;
$text-color: #636b6f;
$background-color: #fff;
html, body {
   background-color: $background-color;
   color: $text-color;
   font-family: $font-stack;
   font-weight: 100;
   height: 100vh;
   margin: 0;
}

At the top of the code above, I will add a new Line to install bootstrap. It will look something like this.

/* importing bootstrap */
@import '../../../node_modules/bootstrap/scss/bootstrap.scss';

Adding the Javascript.

You Should only add the Javascript in case you need it. to add the Javascript, add the following line in your storage/static/js/app.js file.

// importing boostrap JS
import "bootstrap";

Boostrap Javascript Depends on Popper Js so We will need to install popper js if we have to use Bootstrap JS., so all we will have to do is run the following command in our terminal

npm i @popperjs/core

After it Installs, we add it before the import bootstrap command in the app.js file. so the new file should look like this

//importing popperjs
import "@popperjs/core";
// importing boostrap JS
import "bootstrap";

Head over to the webpack,mix.js file in the root folder, and make sure you find code that looks like the one below. If you don't find it, make sure to add it.

mix.js('storage/static/js/app.js', 'storage/compiled/js')
  .sass('storage/static/sass/style.scss', 'storage/compiled/css');

Once we compile our assets(Boostrap and any other library you wish to use), the code that will we added in storage/static/js/app.js will be compiled and saved in storage/compiled/js/app.js And that wich we added in storage/static/sass/style.scss will be compiled and saved in storage/compiled/css/style.css.

Compiling Assets.

To compile our assets, all we have to do is run the following command. it will build

npm run dev

after the command runs successfully, you will notice that it adds some lines of code in the following files

storage\compiled\css\style.css
storage\compiled\js\app.js.

in our resources\templates\app\base.html file, we can make changes so that our new HTML file is loaded. so change the following line in your code

<link href="/static/style.css" rel="stylesheet" type="text/css">

To this

<link href="/compiled/css/style.css" rel="stylesheet" type="text/css">

Bootstrap is now installed, configured, and ready to use. So if we run craft serve and head to our browser, we should see something like what we have below.

You will notice that we haven’t added Javascript because our application does not need Javascript.

That is it. We have learned how to install bootstrap 5 in our masonite project. You can go ahead to try things like compiling out assets to direct subfolders or files in the storage folder or even installing and using other frameworks.

How to install Masonite On Windows

Dilan Tsasi — Fri, 28 Oct 2022 15:27:35 +0000

The Masonite Framework is a modern and developer-centric Python web framework. This framework works hard to be fast and easy from installation to deployment so developers can go from concept to creation as quickly and efficiently as possible.

In this tutorial, I will show you how to install masonite 3.0 and set up a masonite project on a Windows computer
This tutorial assumes that you understand the basics of python and pip commands

Requirements

Python 3.6+
The latest version of OpenSSL
Pip3

How to install masonite

The first thing to do is to open your command prompt and navigate to the directory where you want to get it installed.

cd c:\my\masonite\directory

Once in this folder, create a new folder for your masonite project. and change directory to it

mkdir my_app
cd my_app

One optional step you can go through is activating your virtual environment. You can use a virtual environment if you don’t want to install all of masonite’s dependencies on your systems Python.

python -m venv venv
.\venv\Scripts\activate

Installing Masonite

Now we can install Masonite using the pip command. This will give us access to masonite’s craft command, which we can use to finish the installation steps for us. you can do so by running:

pip install masonite

Once Masonite installs you will now have access to the craft command-line tool. The craft command will become your best friend during your development.

You can ensure Masonite and craft are installed correctly by running:

craft

You should see a list of a few commands like install and new

Creating our Project
From the commands you saw above, we will be using new command to create our project. To create a new project, just run:

craft new

This will also run craft install which will install our dependencies.

This will get the latest Masonite project template and unzip it for you. We need to go into our new project directory and install the dependencies in our requirements.txt file

Now that Masonite has been successfully installed, there will be more commands available in the craft. You can check it out by running

craft

Running The Server

Our setup is complete; all that is left to do is to run our server and view our new masonite-powered Website in the Browser. So we get that done by running:

craft serve

The command will prepare everything for us and provide an address we can use to view our new website in the browser.

Note!
When coming to your address in the command prompt, do not use CTR + c as it will stop the server that is currently running. Instead, highlight, right-click, and copy the address.

That is it. You have set up your first website with masonite. Feel free to add your comments for further discussion.