As an practice of the Angular Course offered at Platzi, an online store was developed from scratch based on Angular. Angular features were used to build an application in less time, using components, modules and routes. Angular-Material was also used to design the elements of this web application. In addition, it was deployed on the Internet through Firebase.
You can preview this project by clicking on this link.
Cloning this Repository from GitHub is really simple. To do this you need to have some tools enough. For example.
- Node.js and npm version 12.8.0 or later
- git
- Angular CLI version 8.3.22 or later
With these elements you can now clone and execute this project on the local server.
To clone this repository from GitHub you must use the git clone command, and pass as a parameter the url of this repository. For this you must position yourself from the git console in the place you want to clone the project and use the following command: git clone https://github.com/JandroMejia97/platzi-store.git.
Once the project has been cloned, it must be moved inside the platzi-store folder with the cd platzi-store command, and inside it must execute the npm install command. This command will download all the necessary dependencies to execute the project on the local server.
IMPORTANT: Remember that if you run this command from unix systems you should use sudo npm install, to give it permissions, and if you run it from windows remember to start the console with administrator privileges.
Before continuing, make sure you do the following:
-
Follow the steps indicated in this tutorial to do the "Deploying an Angular App to Firebase Hosting", with the small modification that the public directory will be dist/platzi-store, not just dist.
-
Configure the environment variables of the project.
-
From the console, run this command:
cd src && mkdir environments.Explain me?
cd srcwill take you to the src directory andmkdir environmentswill create the environments directory.The double
&&is an addition connector to execute one command after the other. -
Then, run
touch environments/environment.ts environments/environment.prod.ts environments/environment.stag.tson Unix systems orfor a% in (environment environment .prod environment.stag) do type nul> environments\%a.tson Windows systems.Explain me?
These commands create 3 files, which will have the variables for the development, stag and production environments.
-
-
Open the project in any code editor and paste the following variables (they can be different in each files according to your preference) in each of the files that were created in the previous step, with YOUR OWN DATA:
export const environment = { production: false, apiUrl: 'https://platzi-store.herokuapp.com', // OR YOUR OWN API REST firebaseConfig: { apiKey: '<YOUR API KEY>', authDomain: '<YOUR AUTH DOMAIN>', databaseURL: '<YOUR DATABASE URL>', projectId: '<YOUR PROJECT ID>', storageBucket: '<YOUR STORAGE BUCKET>', messagingSenderId: '<YOUR MESSAGING SENDER ID>', appId: '<YOUR API ID>', measurementId: '<YOUR MEASUREMENT ID>' }, sentry: { dns: '<YOUR SENTRY DNS>' }, analytics: { id: '<YOUR GA ID>' }, giphy: { apiUrl: 'https://api.giphy.com/v1/gifs/', apiKey: '<YOUR API KEY>' } };
IMPORTANT: You will get these configuration variables from the Firebase console of the project that you created in step 1.
Project settings > General > Your applications > Firebase SDK snippet > Select "Settings"
Ready, you have finished configuring the project. Finally use the npm start command to lift the server.
With this ready you can see the project running on port 4200, just open a browser and go to http://localhost:4200/. Well, this is all you need to clone and execute this project in Angular from GitHub.