A basic deployment of React, Tailwind and Firebase | by Russell Eveleigh | August 2022
The thrill of breaking away from years of standard shared hosting
Until now, all my web projects used shared hosting, limited to PHP as a server-side scripting language. In order to update my skills, I embark on a journey in the world of NodeJs, React, Tailwind, NoSQL. All hosted on Firebase, Google’s app development platform.
I have a Windows machine and am using Visual Studio Code as my IDE. I installed the latest version of Node JS.
I installed React by typing
npm install -g create-react-app in the terminal. I then created my React application with
npx create-react-app coin-toss . This installed all the dependencies needed to build and run a complete React.js application. I am going to create a very simple heads or tails game hence its name draw. You can change this to my-app or whatever you like.
cd coin-toss then
npm start. This presented me with a local instance of my React app at http://localhost:3000/
Those with web design experience will know in a nanosecond after looking at my projects that I use the Bootstrap library. I want to explore Tailwind CSS as an alternative. I hope this will make me less lazy in my design choices and force me to expand my knowledge of CSS.
The official Tailwind documentation provides a specific guide for installing alongside React which I followed without issue. I was then able to add a “Hello World” to the default React page.
I didn’t want to get carried away with learning a new environment without knowing how my web application would be deployed. After reading about Heroku and Firebase, I decided to explore the latter as a hosting option.
I was able to create a new Firebase project by logging into https://firebase.google.com/ with my Gmail account and following the wizard.
On my local machine, I installed firebase tools with
npm install -g firebase-tools . The next step was to log in with
firebase login However, this is when I encountered my first obstacle:
firebase: File C:UsersRussellAppDataRoamingnpmfirebase.ps1 cannot be loaded because script execution is disabled on this system.
For more information, see about_Execution_Policies at https:/go.microsoft.com/fwlink/?LinkID=135170.
The solution was quite simple and thankfully didn’t involve working around my system’s problem. execution policy. I simply deleted the firebase.ps1 file referenced in the error above, as shown in this Stack Overflow answer. After that I was able to run successfully
firebase login and follow the prompts to sign in using the same Gmail account I used to create the Firebase project.
Once logged in, I was able to walk through the following steps to deploy my very simple React application:
- Creating a production version of the React application with the
npm run buildordered. This created a new to build folder in my project.
- Initializing my Firebase account with my React application with the
firebase initordered. This allowed me to select the hosting and project I had previously configured in the browser. I was then able to specify to build as a folder containing production assets on my local machine.
- Finally, deployment of the application with the
firebase deployordered. This generated a unique hosted link similar to https://react-tailwind-demo.web.app
With these steps completed, I now have a development environment set up on my local machine and an easy way to deploy to Firebase hosting. I dragged myself out of the 2000s world of PHP, FTP clients and shared hosting. I am delighted to have opened up a new world of learning.