We are using surge from the very beginning of this SUSI web chat and SUSI skill cms projects development. We used surge for provide preview links for Pull requests. Surge is really easy tool to use. We can deploy our static web pages really easily and quickly. But If user had to change something in pull request user has to deploy again in surge and update the link. If we can connect this operation with travis ci we can minimise re-works. We can embed the deploying commands inside the travis.yml.
We can tell travis to make a preview link (surge deployment) if test cases are passed by embedding the surge deployment commands inside the travis.yml like below.
This is travis.yml file
Surge deployment commands are inside the “surge_deploy.sh” file.
In that we have to check the status of the pull request whether it is passing test cases or not. We can do it like below.
Then we have to install surge in the environment. Then after install all npm packages and run build.
Since there is a issue with displaying moving to child routes we have to take a copy of index.html file and name it as a 404.html.
Then make two environment variables for your surge email address and surge token
Now we have to make the surge deployment URL (Domain). It should be unique so we made a URL that contains pull request number.
Since all our static contents which made after the build process are in “build” folder we have to tell surge to get static html files from that.
Now make a pull request. you would find the deployment link in travis ci report after travis passed.
Expand the output of the surge_deploy.sh
You will find the deployment link as we defined in the surge_deploy.sh file
- Integrating with travis ci – https://surge.sh/help/integrating-with-travis-ci
- React Routes to Deploy 404 page on gh-pages and surge – https://blog.fossasia.org/react-routes-to-deploy-404-page-on-gh-pages-and-surge/