Hello everyone. Along with spring, new courses came to OTUS, which we are starting to introduce today. Already open recruitment for the course "React.js developer . " You can learn more about the course at the free webinar , which will be held on March 11. As part of the same webinar, a small web application on ReactJS will be developed.
And now we suggest you read the article about the deployment of your first application, which was written by our freelance author.
The start-up template Create-react-app and Heroku are great tools for quickly creating cloud-based applications, but the React and Heroku documentation includes surprisingly little information on how to roll out your React application on Heroku. The steps described in this article will work on any project created using create-react-app . In our article, we will install on Heroku a simple todo application with the most minimal backend, just to look at the process itself. But first things first:What is Heroku in general? Why do I need him?
Heroku is a cloud-based platform-as-a-service (PaaS) platform that supports many programming languages (and it really boasts and stands out). The history of Heroku began in 2007, and then Ruby was the first programming language. Now it supports Java, Node.js, Scala, Clojure, Python, PHP and Go.Why do I need this cloud? I can buy inexpensive hosting
Yes, you can buy any hosting for yourself and install Node.js server there, if this service is supported on the hosting. However, cloud platforms have such qualities as, for example, elasticity and consumption metering - if a lot of users visit your service, then the platform will most likely automatically (or you yourself using the tools provided by the platform) scale or narrow the flow. Accounting for consumption means that you will pay only for those resources that are in demand. Cloud platforms have many more advantages, a complete list can be found here . Well, we will go directly to the deployment.Creating your own React application
What kind of create-react-app template is this ? It’s probably impossible to even be a little involved in developing React applications and not know about it. This template provides React, React-dom, Webpack, ESLint "under the hood." Of course, you can build your own React application yourself, but why create yourself a complex application with a bunch of dependencies when you can use a ready-made bike?To get started, make sure you have Node.js installed .To create a new application, enter the following commands in the console: npx create-react-app test-app
cd test-app
Useful Note, , create-react-app . npm install -g create-react-app. , ( , ), - , react-scripts 3.4.0. , npm uninstall -g create-react-app.
Ok, you delivered the package and now you want to deploy it. In order not to deploy a simple package with one component that creates-react-app delivers out of the box, I decided to write a small todo application, the source code of which, if you also want to try filling in your application, can be found here . In short, the state is saved there in the form of a new and fashionable entries , where the text of the cases and their id are saved , which is generated directly from Date.now(). I took part of the layout of components from Material-UI react .You can put this application to yourself and deploy it with: npm i -D
npm start
Then we have an incredible opportunity to play around and create our own affairs. However, all the features that are in this application is to save things in state . I did not make any garter to the server or at least to localStorage , the purpose of this article is not this. Suppose that I am very paranoid and will record my affairs in only one inclusion of the browser tab.Create your favicon
Why do we even need a Node.js server if there is no work with the database? Using the server, we will give favicon and all the rest of the code. In our React application, go to the public folder and delete the template favicon.ico from there. I will take the icon from here and transfer it to the public folder.Create your Express server
Next, we create our Express server to service the build. Directly in the application folder, create a file server.jsin which the work of our backend will unfold.We write the following in it: const express = require('express');
const favicon = require('express-favicon');
const path = require('path');
const port = process.env.PORT || 8080;
const app = express();
app.use(favicon(__dirname + '/build/favicon.png'));
app.use(express.static(__dirname));
app.use(express.static(path.join(__dirname, 'build')));
app.get('/ping', function (req, res) {
return res.send('pong');
});
app.get('/*', function (req, res) {
res.sendFile(path.join(__dirname, 'build', 'index.html'));
});
app.listen(port);
Since we use express , express-favicon and path packages , we need to install them: yarn add express express-favicon path -D
In we package.jsonchange the start command to the following: "start": "node server.js",
Run build
Next, we need to build the application using the following command: yarn build
It would be nice to test that our application is working correctly. To do this, we recruit yarn startand evaluate how correctly it works.Hide sourcemap
Perhaps you do not want anyone to be able to access your source code. In this case, you need to remove access to yours sourcemap. To do this, create a file in the repository .envand prohibit map generation in it: GENERATE_SOURCEMAP=false
Useful NoteSource map ( , , , , - ). — source map, , .
Directly Deploy
If you do not already have an account on heroku , you should register here . For deployment, you will also need to install Heroku CLI from here . Test its operation by writing heroku login on the command line. Next you will find a redirect to the heroku website, where you need to log in.Then enter the name of your application. In my case, it will be todoisakura313 , because you cannot use special characters and underscores in the application name: heroku create todoisakura313
Then we will send our build using the following commands: npm install
git add --all
git commit -m "first commit"
git push heroku master
These commands will allow you to add dependencies, initialize git, and download the application itself.Fine! In general, everything is ready, now the application should already appear at the address https://< >.herokuapp.com/. You can open the application by typing the following commands in the console:heroku open
If something went wrong, find out what’s wrong with the team heroku logs --tail. However, in general, if you did not deviate from the instructions in this article, you should have succeeded.That's all! Thank you for the attention. A working application can be found here , and with its finished code - here .And those who have read to the end, we invite you to another free webinar , in which you will learn the strengths and weaknesses of the most popular JS frameworks for Frontend development, you will understand for what tasks which framework is best suited and you can decide which is better to study.