Deploying a Simple React Application using FTP, FileZilla, & DreamHost
When I redesigned my website, I chose to start from scratch using React as my Front-End. I really, really, really like React. I like its use of components and containers. The way a web application can be structured and how its functionality to one another can be encapsulated into one component is such a great way to learn about interactive User Interfaces.
Environment & File Set-Up
During development, I ran npm start to view my activities of development. Once I was ready to deploy, I followed Jenny Olsen’s blog instructions. Here’s an overview of that:
To deploy your web application, you must add a build script to your package.json file. It looks something like the below code.
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},Add the build script to your index.html within your public directory. Something like this:
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<script src="bundle.js"></script>
</body>The bundle.js script allows all the files to be compiled into one. Next, you must create a build folder by calling either one of these commands in your terminal — npm run build or yarn build. What happens here is your React application will correctly bundle in production mode. This is where the build script gets compiled. There’s a short blurb on Create React App’s github page about build if you’re curious.
Whenever changes are made to your website, you must npm run build when ready to deploy. This will update your build directory where the bundle.js recompiles.
Deploying with FTP Client — FileZilla
If you’re new to FileZilla, you can follow their instructions to download the app to your computer. You’ll have to follow your hosting site’s instructions on how to connect your website through a FTP client like FileZilla.
In your web application directory of your FileZilla FTP, you can copy the entire contents of your build folder. It will take a few minutes or maybe longer depending on your application to finally see your web application.
Issues with Networking & React Router
It’s possible you may encounter errors after deployment like me.
The error I got after deploying my site was an error upon refresh. It mentioned that it couldn’t access any of the webpages other than the homepage after refreshing the site. The error looked something like this:
Cannot GET /work ErrorDocument 404 ...
I was stuck on this as I thought it had something to do with the React Router. I reached out to a friend to help me out and she determined that it was a network error. I’m still new with React so this was a new error to me. This was a helpful blog for me with this issue. Here’s an overview:
- React Router operates on the client side and not the server side, which is what we need to have operate to have the web application working the way it should.
- When a user navigates from the homepage and clicks on my Work page, the URL is changed only locally but no request to the server is made. This means React Router operates the page transition on the client side through routing. Without a proper React Router set up on the server side, we’ll get a 404 error and Router issue.
Resolution
So the issue I had was a redirection issue within the server side. My friend helped me sort through my Dreamhost server issue through articles. We came across a topic of creating an .htaccess file. I followed the creating and editing a file via FTP article to start with.
- In my FTP, I created a the
.htaccessfile into my website application. - I edited the file by adding the code as shown in the first article, with the exception of this code
. /index.php [L]. Instead, I added my. /index.html [L].
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>- Once that was complete, the refresh error went away.
Scrolling Issue
A fellow alum told me that I had a scrolling issue. If a user were to scroll down to a certain point on the homepage, and then navigates to another page, that page will begin at the same scroll point as the homepage. To resolve this issue, I followed this instruction from React Training.
Resolution
Prior to the resolution, here’s how my code operates. Creating a Routes component I wrapped my navigation, routes, and footer. Each route was contained within a <Switch> component to organize the routes upon redirect. Here’s how it looks:
#import codesclass Routes extends Component {
render() {
return (
<div className="wrapper">
<Navigation />
<Switch>
<Route exact path="/" component={Homepage} />
<Route exact path="/work" component={Work} />
<Route exact path="/work/web-dev/selfcare" component={SelfCare} />
<Route exact path="/work/web-dev/artphilia" component={Artphilia} />
<Route exact path="/work/web-dev/teacrate" component={TeaCrate} />
<Route exact path="/work/web-dev/seedpicker" component={SeedPicker} />
<Route exact path="/contact" component={Contact} />
<Route exact path="*" component={ErrorPage} />
</Switch>
<Footer />
</div>
);
}
}export default Routes
In the main App.js file, I then wrapped my <Routes/> component with <Router>.
import React, { Component } from 'react';
import { BrowserRouter as Router } from 'react-router-dom';
import Routes from './Routes'
import './App.css';
import "react-responsive-carousel/lib/styles/carousel.min.css";class App extends Component {
render() {
return (
<Router>
<Routes />
</Router>
);
}
}export default App;
To resolve the issue, I created a ScrollToTop.js file. In this file, I added the following code per the instructions from React Training.
import React, { Component } from 'react';
import { withRouter } from 'react-router'class ScrollToTop extends Component {
componentDidUpdate(prevProps) {
if (this.props.location !== prevProps.location) {
window.scrollTo(0, 0)
}
}render() {
return this.props.children
}
}export default withRouter(ScrollToTop)
Next I updated my App.js file by wrapping the entire Routes component with the <ScrollToTop>.
class App extends Component {
render() {
return (
<Router>
<ScrollToTop>
<Routes />
</ScrollToTop>
</Router>
);
}
}export default App;
Summary
It’s always helpful to reach out for friends to review your web app to find bugs. During my development of the site, these bugs did not occur. Server issues can be a problem if you’re not familiar of it, like me. There’s a lot going on behind it, luckily there are many articles and support from my Dreamhost server site. I hope this article helps those of you who are going through the same issue.
