Firestudio App Creator
A framework for rapid development using React and Firebase.
Developing and hosting a web application is a time consuming process. With an ever changing landscape of technologies, getting started can be daunghting even for the most seasoned developer.
This is where Firestudio can help.
Firestudio provides you with an out of the box solution for developing React applications and hosting them on Google's Firebase platform.
Whats in the box?
Firestudio is all about using technologies which are:
- Simple to use.
- Have great documentation.
- Enable you to develop faster.
Firestudio is built using:
- NextJS (https://nextjs.org/)
- Firebase (https://firebase.google.com/)
- Tailwindcss (https://tailwindcss.com/)
If you're new to web developmemt; don't have NodeJS installed on your machine; or just want to try something new then we recommend giving Gitpod IDE a try.
If you know what you're doing and happy with your own set up then you can jump straight to Step 3.
Step 1: Gitpod IDE
Ensure you have the following before you get started:
- Github Account (https://github.com/)
- Gitpod Account (https://www.gitpod.io/) - it is free for public repos
- Are using Chrome browser and have the Gitpod chrome extension installled (https://chrome.google.com/webstore/detail/gitpod-online-ide/dodmmooeoklaejobgleioelladacbeki?hl=en)
Step 2: Create a Repository and open with Gitpod
Go to you Github Account and create a new repository. With the Gitpod Chrome extension installed, go into your newly created repo and click the "Gitpod" button to open the repo in Gitpod.
Step 3: Install the App Creator and create a Firestudio App
In the console run the following command to install the App Creator:
npm i -g @firestudio/create
Use the create command in the following format to create a Firestudio App:
firestudio create <directory> -t <template> e.g firestudio create ./my-test-app -t default
Note for Gitpod users
As you will already be in your project's root directory run the following command to initialise Firestudio:
firestudio create . -t default
Firestudio's 'default' template will be installed along with all dependencies.
Step 4: Run Development Environment.
At this point you can spin up a dev environment and have a play around.
To start the dev server run the command:
npm run dev
The project will be running on port
Note for Gitpod users
Gitpod provides two ways to view your running project:
- In a Preview window.
- In the Browser.
A popup should appear allowing to choose a way to view the running project.
If you loose the popup window there is an 'Open ports' tab in the console window which provides access to the same options.
Step 5: Read the Firestudio documentation included with your template.
Rather than complicating this readme any further, each template comes with its own documentation which you can use to finish setting up your app, and to learn about additional features.