Build my Portfolio Website using React.
Available at the following hosting platforms:
- React application hosted at Netlify (custom domain can be added freely). Another Live Demo for GitLab.
- React application hosted at Vercel (custom domain can be added freely if not used in hashnode.dev). Another Live Demo for GitLab.
- React application hosted at AWS Amplify Hosting (custom domain can be added). Pay as you go pricing scheme applies.
- Docker image hosted at Google Cloud Run. Cloud Build is configured for continuous deployment.
- Static files hosted at GitHub Pages freely.
Continuous Integration is configured at the first five hosting platforms above such that automatic deployment will be triggered when any file is committed into the main branch of the GitHub repository.
Platform | CI on main | CI on PR | GitHub | GitLab | Bitbucket | Configuration | Email Notification |
---|---|---|---|---|---|---|---|
Netlify | Yes | Yes | Yes | Yes | Yes | Easy | Yes |
Vercel | Yes | Yes | Yes | Yes | Yes | Easy | No |
AWS Amplify | Yes | No | Yes | TBC | TBC | Medium | No |
Google Cloud Run (Docker) | Yes | Yes | Yes | TBC | TBC | Medium | No |
GitHub Pages | No | No | Yes | No | No | N/A | No |
-
Install the libraries.
npm install react react-dom npm install -g create-react-app npm install bootstrap npm install react-bootstrap npm install jquery npm install sass npm install -g serve
-
Create a React application.
npx create-react-app portfolio-website-react
-
Modify source code /src/App.js.
-
Build the application.
npm run build
-
Start the application locally.
serve -s build
-
Verify by opening the following URL in browser.
http://localhost:3000
Before deployment, it's better to have security scan on the docker image and apply fix if any vulnerabilities found.
-
Build the docker image.
export VERSION_NUMBER=1.0.0 docker build -f Dockerfile -t portfolio-website:$VERSION_NUMBER .
-
Scan the docker image.
docker scan portfolio-website:$VERSION_NUMBER
-
Scan the docker image.
docker tag portfolio-website:$VERSION_NUMBER $DOCKER_HUB_ID/portfolio-website:$VERSION_NUMBER-release
-
Scan the docker image.
docker push $DOCKER_HUB_ID/portfolio-website:$VERSION_NUMBER-release
A React application can be deployed to server via the following deployment types:
- Install and start the application.
npm install
npm start
- Browser at
http://localhost:3000
should be opened for testing.
-
Build the docker image.
docker build -f Dockerfile -t portfolio-website .
-
Run docker image.
docker run --name portfolio-website -it -p 5001:3000 -d portfolio-website
-
Test by opening browser at
http://localhost:5001
.
-
Build the application.
npm run build
-
Copy all the static files in the
build
folder to the web server.