Building a React App! (CI/CD)
Here we are going to build a react app with the components of Amplify, Cognito, and the use of GitHub hosting.
First we will create a checklist to keep ourselves in order. A great tool for this would be eraser.io where we’d be able to create a diagram as code. Pretty cool.
We would need to then, install the amplify cli in order to have better access to the AWS accounts.
Create a new user and attach policies directly. This specific policy
Create an access key and input it into the CLI
After successfully installing the CLI across AWS, we then change directories to go deeper into the files of the app. We will be logging into the user that we’ve previously created and save a deployment state.
Keeping up with the checklist:
Once we return to amplify, we notice that the app we created in the CLI is present within the amplify console. Our next step is to add authentication with cognito.
We’ll make our changes depending on what you want present in the app
We’d run npm start, which will take us to a local hosting address where we’d be able to sign up and log in.
After we’ve successfully created an account and received the confirmation code. We can check Cognito and refresh to see the user pool updates.
The explanations for each functionality within the code. The Authenticator line is key*
Grabbing source code from the repository to create new quiz files which would provide data for the quiz site to work. Make sure the names match the repository code or else the input will not work.
Once all code is inputted we can refresh the localhost tab and you will see the data has been updated.
PUSH CODE FOR GITHUB
Now that we’ve got a running source code and app, it’s time to push it to the front end so that the public can interact with it.
Create a new repository
I ran into a bit of an issue due to not having the git software downloaded on the console I’m using. Once I downloaded git, the interface of the code changed a bit and now certain pathways are open.
The gitpush commands were not working since I did not have a master branch available, so I ended up linking the git software I just downloaded, to my github account to be able to do so. Now because there was no master branch, the main couldn’t be created.
The repository is up and running
Now go back to Amplify to add a repository branch for the source code to be hosted on Github. Once we have chosen the backend source and are getting through the building of the app, make sure the CI/CD continuous deployment is checked so any updates will be automatically integrated into the app. You will need to create a new role for the Amplify backend in order to have that seamless connection.
Now that we’ve added roles and updated the backend, we can now deploy the amplify app which will give us an actual URL instead of the local host.
Once the code has successfully deployed, the link provided should take you to a working site with the same app interface as the local host. Whoo!