guglvilla.blogg.se - Livereload react

Livereload react free#

App: instead of serving static React application, our Server will redirect all requests on ++code>/++/code> route to our App service which will run Webpack Dev Server.

The following diagram shows our development architecture (differences with target architecture are showed in green): Instead of building the entire architecture each time we make a change in our code, we would still use our Webpack development server. On the other hand, we should not forget efficient development tools: running Docker services on our machine should not slow down features development. On one hand, it ensures we share the same specification on our machines and on the staging/production servers and reduce regression risk when pushing to remote servers. One of our standard at BAM is to be as iso-production as possible when developping.

Step 3: Draw your development architecture. It connects our external DB (known host, port and credentials).

Api: this service runs Node and its middlewares.

It serves our React application on ++code>/++/code>route and redirects queries to our Api on ++code>/api++/code> route. We then need to connect our production server ++code>80++/code> port to this service ++code>80++/code> port. The server is accessible from outside through port ++code>80++/code>. The target container architecture is given here: In order to achieve our goal (which is to make each of our services manageable), we use Docker to containerize them. the database should be accessed with a URL and some credentials.This way we won't have any problem of browsers throwing Cross-origin resource sharing issues. the backend should be accessed with the same root URL than our frontend : the API is our second service and will be discovered behind a proxy of our first server.the React application should be served statically by one server : this is our first service.Now let's think about how our services should run in our production environnement : ++pre>FROM postgres:9.5++/pre> Step 2: Draw your target architecture. it should run postgres (which by default expose its ++code>5432++/code> port.++pre>++code>POSTGRES_USER=myappuser POSTGRES_PASSWORD=myapppassword POSTGRES_DB=myappdb PGDATA=/data ++/code>++/pre>įinally, we create our Dockerfile with these characteristics: We first need to create a ++code>psql.env++/code> configuration file. ++code>"serve": "sequelize db:migrate & sequelize db:seed:all & nodemon index.js"++/code> Db Modify your api ++code>package.json++/code> scripts to add the following line it will run migrations and seed our database on startup ! ++pre>FROM node:8.1.0-alpine WORKDIR /usr/src/api EXPOSE 8080 CMD ++/pre> ir should expose its ++code>8080++/code> port (our Node's Express server port).it should create a ++code>/usr/src/api++/code> working directory.it should run node with a command (++code>yarn run serve++/code>).

We create our Dockerfile with these characteristics, very similar to our App service characteristics:

Livereload react free#

In your project, your free to find more usable Docker image such as Ubuntu for example. Here we use one Alpine image in which node lives. ++pre>FROM node:8.1.0-alpine WORKDIR /usr/src/app EXPOSE 3000 CMD ++/pre> it should expose its ++code>3000++/code> port (Webpack Dev Server port).it should create a ++code>/usr/src/app++/code> working directory.it should run node with a command (++code>yarn run start++/code>).We create our Dockerfile with these characteristics: Create the ++code>docker++/code> directory, and one Dockerfile per development service: App Cross-origin resource sharing (CORS) are allowed in the example project )įirst, let's containerize these three services.When you need to access your data from a different domain, you need to allow this domain to query the data. Cross-origin resource sharing let another domain access your data. You might have experienced that using a lot of different ports is confusing while developping services locally : it often involves cross-origin resource sharing which need to be allowed. You can clone it and follow the tutorial. You can follow this tutorial with this application example available here.