Skip to main content

Posts

Laravel 6.x with React and react-router

This will get you started on getting your first React/Laravel application deployed to your server. We'll cover everything from installation to deployment. Start by reading the installation instructions on https://laravel.com/docs/6.x#installing-laravel. We'll cover those details below.
Setting Up LaravelCheck that you have the latest version of PHP installed on your computer. It must be >= 7.2.0.Open terminal to get the Laravel installation tool.Type in composer global require laravel/installerType in laravel to verify installation.Navigate to a directory on your computer where you want to install your project on your terminal.Run the following command: laravel new project_name(replace project_name with your project name).Once complete, cdinto your new project.Type the following command: php artisan serve.You'll get a message like the following if it's running successfully:Laravel development server started: http://127.0.0.1:8000If it's not running successfully,…
Recent posts

Make Bootstrap's Navbar Sticky in React with JavaScript

If you need instructions on how to setup Bootstrap's navbar, follow my previous post.

We'll start by creating the Navigation component.

importReactfrom'react'; import'./Navigation.css'; letnavbar; letsticky; classNavigationextendsReact.Component { render() { return( <navid="main-navigation"className="navbar navbar-expand-lg navbar-light" > ...
We needed to import the Navigation.css file. This is where we'll create our sticky CSS class.

/* The sticky class is added to the navbar with JS when it reaches its scroll position */ .sticky { position: fixed;     top: 0;     width: 100%;     z-index: 100; }
We created our variables, navbar and sticky. They will be initialized after the page renders. Next, we'll need to add the componentDidMount() lifecycle method to the Navigation class. This will initialize the navbar and sticky variables and add the scroll event listener to our navigation.

classNavigationextendsReact.Component {��…

Using pure Bootstrap in React

To start, I understand that React Bootstrap exists. I wanted to find the simplest way to use bootstrap in a React Application without React Bootstrap.Let's start by creating the react app with create-react-app so that we're all on the same page. In public/index.html, we need to add some code. Right before the closing </head> tag, add the following CSS: Right before the closing </body> tag, add the following scripts: Save and close index.html. Open App.js and delete everything inside the return(). We're going to be just adding a navigation there for testing. If you're working on your own application, do not delete everything inside your return().Navigate to the Bootstrap example page: https://getbootstrap.com/docs/4.0/examples/starter-template/Right click on it and View Page Source. The <nav> tag starts right after the <body> tag. Copy everything inside <nav>...</nav>, including the <nav> tags themselves. Paste the content inside …

Syncing WAMP database and www folder in DropBox

I change 3-4 computers each day. I quickly figured out that I can sync my root www wamp folder. It makes it easier to continue work when I go from one computer to the next. The steps to sync your www folder and database tables are quite simple.

Make sure that you have WAMP installed on your Windows computerCreate two folders in your Dropbox account: www and database.Left click on your WAMP icon, scroll over Apache and click on httpd-vhosts.conf file.Edit the following lines and replace them with your www locationDocumentRoot "C:/Users/Dino Cajic/Dropbox/wamp/www"<Directory "C:/Users/Dino Cajic/Dropbox/wamp/www/">Next you'll need to sync your database.Go to C:/wamp64/bin/mysql/mysql5.7.19/dataCopy the contents of the folder and save it in Dropbox/wamp/databaseNext, go to C:/wamp64/bin/mysql/mysql5.7.19/ and edit my.iniModify datadir. Mine went from datadir="c:/wamp64/bin/mysql/mysql5.7.19/data" to datadir="c:/Users/Dino Cajic/Dropbox/wamp/dat…

2017: Setting up Laravel on Ubuntu 16.04

Each operating system has it's own issues. I ran into one recently when installing Laravel on my Ubuntu System. Before I begin, this is what I did to get it initialized.

I installed LAMPIn terminal run php -vIf it comes back as 5.6 you'll have to change the version to the latest version, i.e. 7.1To do that, open your terminal and enter the following$ sudo a2dismod php5.6$ sudo a2enmod php7.1$ sudo service apache2 restartVerify that it's the new version: php -vNext, get composer. Go to https://getcomposer.org/download/ and follow the instructions.cd into your LAMP root directoryRun the following command to create a Laravel project:sudo composer create-project laravel/laravel your-project-name --prefer-distWait until it's complete and navigate to your newly created directory/public folder in your browserhttp://localhost/your-project-name/public At this point I received an error and it stated:
The stream or file "/home/dino/www/your-project-name/storage/logs/laravel.lo…

2017: Getting started with Laravel 5.4 on Windows

It can be quite overwhelming to get started with Laravel on Windows OS. This was meant to guide you through a fresh install. Just imagine you bought a new Windows computer and you want to start web-development, specifically with Laravel. This guide is for you. With that said, lets begin:

Install WAMP You need this for PHP, MySQL, ApacheGo to http://www.wampserver.com/en/Click DownloadBased on your computer's architecture, select either the 32-bit or 64-bit download option (mine is a 64-bit)Click download directly.If you get an error or sourceforge.net, look at the middle of the page and find:Looking for the latest version? Download wampserverxx.xx.xx_x64.exe (xxx.x MB)Once you download it, run it and install it.Open it and you'll see the WAMP server logo in the task bar. Hopefully it's green.Left-click on the icon and scroll over PHP, then Version. Click on the latest version of PHP. Currently it's at 7.1.9.At this point, just to make sure that everything takes effect, r…