Skip to content

JandroMejia97/platzi-store

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

PlatziStore

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.

Preview

You can preview this project by clicking on this link.

Deploying this Project

Requirements

Cloning this Repository from GitHub is really simple. To do this you need to have some tools enough. For example.

With these elements you can now clone and execute this project on the local server.

Cloning

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.

Installing dependencies

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

Before continuing, make sure you do the following:

  1. 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.

  2. Configure the environment variables of the project.

    1. From the console, run this command: cd src && mkdir environments.

      Explain me?

      cd src will take you to the src directory and mkdir environments will create the environments directory.

      The double && is an addition connector to execute one command after the other.

    2. Then, run touch environments/environment.ts environments/environment.prod.ts environments/environment.stag.ts on Unix systems or for a% in (environment environment .prod environment.stag) do type nul> environments\%a.ts on Windows systems.

      Explain me?

      These commands create 3 files, which will have the variables for the development, stag and production environments.

  3. 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"

Ending

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.

Contact Me

References