How To Deploy Single Page Applications Bootsraped by Create React App to surge.sh
Have you heard about surge.sh? If someone ask me that question 2 days ago, my answer, for sure, is "Nope". I just found this surge.sh yesterday when I tried to publish a simple todo list app built with React JS, React Router and Redux to GitHub project pages. Unfortunately, the application router didn't work smoothly under https://{username}.github.io/{repo-name}. Instead of changing my working code, I decided to find other free static hosting providers. I found surge.sh somewhere on the create-react-app guide. I install it globally using npm, then I typed
surge
command under the project directory, and boom the app is online on a surge.sh subdomain. It is fast and easy to deploy our static file to surge.sh. So, In this React JS tutorial, I will show how effective deploying our React JS app to surge.sh.Installing the surge.sh cli
We will install it locally inside our project dev dependecies using npm:
npm i surge --save-dev
or yarn: yarn add surge --dev
. I assume that you have bootstraped React JS application using create-react-app.Add deploying script in package.json
Let's modify our package.json scripts by adding this
"deploy": "npm run build && surge build -d learnreactsurge.surge.sh",
. Don't forget to change the domain to whatever you want as long as it has not been taken by others."scripts": { "deploy": "npm run build && surge build -d learnreactsurge.surge.sh", "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject" }
Deploy The App
Now, we are ready to deploy our react js applications, just run
yarn deploy
or npm run deploy
, the app will be uploaded to surge.sh cdn and accessible from the subdomain specified using -d
option on deploy script.Demo
you can see live demo here: http://learnreactsurge.surge.sh/
Good Blog!! Keep on sharing.
ReplyDeleteFull Stack online Training
Full Stack Training
Full Stack Developer Online Training
Full Stack Training in Hyderabad
Full Stack Training in Ameerpet
Full Stack Training Institute
ReplyDeleteThanks for this blog, I'am very much delighted to say that this blog has helped me a lot in gain some extra knowledge.
Oracle Training in Chennai | Certification | Online Training Course | Oracle Training in Bangalore | Certification | Online Training Course | Oracle Training in Hyderabad | Certification | Online Training Course | Oracle Training in Online | Oracle Certification Online Training Course | Hadoop Training in Chennai | Certification | Big Data Online Training Course
Excellent Blog, I like your blog and It is very informative. Thank you
ReplyDeleteLearn ReactJs Online
Automation Anywhere Online Course
Thanks for this informative content.
ReplyDeletePhoneGap Performance
PhoneGap Architecture