Starting a new SPA project

Follow along as I document my work, life and projects.

• Setting up the Mac
• Starting a new SPA project
• Building a SPA layout using Tailwind
• Get started with git version control
• Install open source Feather icons
• How to add Vuex and Axios to your project
• Let’s setup TablePlus the database GUI
• How to add Laravel Auth to your Vuejs project
• How to import Marked Markdown into your Vuejs project

Now that the local enviroment has been configuered. We can launch into a new project easily using Laravel and Vuejs.

1. First lets install node and npm on your local machine if you don’t have it already, by running brew install node
2. Next check you have the node and npm installed by running npm -v and node -v
3. Open your dev folder using the cd command in the terminal app. I always use code as the directory and save it to my favourites. Lets run it cd code
4. Create a new project composer create-project — prefer-dist laravel/laravel blog
5. Open project root cd blog
6. I normally delete some of the default dependencies from the package.json file including bootstrap, jquery, popper.js
7. Then I install the remaining dependencies by running npm install
8. Great! Lets install Vue Router to enable the SPA features — full instructions here https://router.vuejs.org/installation.html
9. Also you might want to install the Vuejs lint for Atom if you dont have it — https://atom.io/packages/language-vuejs just hit the install button and it will add it to Atom
10. Finally you can compile by using the command npm run watch. You will get a couple of errors which will highlight that you’re still calling on bootsrap etc so you just need to remove them from the files.

Now bonus points for using the Chrome browser with vuejs. If you are then you will want to install the Chrome extension for Vuejs which you can find here — https://chrome.google.com/webstore/search/vuejs

Bonus bonus points to share. I’ve been having a few problems running npm run hot recently. I’ve searched for solutions but to not much avail. However, recently I was reading the latest laravel mix documentation and I thought it was worth giving BrowserSync a trial. I simply added mix.browserSync(‘blog.test’); to the webpack.mix.js file and re compiled using npm run watch and Eureka! The dependency was added automatically and finally I can move at speed again it a real test environment. One extra feature you get with BrowserSync is the ability to use many devices simultaneously for testing — super useful if you’re building something responsive. But I do miss the simplicity of the basic functionality of the hot reload function I was using before. But until I uncover a fix for that it looks like I’m sticking with BrowserSync.

That’s it for today. Let me know if you have any tips or tricks to share with others.

Until next time!

Ben