damien-carcel / app-skeleton Goto Github PK
View Code? Open in Web Editor NEWA web application skeleton using ReactJS and Symfony
License: MIT License
A web application skeleton using ReactJS and Symfony
License: MIT License
Currently, only JavaScript is linted, but CSS/Less needs to be too.
stylelint
packageTry to only use needed services through DI.
Test | Tool to use |
---|---|
Unit tests | phpspec |
Integration tests | behat without mink |
Acceptance tests | behat without mink |
System tests | behat with mink |
Instructions: https://www.npmjs.com/package/image-webpack-loader
Use only in production.
Symfony requires it and it will just be a nightmare to merge branches otherwise.
Each time the front-end application is rebuilt using webpack
, the nginx-front
container needs to be restarted, or the application doesn't work anymore.
This is counterproductive and must be solved. There are 3 possibilities for that:
It is currently on 9000, which can conflict with XDebug on the back-end app.
This change is to be done on docker-compose too.
doc
at the root of the application that will contain the documentationdoc
folderAdd a new react
branch based on the master branch.
This branch will contain dedicated configuration for ReactJS:
Symfony:risky
are quite useless, and some of the specific ones used are already present in @Symfony
@PHP71Migration
and @PHP71Migration:risky
Update both the CI and the composer scripts.
Right now, a configuration file config/api.json
is used to configure the front-end application.
json-server
used for development."protocol": "http",
"host": "nginx-back",
"port": 80,
Will ease the merges with react-symfony
branche.
master
, react
, and `symfonywebpack-merge
)extract-text-webpack-plugin
(which means no more chunks nor extracted CSS)favicons-webpack-plugin
by webapp-webpack-plugin
Guard
(https://symfony.com/doc/current/security/guard_authentication.html)Since #124, End to End tests are using Chrome and the chromedriver, directly controlled from Behat Mink thanks to dmore/behat-chrome-extension
.
For a simple configuration and usage, Chrome is currently installed directly in the fpm
image.
However, this is not a good solution, and it should have its own dedicated image. The chosen solution is to use Selenium with Chrome in headless mode. Even if it is slower (benchmark and configuration are provided in the comment below), it is way easier to use, both locally and with Docker (no more Chrome to launch, Selenium do it for us).
As the back-end application is a full REST API, it doesn't need a real web browser. The BrowserKitDriver used by default by the Mink extension (that was used previously) is enough. Test inside a real web browser will be performed on the front-end application, with CucumberJS and Chrome headless.
dmore/behat-chrome-extension
behat/mink-selenium2-driver
As the client application is to be a PWA, service workers would certainly be handy.
Let see what they can bring.
Keep only master:
react
branch,symfony-api
,docker-compose.yaml
file at the root of the projectsymfony
branch is useless, as it can be achieved very quicly, if necessary, with symfony/website-skeleton
, adding to it the backend test stack from this repository.
In the same way, master
branch can be quickly re-created by cleaning the front stack of the react
branch.
react-symfony
branch and its milestonefetch
API to get a list of posts
react-modal
and implement forms
react-modal
for blog post create
react-modal
for blog post update
(use get
to retrieve the blog post)delete
Implement a real User management following this documentation
UserInterface
should be created, in infrastructure only.
GetUser::byUsername
query.php-cs-fixer
is enough, and all its rules have a fixer, which is far from being the case with PHP Code Sniffer.
Investigate webpack-manifest-plugin
and inline-chunk-manifest-html-webpack-plugin
.
Check everything and make it more consistent with my coding style.
For example: comma-dangle
should use always-multiline
.
phpspec
?prophecy
still be used for mocking?phpunit-bridge
be used?phpspec
be kept, just adding a code coverage?Use the same example, in hard-coded JSON, in master
and react
branches.
Inherit from react-symfony
, removes all front elements.
[Reopened] - Keep CSS and JavaScript. Replace HTML with TWIG.
Update both the CI and the composer scripts.
TS 3.0 was released a couple of weeks ago. The front-end application currently use TS 2.9.
It should be upgrade if all dependencies (like React) are compatible with this new major release.
system
tests to end-to-end
EndToEnd
namespaceAs the application is a bootstrap for real projects, it should be tested properly.
*.yml.dist
files, use only yaml
+ environment variablesdocker-compose.override.yaml
for docker-compose customization (all branches)These changes will be merged to the symfony-api
branch too.
Manage states with redux. To see if still relevant once React Hooks are stable.
What tools to use for front-end?
tslint
is already in place, it there more to do?)Is this pattern (coming from full stack app) relevant for full front app?
Should there be rendering tests too, like with a comparison with a reference screenshot?
Relates to epic #143.
For now, the front-end and back-end applications are to be used with the same domain name.
Update the documentation to explain localhost
is always to be used, even when fully under Docker (using an external network, there is no need to call the back-end app using fpm
namespace).
Accept only one method (GET, POST...) for each route.
Make use of Composer scripts
capabilities, like with Yarn for the front-end.
Update the README accordingly.
Update all back-end dependencies in the process.
webmozart/assert
is to be moved in production requirements, as it will be used in value objects in the near future.
prop-types
eslint
with TSLint
prettier
TSLint
TSLint
is enough.Should the behat Symfony extension currently used in symfony
and symfony-api
branches be replaced by the FOB extensions? => YES!
Could it solve the problem of DI (acceptance
and test
environments services being all public for instance)? => It does
Is there a easy workaround to use correct environment for the different kinds of test (the old Symfony extension allows to specify which environment to use for a particular behat profile, not FOB)? => Use APP_ENV
before launching the command
akeneo/php-couplig-detector
The goal is to have a specific test environment for acceptance tests, where third party services can be replaced. For example, repositories using Doctrine in the real app (and in system and integration tests) could be in memory in this environment.
default
one) => one profile per sort of test@system
and use different contextsacceptance
environment to replace Doctrine by an "in memory" systemThere are several maintained branches, one inheriting from another.
Describe each of them, their purpose, and which one inherit from which one.
The front-end application currently uses 7.0rc1 since PR #127.
Create a new branch that will inherit from the react
branch, adding Symfony 4 as a backend.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.