Florent HAFFNER's website

Process of creating a webapp (for software engineering students)

October 15, 2020

Process of creating and deploying a webapp, for Undergraduate Software engineering students.

Since two years I’m building a portfolio website as an experiment for learning JavaScript and Front-end development.

Recently this little project evolve to something more complete, like a real world piece of software including a server connected to a production database and a piece of Machine learning (yeah, an incredible chatbot).

Here’s what I’ve learned.

Framework

I recommand to can start small with a simple MVC pattern, you can pick Django (Python), Symfony (PHP), or something similar.

If you’re more serious and wanted to work with specific technology like Spring (the one I pick and learned in the last few years) it will bring you to backend development. You’ll need to use client like Postman or your terminal with :

curl -v -X GET {yourDomain}

It should show a successful result with a status 200. Bang, welcome !

Domain

It’s easy, just get a domain from a provider then learn about DNS like domain type A , AAAA , MX , etc…

After being able to connect from a domain provider (DreamHost, OVH, .tech, etc…) to a hosting provider (OVH, Digital Ocean, Linode, AWS, GCP, etc…) you can relax for this part and continue your journey !

Deployment

Then come the fun part, it’s the moment when you motivate yourself to start a new project with your editor, a github repository then deploy it online !

BTW, git is essential. If you don’t know it yet, just do it. In a few hours you’ll be able to use this amazing tools. Git can take “snapshot” of your code and it’s critical when you’re starting to work on real life project ;)

Depending of your knowledge or what you want to achieve there are different methods to deploy a webapp :

  • You can create a hooks (a connection) between your provider and your code stored on a repository (GitHub -> netlify or heroku for example)
  • learn about SSH to connect on a VM/VPS then git clone your project inside it
  • using the old school Filezilla and send your code into your server via ftp (but I don’t recommand this method)

I prefer the first option, it’s simple, efficient and you’re project should be sync with your repository !

CORS

If you’re working with a front-end associated to a back-end you’ll need to tell them to work together otherwise they wont for security reason.

Usually you don’t need much, a middleware that enable connection between your softwares is enough. Here is a Java class that make it possible :

@Configuration
public class CorsConfig implements WebMvcConfigurer {
   @Bean
   public CorsFilter corsFilter() {
       UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
       CorsConfiguration config = new CorsConfiguration();
       config.setAllowCredentials(true);
       config.addAllowedOrigin("http://localhost:8000");
       config.addAllowedOrigin("https://{yourDomain}");
       config.addAllowedHeader("*");
       config.addAllowedMethod("GET");
       config.addAllowedMethod("POST");
       config.addAllowedMethod("PUT");
       config.addAllowedMethod("DELETE");
       source.registerCorsConfiguration("/**", config);
       return new CorsFilter(source);
   }
}

Profiles {dev/prod}

This part is important when you want to switch easily from different environment. You don’t always wanted to polute you’re production database with test data for example but you also don’t wanted to make this process boring and complicated ;)

With Spring, a db connection looks like this :

jdbc:postgresql://{databaseDomain}:5432/{dbName}?sslmode=require&user={user}&password={secretStuff}

I you’ve set some profile to change your configuration, you can switch from one profile to another by simply using cli argument :

// For production configuration
`./mvnw spring-boot:run -Pprod

// For development configuration
./mvnw spring-boot:run -Pdev

A standard application.properties (Spring framework) that enable this !

You must link it to your pom.xml for profiling

spring.profiles.active=@spring.profiles.active@
server.port=${PORT:8080}

It should looks like that

Your package manager can also do something for you, here is apom.xml (still Spring, sorry…)

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>
    {...}

  <properties>
     <java.version>11</java.version>
  </properties>
  <dependencies>
     {...}
  </dependencies>
  <build>
     {...}
  </build>

  <!--PROFILE DEV / PROD-->
  <profiles>
     <profile>
        <id>dev</id>
        <properties>
           <spring.profiles.active>dev</spring.profiles.active>
        </properties>
     </profile>
     <profile>
        <id>prod</id>
        <activation>
           <activeByDefault>true</activeByDefault>
        </activation>
        <properties>
           <spring.profiles.active>prod</spring.profiles.active>
        </properties>
     </profile>
  </profiles>
</project>

It set my default env as production. If I want to use my server on a dev environment I have to use :

./mvwn spring-boot:run -Pdev

Associate with something like Heroku it’s very powerful !

Git worfklow with CI/CD

Understanding git and using different branch like a master (stable/deployed) associate with dev branch (cutting-edge) is a good practice !

Once your comfortable with the previous subjects, you can start to automate things and having a server that get build and deployed on each new commit inside a specific branch (like master). It’s a must have and a lot of company are intersted by this kind of process.

It can deploy your code but also do a lot of stuff like doing database migration and if you use practice like Test Driven Development to make it structured !

Extras

Extra1: Testing you app with Test Driven Development

Every tutorials talks about it but I have the feeling that only Senior Engineer or Crasftmanship developer are doing it, why ?

Testing force reliability and help you demonstrate a comportment. This is perfect for student to learn a lot’s of stuff.

This also helps you detecting if some object inside your application are too coupled or can be easily break/mutated from another object.

Last year I wanted to learn about Event Sourcing Architecture and I’ve done a small course about it. To make sure my code was correct I’ve wrote code and demonstrate it via TDD. It also helps people undestand the purpose and comportment of your code !

While working with big teams it’s necessary to keep everything working, imagine using a buggy Twitter or being unable to connect on Facebook.

Extra 2: Monitoring & logs

You can also learn a lot about the behavior and the optimization of your code while studying your logs and monitor data. It help having feedback and sometimes can show you configurations issue.

It’s a good habit to track the evolution of your application and get feedback from your client. But it’s also important to make sure everything is optimized, especially when you’re working with servers that are running day and night !


I am writing there to push my ideas out of my mind, structure my project and share what I learned from experience.