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 Laravel Check 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/installer Type 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, cd into 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:8000
53 comments
Read more
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. import   React   from   'react' ; import   './Navigation.css' ; let   navbar ; let   sticky ; class   Navigation   extends   React . Component  {      render () {         return (              < nav                    id = "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 Navigati
1 comment
Read more

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. Pas
2 comments
Read more

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 computer Create 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 location DocumentRoot "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/data Copy the contents of the folder and save it in Dropbox/wamp/database Next, go to C:/wamp64/bin/mysql/mysql5.7.19/ and edit my.ini Modify datadir.  Mine went from datadir="c:/wamp64/bin/mysql/mysql5.7.19/data" to  datadir="c:/Use
17 comments
Read more

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 LAMP In terminal run php -v If it comes back as 5.6 you'll have to change the version to the latest version, i.e. 7.1 To do that, open your terminal and enter the following $ sudo a2dismod php5.6 $ sudo a2enmod php7.1 $ sudo service apache2 restart Verify that it's the new version: php -v Next, get composer.  Go to  https://getcomposer.org/download/  and follow the instructions. cd into your LAMP root directory Run the following command to create a Laravel project: sudo composer create-project laravel/laravel your-project-name --prefer-dist Wait until it's complete and navigate to your newly created directory/public folder in your browser http://localhost/ your-project-name /public At this point I received an error and it stated: The stream or file "/hom
1 comment
Read more

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, Apache Go to  http://www.wampserver.com/en/ Click Download Based 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
17 comments
Read more