You need to install firebase as a project dependency with npm install firebase, then create a firebase.ts file in your src folder to paste the Firebase configuration. Next step is to actually setup Firebase from your React app. You will be asked if you want to set up Firebase Hosting, you can check this option because we will use it in this tutorial, or you can activate it when the time comes. Now that your Firebase project is created, we need to plug it to our React app! Here is what we are going to do: just select the web app icon and follow the steps ! However, it won’t prevent your project from running, so you can still activate it for later. It is up to you to add it, even though we won’t go further on this topic. You will be asked if you want to activate Google Analytics for your project. Note: The following snapshots were taken on December 2021. To set up your Firebase project, you need to create a Firebase account (it’s free!).įrom your console, you can add a new project : just follow the steps! Start adding a new project. To check that everything is ok, you can start your project with cd my-app npm start and see your project running at React setup is done! Set-up Firebase project This action will automatically create a ready-to-go project, with all the files below. npx create-react-app my-app -template typescript What is npx ? This is not a typo: it’s a package runner tool that comes with npm 5.2+ If you want to learn more on the pros and cons of Typescript, check out this article. One advantage is that is allows early bug detection. Since we are using Typescript, we can add the flag -template to generate a TypeScript project : Why Typescript? Typescript extends JavaScript by adding types to the language. This command will create a whole structure of code for an app named my-app, that you can access at your localhost. To create the very-basis of your app, you only need one line of code in your terminal : npx create-react-app my-app Furthermore, its documentation is also very complete, and React has a deployment tutorial with Firebase. Thanks to create-react-app, you can set up a whole project in a minute! There is also a lot of documentation if you encounter any trouble (which won't happen if you follow this tutorial).įirebase is a Google-powered tool with a free plan allowing you many things, especially using real-time database to retrieve and update your data. React is a well-known front-end JavaScript library, free and easy-to-use.

Todolist react js